How To: Leverage Browser Caching for Images, CSS and JS

How To: Leverage Browser Caching for Images, CSS and JS featured image

Ever checked your website speed using GTmetrix, Pingdom, PageSpeed or Yslow… or any of the other many and various latest and greatest speed checking tools?

Well, if you have, you might have come across a request to “leverage browser caching…” or similar.

What does “Leverage Browser Caching” actually mean?

What this means, is that you should instruct browsers to store (for example) images, CSS and JS files in their “cache” (i.e. locally) so that they don’t have to repeatedly load the same thing again and again (slowing everything down, at least a little). If you think about this a bit, it makes a lot of sense. For example, your logo doesn’t change, so really, browsers don’t need to be downloading it on every page: just once, on the first visit.

Browser caching helps visitors experience button click fast usage of your website. Users love it, and consequently, so do search engines.

So how to turn this on?

Whether or not you invested time, money, sweat, or otherwise into fancy-dan caching products which do everything “out of the box” the below instructions will get you caching everything using your website’s .htaccess file (yes, you need to be running apache… and allow .htaccess files… not a discussion for right now!).

How To: Leverage Browser Caching for Images, CSS and JS

Using .htaccess

Enter the below code into your .htaccess file. Note you can adjust these lengths to suit your needs.
## EXPIRES CACHING ##

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/javascript “access 1 month”
ExpiresByType application/x-javascript “access 1 month”
ExpiresByType application/x-shockwave-flash “access 1 month”
ExpiresByType image/x-icon “access 1 year”
ExpiresDefault “access 2 days”

## EXPIRES CACHING ##

Cache Busting

If you change your image / css / js file name when you update them, long caching times shouldn’t matter a jot to you. If you don’t you will need to flush caches in order to pick up your edits. Asking user’s to flush caches isn’t really an option.

Alternative Methods

If you’re running a WordPress site, one alternative to adding the above manually to your .htaccess file is to install a quality caching plugin, such as WP Rocket, which adds a very similar directive – among several others – to this file (assuming you give the plugin relevant permissions!).

Watch out for…

Watch out for Nginx

We like to make our clients’ websites really fast, often using Nginx as a proxy caching layer in front of Apache. You may need to do some configuring if you find your caching rules are not employed.

Watch out for Third Parties

When you’re speed testing your site in GTmetrix or whatever, you may see things like Google Analytics, Facebook tracking pixels, and other third party elements which are suggested as having a “short cache lifetime”. You cannot actually do anything about these third party scripts (directly) other than stopping using them. So don’t expect any fixes in this page to work for those. They won’t.

While it is possible to serve – for example – the Google Analytics JS files locally, this is a super advanced process, and not for a general article. If you are looking to do that, consider booking Silicon Dales for a full site optimization.

Can’t Work? Try a CDN

As we’re talking, mainly, about static content, here, such as JS, CSS and your site’s images, all of these may perform better if offloaded to a CDN. One of the advantages of using a CDN is you can set caching rules to be applied there, and this often has a more clear graphical user interface for novice and intermediate webmasters. A free DNS proxy and CDN service like CloudFlare may help you in these circumstances, though it should be noted that the free service may actually be slower than serving direct, if you have a super speedy system setup.

Leave a comment

Leave a comment below if this worked / didn’t work for you!

2 thoughts on “How To: Leverage Browser Caching for Images, CSS and JS

  1. Don’t forget you can contact us if you want to make your website faster, particularly if you run WordPress (with or without WooCommerce). There’s a big blue button below. Push it 🙂

Leave a Reply

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

Silicon Dales