What is Browser Caching?
Browser caching is a process of storing and saving some of these files locally in the user’s browser. This means that if a visitor now reloads the website or visits another inner page, the browser won’t re-fetch some data (e.g. logo, some CSS files) because it already has it stored in the browser. The result is that the page loads faster than before.
The initial visit may take some time to load your website but subsequent visits to inner pages or reloading of the website will be much faster due to browser caching.
How does browser caching works?
Browser caching marks certain areas or parts of your website, which can be required to be updated at certain regular intervals. Let me explain…your site’s logo which is not going to change often. So by caching the image, we can instruct the user’s browser to download that image and re-check if we have made any change to the logo after one week or one month or one year. So if you have instructed the browser to re-check after one month, then for every page load of your website, the browser will not fetch your logo and will serve it locally because it was cached during your first visit. It will only check for any change to the logo after one month.
By instructing the browser to do so saves the server time to fetch images and other files which saves user’s time and server bandwidth also.
It is very vital to use browser caching because it reduces the load on your website’s server and ultimately reduces the load time for your users.
How to leverage browser caching?
If you have tested your site through any of the website testing tool mentioned in my previous post and found that you need to leverage browser caching, then here is how to do it.
It is done by putting some code in .htaccess file which is on your root folder of a website.
That means you’ll have to log in to your cPanel, open file manager and open .htaccess file. This file is very important for your website and it can break your website if used improperly.
Use it with caution. In reality, it is quite simple. For this tutorial, if you can cut and paste correctly, you should be worry-free.
Important! To make use of Expires headers the way it’s explained in this blog post, your server must be Apache (and requires the module mod_expires) and you must have access to your .htaccess file. If you don’t know what this means, talk with your hosting company first.
The code below should be added to your .htaccess file.
Save the .htaccess file and refresh your webpage.
How to identify different caching times with respect to different file types?
As you can see in the above code, we have some alpha-numeric code like A31536000 and A3600. They are time periods associated with the file types.
A31536000 corresponds to 1 year
A2592000 corresponds to 1 month
A604800 corresponds to 7 days or 1 week
A86400 corresponds to 1 day
A3600 corresponds to 1 hour
For example, the above code says that an image of a .jpeg type is cached for one year. If you wanna change that to one hour, you simply change the value from A31536000 to A3600
The above-mentioned values with respect to the file types are standard for most blogs and webpages, however, you can change it to suit your requirement but if you are just blogging like others then it is not advisable to change anything from above code.
Did you find this tutorial useful? Do you have questions or feedback? Let me know in the comments below.
Remember to share the knowledge with your friends in your network on Facebook, Twitter and many more.