Leveraging Browser Caching

Stopwatch 1Speed is an essential component of a positive user experience, and a positive user experience is a crucial factor in your ranking. Google has an unfathomable amount of data to comb through and offer to searchers; they want to supply only the highest quality results. Your content, and how fast it loads, makes you more attractive in the eyes of search engines and users. One way that you can make your site speedier is to leverage browser caching. Here’s the why and how.

When a browser loads a webpage, it has to load all of the elements that go into that page – the images, the HTML and CSS files, JavaScript, etc. – so it can display it to the visitor properly. The more files, and the larger those files are, the longer it takes to load. Browser caching works by “remembering” these files, or storing them in the user’s browser.

A first visit will result in the page being loaded at the normal time; but after that, the browser stores the files, so when the user comes back, refreshes, or navigates to a different page within the site, load times are much quicker. The browser has to download less, and there are fewer requests made to the server.

This works wonderfully with static content, like your logo, which is not going to change, or at least not frequently. It can also work with more dynamic content as long as you set the proper expiry dates. So let’s look at that now:

To tell the browser to store elements locally, you set expiry dates on the desired files.

  • Go to your htaccess file. You can edit this file with Notepad or a text editor.
  • Determine which files you would like to cache and for how long. It could be days, it could be a year. It is recommended that you opt for at least a month, and up to one year with static content.
  • Add the following code to the top of your htaccess file:

## 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 text/html “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 1 month”
</IfModule>
## EXPIRES CACHING ##

The expiry dates are examples; you should set them to your preferred time periods. For  instance, if you want an image to be cached for one month instead of one year, simply change:

ExpiresByType image/jpg “access 1 year”

to:

ExpiresByType image/jpg “access 1 month”

Now, just save and refresh, and you’re done.  You can find some more details on Google’s webmaster resource page.

Leave a Comment