Enable Leverage browser caching for your website

Enable Leverage browser caching for your website

So you are optimising your website and have most probably used the Google Page Speed Tool and/or the Pingdom page speed tool. Upon checking your site to see how its performing you come across this: Leverage browser caching. The tools you check with tell you to Enable Leverage browser caching for your website.

You have fast web hosting for your site so shouldn’t you be getting good results? well not necessarily.

So firstly what is Leverage browser caching?

To put it simply your site sends certain files to a visitors browser when they visit your website. These could be files like images, JavaScript files and CSS files to name a few.

Now the majority of the time these files will never change. They will be static files i.e they wont change often at all. Enabling Leverage browser caching for your website tells the visitors browser to cache those files for a specific amount of time before re-downloading them to the visitors browser again. This is good practice.

This is also commonly referred to as setting expires headers for your static content. Again this means that your visitors will store a copy of any static files in there browser for a specified amount of time.

The benefit of storing static files in your visitors browser cache is that it speeds up the load time of your site for returning visitors. Granted on the first visit those files will need to be fetched for them to be cached but then on subsequent visits those files will not be re-fetched and thus greatly speed up the load time of your site.

Its relatively simple to Enable Leverage browser caching for your website. Put the following code into your .htaccess file:


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

Its that simple. There is also a comprehensive html5 boilerplate .htaccess file available from GitHub courtesy of the team at the Roots Theme framework website. Its pretty comprehensive and not only does it allow you to benefit from enabling leverage browser caching but also other .htaccess tricks to ensure your site loads fast but is also secure.

The only downside that we have come across of this technique is for any external files. You cannot control the expires headers for external files. As such you may find that after having enabled leverage browser caching for your website you still get warning message OR not achieve the highest page speed scores possible. This s mostly due to external files.

Most commonly the external files this applies to is FaceBook, which we have seen to set there expire header times to less than a week which most page speed tools will report as not long enough. Unfortunately there is not much you can do here.

However you have enabled leverage browser caching for internal files on your site which will benefit your site speed load times.

Amir Farid

Amir Farid

Creative SEO Director at Umbrella Interactive Ltd
Amir Farid is the Creative SEO Director of Umbrella Interactive Ltd. Based in Rochdale, Greater Manchester, Umbrella Interactive provides online and digital media solutions to SME's and start-up businesses. Umbrella Brands include Umbrella Host, SEO Umbrella and Umbrella Web Studio. You Can find him on Google+
Amir Farid

@Umbrella_Host

We are dedicated to providing you with the best #BusinessWebHosting solutions at incredibly cost effective prices. Our #WebHosting platforms are second to none!
RT @larrykim: 📊 Here are 5 good reasons why #infographics are often used in #digitalmarketing. https://t.co/xtPWoMvQMu - 1 hour ago
Amir Farid
Amir Farid
Share this post: