How to Leverage Browser Caching for WordPress Site
What is Browser Caching?
When you visit a website several things get loaded like your logo, CSS, JS files and other resources.
Now when you visit another page of the same site or if you visit the same site again. Why load the common things like logo and your CSS files? To prevent reloading of same things Caching was introduced.
Browser caching saves the resources that the browser has already loaded. So when a visitor goes to another page on your website your common files(logo, CSS files) are not loaded again, because the browser has them saved.
This help to save a lot of loading time and reduces the number of requests to a server. That’s why your first visit to a website will take a longer time than a repeated visit.
What is Leveraging?
Who will decide which files should the browser cache? For how long it should maintain the cache? Answer: YOU will decide.
Leveraging browser caching is when a site owner/developer has given instructions to browsers on how their resources should be handled.
Impact of Leveraging browser caching
When you perform your website speed test on any of the sites like GTmetrix or Google PageSpeed you will find a Recommendation suggesting Leverage Browser Caching and “expiration not specified” warning.
It’s important and a high priority warning as not setting browser cache increases your website load time and leads to a lower site ranking.
SchoolMonk’s Performance WITHOUT Leveraging browser cache:
You can find a lower Yslow score of 72%
SchoolMonk’s Performance WITH Leverage browser caching:
YSlow score has become better with grade B and also PageSpeed has increased to 94%
How to Leverage Browser Caching
It’s very simple all you need to do is, add this below piece of code in your .htaccess file.
.htaccess file is present in the root of your file directory. Log in to your cPanel and open File Manager. Then open .htaccess with a code editor and add the following code snippet and save the file. That’s it!
You can also set different expiry times. If certain types of files are updated more frequently, you would set an earlier expiry time on them eg CSS files.