Leveraging Browser Caching


Lets have a look at how you can leverage browser caching to further optimize your site and reduce your load times. First off, what is browser caching? A web browser cache stores elements from a site such as HTML files, fonts and scripts so when you re-visit that site it doesn’t have to re-download everything, saving time and data.

This cached data can be used to help optimize the users load times on your own websites by ensuring the expiry dates are set correctly (how long the data is stored for in the cache before needing to be re-downloaded when the site is revisited).

To edit expiry dates you need to edit the .htaccess code file for your website. For each element you’ll need to set an expiry date, bearing in mind this means that users may not always be getting the latest version of your site on each visit. Obviously certain file types will need shorter expiry dates as they will be updated more often than others. An example of what you would input to the top of your .htaccess file can be seen below.

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

We have a support article which goes into deeper detail around browser caching which you can read here.

Share this postShare on Facebook
0Tweet about this on Twitter
Share on LinkedIn