Performance: Enable Browser Caching: Technical Details

Setting your web server/site to suggest browser caching to your website visitors can have a huge impact on performance. One of the suggestions that Google PageSpeed Insights – and other performance testing tools – recommends is to make sure browser caching is enabled.

What is browser caching?

This is something that can be set on the web server and/or web site and it directs web browsers to cache certain data. So when a visitor comes to the site again, and either views the same page or a different page that references some of the same code or images, the browser can retrieve the data from the local computer cache instead of pulling it again from the server.

How to enable browser caching

This is something that is set in a file named .htaccess. If you have access to the files for your WordPress site you can edit this file yourself. It’s just a text file and very easy to edit.

There are a couple of WordPress plugins that will make changes to the file for you, but honestly I’ve had mixed results with them. If you have a good webhost they might even make the .htaccess changes for you. I know mine would.

Do it yourself with this code

To do this yourself, as mentioned you need to open the .htaccess file. Then paste in the lines of code shown below.

## LEVERAGE BROWSER CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType application/x-javascript "access 1 month"
ExpiresByType application/javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 2 days"
</IfModule>
## LEVERAGE BROWSER CACHING ##

What does the browser caching code do?

As you can probably guess just by looking at the code, this will tell the web browser to cache images for a year. So future times that the same image is referenced, the browser grabs it locally – saving quite a lot of load time for the page.

It also tells the browser to cache CSS (style sheets that impact page formatting) and JavaScript (code that runs in the browser for things like form validation or pop-ups) for a month. The reason this length is shorter is because those items are more likely to change in a shorter period. Whereas images – with the same file name at least – almost never change.

You can see that it also sets some caching time on a few other items. Those aren’t nearly as important as the images, CSS, and JavaScript – but every little bit helps!

Enable browser caching now

Go do this now. It really can make a huge difference. Why not ask your web host if they’ll make the changes for you. Or you can make the edits yourself if you feel comfortable doing that on your own.

This is just one, of several, optimization steps to make sure your WordPress site is super-speedy and your visitors have a good user experience.

Happy hosting!

 

Brad Kingsley

Leave a Reply

Your email address will not be published. Required fields are marked *