How To Leverage Browser Caching

How To Leverage Browser Caching

Written by: J. Zatkulak and Patrick O Asytour
How to leverage browser caching

How to leverage browser caching

How to Leverage Browser Caching

By Patrick O Asytour

During display of webpages the browser is compelled to load a number of things. These include the CSS file, your logo and other resources. In this case, the browser caching only remembers the already loaded resources. It therefore means that when you have a visitor on your website trying to reach another page, it is unlikely that your browser will try to find your CSS file or logo again. This is because the file is already in existence and it will be "remembered" automatically. What follows next is that your pages will be able to load with increased speed.

You may have tested the speed of your webpage and realized that you have to utilize browser caching; the following are tips to help you leverage it:

Adding some code to the .htaccess file on your browser is very important. In this case, you will go to your webhost's file manager. It is also good to understand that most important things on your site are controlled by the .htaccess file. Before changing this file, you must understand what it really is. The following code should be added to the top of your .htaccess.


ExpiresActive On
EXpiresByType image/jpeg "access 1 year"
ExpiresByType image/jpg "access 1 year"
ExpiresBy Type image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType text/html "access 1 month"
ExpiresByType text/css "access 1 month
ExpiresByType text/x-javascript "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresByType application/x-showcase-flash "access 1month"
expiresDefault "access 1 month"


The next step is to ensure that your HTTP headers have been edited and expiry dates on certain files set anew.

Try to find your .htaccess file from your domain root. Typically, this file is hidden but you should be able to access it in FTP clients such as CORE or Filezilla. You can also use the notepad or any other text editor to make changes to your.htaccess file.

After editing the .htaccess file, you can now save it and refresh your page.

The best way to set different caching times for various types of files

Looking at the above code, you will find that an expiry time frame of "1 month" or "1 year" is stated. In most cases, this period is related to the various types of files. In the above code, for instance, a .jpg file is given a 1 year cache. In case you need to make some changes and allow them a caching period of 1 month, the best way to achieve this is simply to replace the "1 year" with "1 month". Actually, most webpages and blogs have been found to optimally use the above values.

You can set different expiry dates, depending on the website files. In a situation where you have your files updated regularly, you will be required to set an earlier expiry time on the CSS files among others. Having accomplished that, save the file in its current format and do not change it into a text file. But if you are using any kind of CMS, plug-ins or cache extensions may be present.

It is recommended that:

• For all static resources, you should be more active with your caching
• Minimum expiry time frame should be between 1 month and access +1 year
• Do not set your caching in advance above one year


When enabling browser caching, it is important that you take great care to ensure that the parameters are not set too long for some files as this can lead to your visitors' failure to access the newer version of your website after the updates. If you engaged a web designer to make changes to your website, it is likely that, the changes may have been made although you may not be able to see them since these elements have been cached on your browser.

Article Source: