How To Leverage Browser Caching In WordPress

One of the key parts of our holistic view to website development and search engine optimisation, is optimising websites for speed.  We love designing and developing beautiful websites, but often stunning design elements come at the cost of website speed.  A quick visit to Googles Page Speed Insights reveals a number of things we invariably have to optimise before a site goes live (compress/resize images, use server side compression etc etc).  Almost every time we scan a site the first time, we get the recommendation, “Leverage Browser Caching” amongst other great tips courtesy of Google.

Given like millions of others, we build a huge percentage of our sites on WordPress, we thought we’d share a quick website development tip…

How To Leverage Browser Caching in WordPress

The quickest and most effective way to leverage browser caching in WordPress, is to add some basic code to your htaccess file.  A quick warning though…this file is critical to your site and shouldn’t be edited without taking a backup, and definitely not if you not confident you can fix it if you accidentally make a mistake.  If that is the case, luckily we are here to help…should you still wish to try this, follow the below.

Open your htaccess file so you can edit it…our preference is actually to use the file editor available via the Yoast SEO plugin.  When open, add the below code and click save.

## EXPIRES 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 text/html "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType text/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 1 month"
</IfModule>
## EXPIRES CACHING ##

When you now re-scan your website on Google Page Speed Insights, you’ll notice your site now gets a lovely tick of approval for browser caching and a healthy jump in your page speed score!

How Does Browser Caching Work?

Browser caching effectively means the first time a web page is loaded, certain files are stored locally in the browser.  Subsequent visits to the same page will load faster because instead of downloading all the files again, the browser won’t need to download the files it is already storing, therefore speeding up subsequent page loads.

An important note about page speed and Google Page Speed Insights.  We aren’t of the opinion that it is the “be all and end all” of page speed.  In fact technically it’s not really testing pure page speed or load times…its really just ticking off the things Google thinks are good practises.  As such, we don’t recommend getting too caught up in trying to score 100/100…because eventually you get to a point where the marginal gain for the effort required isn’t really making it viable (ie: optimising an image for 1kb saving just to score 100).  What Google’s tips do offer though, are some great starting points and areas where you can find big gains relatively easily…like browser caching.

So there you have it…that’s how you leverage browser caching in WordPress.  Now off you go…make your site faster and let us know how you go in the comments section below!