How to Leverage Browser Caching

Why Browser Caching?

Most of the websites include files and resources which don’t change frequently, such as CSS, Images, Javascript; etc. But, everytime the browser loads a webpage, it loads all these resources again and again even though they’re same and don’t change. Loading again takes a lot more time in showing up the webpage and there is so much competition nowadays that slow websites are sued away. So, the need to make a webpage load more and more faster arises. That is why, Leveraging Browser Cache will make a good improvement in your webpage’s PageSpeed and ySlow ranks.

HTTP caching allows the browsers or proxies to store these less changing resources locally and then it can refer to the locally cached copy instead of downloading it again on loading a different page of the website. Enabling cache not only helps in loading the website faster, but also helps in saving Bandwidth and Hosting cost of the website. Setting an expiry date or a maximum age in the HTTP headers for static resources instructs the browser to load previously downloaded resources from local disk rather than over the network.

How to leverage browser caching

In order to do this, we need to modify our .htaccess file and add in the appropriate directives.

Finding .htaccess:

You can access your .htaccess file through cPanel by clicking on the File Manager. When the popup box appears, click on the Web Root option and make sure that the “Show hidden files” option is checked.

Directives to Leverage Browser Caching:

Open the .htaccess file, paste in the following set of Directives at the top of the file to enable Brower Caching:

## 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 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 2 days"
</IfModule>
## EXPIRES CACHING ##

Now save your file and see the difference. Your subsequent page loads will show a great boost.

, , , ,

11 Responses to How to Leverage Browser Caching

  1. Franck.H August 7, 2012 at 11:59 am #

    Thanks a lot… you save my day

  2. Corsica August 17, 2012 at 6:35 am #

    me too…. you saved my day, thank you so much !

    no more plugin that creates more problems than else,

    my site is flying now and everything works fine !

  3. Nobita August 12, 2013 at 4:38 pm #

    Me too, Thank you very very much!

    • singhnsk August 12, 2013 at 4:46 pm #

      Hehe.. Feels great that I was able to help you. Thanks 🙂

  4. Griffin October 24, 2013 at 2:00 am #

    Didn’t work for me. I opened my .htaccess file (I use cPanel X) and pasted your code at the top. I saved it and then went back to PageSpeed Insights and it still need to leverage my browser caching…it doesn’t recognize that I have any expiration dates specified.

    Maybe the problem is because I use cPanel X?

    • Narender October 24, 2013 at 8:28 am #

      That shouldn’t be the cause though. Need to look into it.

  5. Art White April 7, 2015 at 9:09 am #

    I have a virtual server – its Apache based but no cPanel. .htaccess runs my 301 redirects OK.

    Found this page looking for a way to meet Google Pagespeed stuff about cache leverage and setting expiry to the static images.CSS etc,.
    I assume some of the lines in your code above relate to WordPress – could I use this on my none wordpress website?
    Or is there a tutorial for none WordPress?

  6. Art White April 7, 2015 at 9:15 am #

    Sorry – forgot to ask…..
    if I set something like this :

    ExpiresByType image/png “access 1 year”
    ExpiresByType text/css “access 1 month”

    What happens the day after the month /year is passed. Would a new set of expires be needed or do search reset to one year – one month again.

    And finally – does this apply to every image by name ditto CSS and other script names?

    Apologies from a brain dead none pro web site maker..

    • Narender Singh April 7, 2015 at 9:35 am #

      Hello there
      As you’d already know, adding expiry date allows the browsers to cache your static content for a longer duration than it would by default. When you set expiry of a particular resource to, say 1 year, the browser will download them the first time your visitor visits your website and would keep them in cache for 1 year. So, upon subsequent page loads, the browser will only query and load the locally cached copy instead of re-downloading all of it again. The cache will be kept for the duration you set on expires and when that duration exceeds, the browser will request a new copy of the files from the server and then again cache/store them for the duration defined in the expires header. This not only results in faster page loads, but also reduced bandwidth consumption.
      Yes this will apply to any of those resources that are loaded by the browser, unless a manual expires header is defined for a particular item. And, no. There is nothing strictly WordPress in this code as those resources are generally served by all websites. You can however manually adjust the expires if you edit your CSS or images too frequently.

  7. Art White April 7, 2015 at 9:40 am #

    Thanks for a very speedy reply and the above info that I can use – wish I had found you a month ago.
    The way Google goes about things – I will add – be back soon.

    • Narender Singh April 7, 2015 at 9:49 am #

      Hehe.. I guess there are many websites providing a similar implementation, so IDK how you even found me because Google tends to show more Webmaster and SEO related sites for similar queries.
      Anyways, I hope this will help you in improving your PageSpeed grade by some degrees, but there are generally a lot of things to include and even I myself failed to implement all of them 😛

Leave a Reply