Set browser caching using .htaccess

Set browser caching using .htaccess. This will tell the browser to cache/remember all requests from web-pages like images, JavaScript, CSS, fonts etc. for the specified time duration. So next time when the user opens the website it will not request all the resources again.
This minimizes the load time and renders the website/web-page faster than before.

When a unique visitor lands to your website it will take time to make the request ( usually same time as it was taking before setting expires ). So what we get is that setting expires usually helps when user re-visit the website. If the resources remembered by the browser is same on all pages of the website, then it will again not request them and speed up load time.

Generally, we should cache static resources of our web application like images (jpg, gif, png, favicons), javascript, CSS etc.

Depending on the type of the files or how frequently they get changed, we can define their expiry time as well. For example, images can be less frequent to be changed but our CSS can get frequent updates.

etc here is the code which you need to put in your .htaccess file. Copy and paste this into your .htaccess file and save it.

# BEGIN EXPIRES
<IfModule mod_expires.c>
 ExpiresActive On
 ExpiresDefault "access plus 10 days"
 ExpiresByType text/css "access plus 1 week"
 ExpiresByType text/plain "access plus 1 month"
 ExpiresByType image/gif "access plus 1 month"
 ExpiresByType image/png "access plus 1 month"
 ExpiresByType image/jpeg "access plus 1 month"
 ExpiresByType application/x-javascript "access plus 1 month"
 ExpiresByType application/javascript "access plus 1 week"
 ExpiresByType application/x-icon "access plus 1 year"
</IfModule>
# END EXPIRES

Now, it is time to test this. Refresh your website (better delete all your cache before refreshing to test the effect.)

As you see, website loads first time as usual (if you have really deleted your browser cache). Now refresh again. Woho ho.. It is working.

As we can see, we have set the expiry for CSS 1 Week, Images for 1 Month, Scripts for 1 Year. You may edit it as per your preference.

URL fingerprinting

In case you need to edit your CSS file, you need to change the file name as well. For example- if CSS file named as style.css has been edited then you should change the file name as style_v1.css.
This will assure that returning visitor loads the fresh CSS in the browser, not the old cached CSS. If you do not do this, it may be possible that the returning visitor is seeing the same color of navigation or any other style of old CSS file, as we have set the expiry for 1 Week.

We have tested it multiple time whenever we have worked on big projects, where load time does matter, it has served us as expected.

If you have any issue, let us know in the comment box.

Tags - htaccess