WebmasterLogs.com

Get your pages to load faster by saving on your resources.

If you have been following my blog, you’ll notice that I run a series of post related to the enhancement of your pages loading time.

After numerous feedbacks, I have been asked to write a tutorial about Browser Caching as it seems that the name itself is like a total foreign language to most of you…

What is Browser Caching?

Without browser caching, each time someone requests a page from your site, all the elements and images from your site need to be send over and over again.

Alongside with your webpage, these files are often associated:

• CSS
• JS
• Images
• Media files

The truth is that most of those files never change over time, and most of them are not private either in nature. So rather than having to send them over and over across the internet each time someone visits a page, why not let them discreatly save those files on their browser, at least until the cache expired.

When leveraging on browser caching, all the elements that don’t frequently change on your site will be copied and stored on your visitor’s computer so that next time they visit this page, they won’t have to reload them over and over, saving precious resource and bandwidth for you and your visitors while increasing the loading speed of your pages by reducing the packet size.

How to enable Browser Caching?

Enabling browser caching is nothing more than giving specific instruction regarding a specific file or type of files.

Usually the instructions should include the following type of information:

• Type of file concerned.
• How long the file should be cached.

All these information will then be written in the .htaccess file of your site and uploaded on your server.

If you don’t have one yet, the first step is to create a .htaccess file.

Next, start by opening your .htaccess file; depending on your site, this file may be blank or may have instructions on it. If it does, just go to the bottom and create a new line.


# 1 YEAR
<FilesMatch "\.(ico|pdf|flv)$">
Header set Cache-Control "max-age=29030400, public"
</FilesMatch>
# 1 WEEK
<FilesMatch "\.(jpg|jpeg|png|gif|swf)$">
Header set Cache-Control "max-age=604800, public"
</FilesMatch>
# 2 DAYS
<FilesMatch "\.(xml|txt|css|js)$">
Header set Cache-Control "max-age=172800, proxy-revalidate"
</FilesMatch>
# 1 MIN
<FilesMatch "\.(html|htm|php)$">
Header set Cache-Control "max-age=60, private, proxy-revalidate"
</FilesMatch>


Identifying the type of file concerned

The very first question you should ask yourself is which files should you allow to be cached?

Just think about all the different elements on your site that:

• Don’t change often.
• Are regularly loaded.
• Those don’t affect your privacy.

Some possible good example would be your logo, or different images you may have on your site, possibly your CSS file or some JavaScript files too.

Based on this, you have 2 ways of instructing selection of those files:

• Individually: (see above example)

  In this example, the file to be cached is “swfobject.php” you would replace this with whatever file you wish to cache. This method is useful for caching specific files such as a JavaScript or a CSS file for example.

  The tags <Files> and </Files> delimit the beginning and end of the instruction given to the browsers.
   

• By extension type: (see above example)

  In this example, rather than naming files individually, we are doing a global selection based on file extension. This is particularly recommended if you want to cache all your images for example. Here all the files with extension “ico” and “jpg” will be selected.

  The tags <FilesMatch> and </FilesMatch> delimit the beginning and end of the instruction given to the browsers.

Caching Length

Once the file type is defined, you’ll have to tell the browsers how long you want them to keep a cache of your files before they ask for an update.

There’s no specific rules as too how long or how short your cache length should be but for thing like your logo, you may want to consider 1 year or more since this one is unlikely to change.

Also most of the images you have on your site may have a cache of at least 1 month, while your CSS file may have a cache duration of 1 week only if you update it more or less frequently.

Personally I have some files set to be cached for over 5 years…

Not wanting to go into complicated details, I’m going to show you 2 ways of setting your cache length:

• Using expiry date. (see above example)

  In this format, we’ll be using the command “Header set Expires” to inform the browser at which date it should update the cached file. The date format is as follows: “full date, full time, time zone”.
   

• Using expiry period. (see above example)

  In this format, we’ll be using the command "Header set Cache-Control" to inform the bowser after with amount of time the cache of the file should be expired after first caching. The duration is set using the command “max-age=” and the duration itself is given in seconds. Here 29030400 accounts for 1 year duration. “public" just set this file as publicly accessible.

Combining both methods

Of course, depending of your files you may need to use a combination of both methods and there’s no problem at all doing so, all you need is to write the appropriate set of instruction on a different line each time:

In Conclusion

There’s more to browser caching that what I showed or explained in this tutorial, however my goal here is not to make you a caching expert but rather to share sufficient knowledge with you for you to be able to use and apply these information immediately.

Hopefully this post will help to shade some light of one of those obscure term often heard about that is “caching”…

This document by N Prudhon was rescued from Google Cache after the original site went down.