How to Leverage Browser Caching

Why Browser Caching?

Most of the websites include files and resources which don’t change frequently, such as CSS, Images, Javascript; etc. But, everytime the browser loads a webpage, it loads all these resources again and again even though they’re same and don’t change. Loading again takes a lot more time in showing up the webpage and there is so much competition nowadays that slow websites are sued away. So, the need to make a webpage load more and more faster arises. That is why, Leveraging Browser Cache will make a good improvement in your webpage’s PageSpeed and ySlow ranks.

HTTP caching allows the browsers or proxies to store these less changing resources locally and then it can refer to the locally cached copy instead of downloading it again on loading a different page of the website. Enabling cache not only helps in loading the website faster, but also helps in saving Bandwidth and Hosting cost of the website. Setting an expiry date or a maximum age in the HTTP headers for static resources instructs the browser to load previously downloaded resources from local disk rather than over the network.

How to leverage browser caching

In order to do this, we need to modify our .htaccess file and add in the appropriate directives.

Finding .htaccess:

You can access your .htaccess file through cPanel by clicking on the File Manager. When the popup box appears, click on the Web Root option and make sure that the “Show hidden files” option is checked.

Directives to Leverage Browser Caching:

Open the .htaccess file, paste in the following set of Directives at the top of the file to enable Brower Caching:

## 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 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 2 days"
</IfModule>
## EXPIRES CACHING ##

Now save your file and see the difference. Your subsequent page loads will show a great boost.