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

How To: Leverage Browser Caching for Images, CSS and JS featured image
(Last Updated On: October 24, 2016)

Ever checked your website speed using GT Metrix, 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 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

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 ##

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.

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

1 thought 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