Leverage Browser Caching Using .htaccess
up 0 down 0
Already voted for this article!

Leverage Browser Caching Using .htaccess

Before starting with Leverage browser caching , we will start with what is a browser cache ? Actually Browser cache is the local resource on a users computers which stores the files when a user visits the website.When a web browser displays a website it has to load several things like images, logo, CSS file, and many other resources.
Loading so many resources on local pc takes a lot of time and result website loads so slow. and Every time a browser loads a web it has to download all the files to properly display the page. This includes the HTML, CSS, JavaScript and images files. This process repeats all the time whenever we refresh a webpage.
“Leverage” browser caching is actually how browsers dealing with their resources. This has been instructed by google webmaster to all browsers.
When browser caching is done it “remember” all the resources that the browser has already loaded before. When a visitor goes to another page on your website your logo, CSS files, etc. do not need to be loaded again, because the browser has them “remembered” all the resources before. This is the reason that the first view of a website takes longer than the repeating views.
If you have tested your webpage ever for speed and found out that you need to set leverage browser caching, then here is way to do it.


To enable browser caching you need to edit your HTTP headers to set expiry for certain types of files. Open your Cpanel / User hosting account and Find your .htaccess file in the root of your domain. This file is a hidden file but should show up in FTP like FileZilla . You can edit the .htaccess file with notepad or any basic text editor.

In htaccess we will set our caching parameters to tell the browser what types of files to remember. The below code tell the browsers , what to remember and how long it should remember. Setting a time duration for expiry is really very important. Because if you think your web page is updated a week then you must set cache parameters not more than a week. This is because user’s browsers will then load the cached content but exactly your web display new content and updated files. so setting a time period for cache expiry is indeed very important.


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"


Common caching issue explained by example

If we set ExpiresByType image/jpg "access 1 year" to images, it means images will be cached for one year. Remember that this mean if you change images in your website they will never be seen by all users. This is because the visitors will see the cached version of images , means those images which they have visited previously. Visitors having first visit to your website will see the latest updates , but once they visit , images will be stored in cache for 1 year. So here we just assumed 1 Year only as an example.

Something To Say ?

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