How to Leverage Browser caching

Before describing “How to Leverage Browser caching”, you would like to know why and what of it. So we start by explaining what is “Browser caching” and then “Why use Browser caching”. At last we would describe how to do it.


WHAT IS BROWSER CACHING


Browser caching means that the website user’s browser(eg. Internet explorer, Safari, Opera, Mozilla firefox)  stores the files that it had loaded once from a site. Lets take “buttur.com” as an example.

Say you have loaded “buttur.com” once. If “buttur.com” have browser caching enabled, its files such as “images” (eg. logo and other images) and other scripts  will be stored on users computer.

So browser caching allow your site to store its files on users computer.

Now comes the question why do you need “Browser caching”.


WHY BROWSER CACHING


In simple terms

“To make the returning user’s page load faster”.

If the site makes use of browser caching that will allow the browser to store website files such as images, css and other such files. So the next time the user returns, he will not have to request the cached files.

Browser caching is one of the parameter that google uses to measure your page’s performance. So its strongly recommended that you make use of browser caching.

Browser caching also allows you to specify a time for each cached type. For eg. if you make changes to your site every one month or one year, you can specify age of you cached file. More on this later.

Lets come to “How to Leverage Browser caching”.


HOW TO LEVERAGE BROWSER CACHING


To enable browser caching you will need access to your website’s .htaccess file. If your site is using cPanel, you can open the file manager(enabling the hidden files) and go to your website root directory.

Once you have access to your .htaccess file, you can open up in an editor and add the following lines to the top of the file:

## EXPIRES CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg “access 1 year”
ExpiresByType image/png “access 1 year”
ExpiresByType text/css “access 1 month”
ExpiresByType text/x-javascript “access 1 month”
ExpiresByType application/x-shockwave-flash “access 1 month”
ExpiresDefault “access 2 days”
</IfModule>
## EXPIRES CACHING ##

Each type of file your site uses, can be used in above file to set its caching life. The above code will set one year caching period to your website’s “jpg” and “png” files. The “css files will have one month cache life.

Please note that the duration for which files reside on the users machine will vary depending on the browser and other parameters.

Leveraging the browser caching will definately improve your site’s load time. To check you site performance you can use “Google page speed”. There are two modes available

  1. Online (Google Page Speed Online)
  2. Offline (Download Google page speed extention for Google Chrome)

Leave a Reply

Your email address will not be published. Required fields are marked *