Leverage Browser Caching- What is it?

Today we'll be talking about something that will actually be beneficial in increasing website load time and speeds. Let's talk about what happens when you view a website in your browser first. When your web browser displays a webpage, it has to do the task of loading all your page elements such as Logo, the CSS file and other elements. Browser caching does a wonderful job by "remembering" the elements your browser had already encountered and loaded when you had previously visited a particular site. Suppose you go to another page on the same website, then what happens is that the browser records and remembers the previously loaded elements and doesn't need them to load them again. It just has to access the cached version of the page you had visited. People have asked how to make website load faster all the time.What we get out of this in the end is faster website load times.

Most often you need to check the website load time of your own website, and you happen to find out that you are required to do the task of leverage browser caching. You may ask how could that be done. Well read on to find out.

How do you enable browser caching?

 It's not at all complicated. It's pretty simple. The most sought after way of achieving this is to add a piece of code to a file named .htaccess on your hosting website. All you have to do is go into the file manager on your webhosting service provider's cPANEL and make changes to the file.

This particular file .htaccess has a lot of influence on many important things on your website.
So, you must be careful what you edit there. If you're unfamiliar with how it all goes, do some research on the .htaccess file or read about it on your service provider's support page.
Anyway, down below is the code that is to be added to the .htaccess file. Notice that this code tells the browsers how long it is that they should store the cached webpages. This code must be placed at the top of your .htaccess file.

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

Now after you have added this piece of code, please save your file and refresh your page.

How to set custom times for different file formats?

As seen in the given code above, time periods like 1 month and 1  year are given. These are associated separately with different file formats like .jpg in the above example which states that it should be remembered for one year.

This can be changed to suit your needs. You can define any time limit for any file format by editing the code given above.

Issues faced by caching  

If suppose you have listed your code, images and other elements to be remembered for a long time, say, one year, the issue you face afterwards is that when you make changes or update the html, css or any other elements, those won't be visible to the persons who have cached your webpages. Only old versions of that page would be visible rather than the current ones.

 

Recommended by Google

Google recommends the usage of Expires(discussed here). It goes on to recommend that it's imperative that you specify one of the expires or Cache-control Max-age. Only one way is recommended by Google and that we have already discussed here.

Well, that's all folks. Hope you learnt something new and exciting today about leverage browser caching in web hosting.

Have a nice day!