WordPress Optimization | Leverage Browser Cache

Leverage Browser cache is the process of telling the browser to cache your static content. As websites become more dynamic and heavier it is important to reduce the payload and leveraging the browser to cache those objects is just one way of doing just that. Without it you would be loading the site raw, which would strain many server. With Most sites being on shared hosting, where the resources are shared with many other websites then we can quickly see a problem if we do some simple maths.

Google uses speed in its algorithms now to rank your site, by how much it is effected is not entirely known but as it is used it is important.

If a website is 500kb for the home page and there are 100 websites on that server and someone enters each site at the same time then suddenly the server has to deal with and process 50MB of data, scale it up and we begin to see the problem. Servers are still computers with the same components only more powerful and with more processors and RAM.

How does it work?

Leverage browser cache works by telling browsers that are compatible such as most modern browsers like Fire Fox, Chrome and IE 9 to store a static HTML version of your site locally, i.e. your computer. If you use Ccleaner on your computer,  you will see that after a days worth of browsing the net you will have a lot of cache store on your computer. This can amount to a lot of data in some cases, especially if you watch YouTube for a significant period of time.

This is part of the reason many computers clog up, which is why clearing the cache is important once in a while at least.

But it is more important and better for the end user to recieve a site quickly so caching is here to stay.

How do we Leverage Browser Cache

To leverage browser cache we must enable it and we can do this with a file called .htaccess which can be found in your file manager.

Please note for Cpanel users, when you select file manager and the pop up box appears you must select show hidden files or you will not see your .htaccess

## EXPIRES CACHING ##

<ifModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access plus 1 year"
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/gif "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType text/css "access plus 1 month"
ExpiresByType application/pdf "access plus 1 month"
ExpiresByType text/x-javascript "access plus 1 month"
ExpiresByType application/x-shockwave-flash "access plus 1 month"
ExpiresByType image/x-icon "access plus 1 year"
ExpiresDefault "access plus 2 days"
</ifModule>

 ## EXPIRES CACHING ##

Your .htaccess is the where the magic is and adding this to it will enable browser caching.
Looking at the code above we can see what is going on.

The Wrapper state the type of module being used, in this case mod_expires.

The next part tells apache to turn on the module

The final part in between the wrappers tells apache what to cache and for how long,  in this case we are saying that the above file types from the moment they are accessed or loaded to the end users browser will be cached for X amount of time before being refreshed unless you change something then the condition if clause will load the latest version.

If your content is dynamic and changes on a regular basis then you will need to use 304 not modified headers and to do this just add this to your .htaccess.

<FilesMatch "\.(jpg|jpeg|png|gif|js|css|ico|swf)$">
Header set Expires "access plus 1 year"
</FilesMatch> 

# 2 DAYS
<FilesMatch "\.(xml|txt)$">
Header set Expires "access plus 2 days"
</FilesMatch>

# 2 HOURS
<FilesMatch "\.(html|htm)$">
Header set Expires "access plus 2 hours"
</FilesMatch>

Meet the Author

Matthew Horne

Matthew Horne is web developer who specializes in optimized development. He also builds custom solutions instead of reverting to plugins. Matthew Has a strong understanding of PHP, JavaScript, jQuery.

18 comments… add one
  • Shasha Sep 11, 2012, 10:04 pm

    I have W3 total cache installed …can i still use this code to leverage browser cache.

    • Matthew Horne Sep 11, 2012, 10:08 pm

      Yes you can, it will simply cache resources that w3 might not be caching, please note though it wont cache resources form an external server, like google ads ect.

      Regards

      • Shasha Sep 11, 2012, 10:11 pm

        Thanks Matthew.let me try this.

      • bqchinh Sep 21, 2013, 11:14 am

        Thanks Matthew Horne. I’m looking for that.

  • Shasha Sep 11, 2012, 10:10 pm

    There are already some codes in my .htaccess related to leverage browser cache.
    Please advise?

    • Matthew Horne Sep 11, 2012, 10:18 pm

      Is that w3 related? You can try and remove it if it’s not and then test to see if the above code is more effective, different servers have different set ups so they require different alterations to make them run effectively.

      Regards

  • Campbell Oct 9, 2012, 5:45 pm

    Hey Matt nice article. There is a lot the average user could do just through .htaccess that would greatly increase the performance of their website. It’s too bad that shared hosting for the majority does not support MOD_DEFLATE as that would solve the majority of most peoples load times.

    • Matthew Horne Oct 9, 2012, 5:46 pm

      That is very true, but most people don’t want to pay $$$ even if there site is big, shared hosting is a no go for any business.

  • Michael Nov 20, 2012, 8:58 pm

    Thanks for that. I just tested my load speed before and after on Pingdom. Before I made changes basted on your advice I had a score of 78/100 after the change I scored 83/100 with almost every file loading in under a second. Leverage browser rating improved quite a bit. Thanks again.

    • Matthew Horne Nov 20, 2012, 9:00 pm

      Excellent im glad this helped you. Its not always possible for everyone, because each server and server limits are different, but when they work, they work well.

      Regards

  • Adam Jul 8, 2013, 9:27 pm

    So, if my site has a lot of dynamic content should I both sets of code?

    Both the first code box (expires-by-type), and the second code box (header-set-expires) to my htaccess?

    • Matthew Horne Jul 9, 2013, 7:08 am

      if you have dynamic content then you would want the second one which will give you 304 responses. That means it will check to see if something has changed and if so update the cache on the users browser.

      You could also combine them, so for example use the top one for all images and use the 2nd one for html, xml etc.

      You can use firebug in firefox to check responses. I can make a video to show you how if you need me to.

  • Eduard Aug 29, 2013, 11:13 pm

    I installed your code on my website, using a CDN (max CDN) and Supercache. But im getting a error 500 internal server error, got the code out and works fine again. But how come I get this error?

  • rphrus Sep 22, 2013, 5:51 am

    Hi,

    Do I have to insert the numbers in between the “access plus 1 year”?

    • Matthew Horne Sep 22, 2013, 7:51 am

      I am not quite sure what you mean, which numbers do you refer to?

  • Liesje Nov 5, 2013, 7:14 pm

    Works perfect here ! Thank you so much for this article

  • Malou Feb 12, 2015, 6:25 pm

    Nice information! Made my browser leverage disappear

Leave a Comment