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?

Defining the terminology

Leverage means, basically, use (like a lever). Browser caching is the way most browsers (like Google Chrome, Apple’s Safari, Internet Explorer, Microsoft Edge etc are all browsers) store information “locally” (on your device) in order to load more quickly in future.

JS is short for “javascript” – these files tend to modify some user based function (like displaying a message box if user does X).

CSS is Cascading Style Sheets – these files determine the style of your website, like fonts and colors, etc.

Images – these are the pictures on your site (gif, jpg, jpeg, png, etc) – they only need to be downloaded once if you allow users to browser cache them.

What “Leverage Browser Caching for…” means for your website

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.

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!).

Using .htaccess

If your server is a LAMP setup, and therefore you use Apache as a web server, and you allow overrides (the normal WP setup) you can enter the below code into your .htaccess file. Note you can adjust these access periods to suit your needs.

The gist above shows you the code to drop in to your HT Access file.

Browser Caching for JS

The javascript (or JS) in your site is these parts:

ExpiresByType application/javascript “access 1 month”
ExpiresByType application/x-javascript “access 1 month”

Having those in there will ensure javascript is browser cached. You’ll want to rename your JS files if you change them, or you’ll have some visitors seeing old JS files (from their browser’s caches).

Browser Caching for Images

All the image file types in the above htaccess file will allow your visitors to store them locally, for zippy speeds, those would be:

ExpiresByType image/jpg “access 1 year”
ExpiresByType image/jpeg “access 1 year”
ExpiresByType image/gif “access 1 year”
ExpiresByType image/png “access 1 year”

Also, kind of:

ExpiresByType image/x-icon “access 1 year”

and

ExpiresByType application/pdf “access 1 month”

Because, this will allow them to cache any PDF and icons you have in the site too – to prevent them being downloaded often. PDF’s aren’t technically images, but, they are Printed Document Files – so they maybe contain images… so here they are mentioned!

Browser Caching for CSS

For the CSS, its a one-liner in the above, this one:

ExpiresByType text/css “access 1 month”

This tells the browser to cache CSS files for 1 month from first access. Like with JS, make sure you rename your CSS files if you make changes to them, or your visitors won’t see the changes for up to 1 month.

Using Nginx

Nginx is a really fast alternative to apache, but you’d need to use other rules to get this working.

The following is an example which can be added into your Nginx conf file for your website in order to enable browser caching.

location ~* \.(jpg|jpeg|png|gif|ico|css|js)$ {
expires 30d;
}

This will cache all of the above file extensions for 30 days.

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!

3 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 *