Leverage Browser Caching For Images, CSS and JS To Decrease Loading Time

Google PageSpeed Insights is one of several useful tools for measuring website performance. However, some of its suggestions – like the ‘Leverage Browser Caching’ warning – may be confusing to inexperienced site owners. When you break it down, caching isn’t all that tough to understand. With a few tweaks, you can implement this development best practice on your site to cut down loading times and improve your PageSpeed score.

What Is the Leverage Browser Caching Warning?

In order to understand the Leverage Browser Caching warning, it helps to first know a bit about Google PageSpeed Insights. The Leverage Browser Caching warning is one of many ‘diagnostics’ Google PageSpeed used to return as a suggestion for improving your score like the following one:

In Version 5 of Google PageSpeed Insights, this message was replaced with the “Serve static assets with an efficient cache policy” warning:

Despite the change in language and appearance, the solution to these warnings is the same.

What Is A Browser Cache?

A Browser Cache (pronounced as ‘cash’) is a temporary copy of the elements or assets of a particular website that will be stored on a visitor’s computer, for faster-loading of that website for future visits. The cache only creates copies of static assets such as:

• Media (pictures, Logo, pictures, videos, background images, etc).
• HTML
• CSS
• JavaScript

Leverage Browser Caching In Blogger, WordPress & Website:

So as per your category, go to the related article that we published earlier in a detailed view with codes and steps to fix this.

• How To Fix The Leverage Browser Caching In Blogspot/Blogger?
• How To Fix The Leverage Browser Caching In WordPress?
• How To Remove “Leverage Browser Caching” In Your Website?

How Would You Verify Leverage Browser Caching?

Check out the below screenshot. You can see that the Expiry header set in response header of your file.

Recommendations:

1. Leveraging Browser caching will improve your website speed, by which you can give your users a better experience.
2. ExpiryType should be at a minimum of a week or one month (normally recommended for 1 year).
3. Do not set your browser caching more than a year in advance.
4. In case you need precise control over when resources are invalidated, you are recommended to use a URL fingerprinting or versioning technique. (Fingerprinting is the technique used to give each asset (CSS and JavaScript files) a unique name. So, whenever one bit in an asset (such as CSS files) changes, its name automatically changes, and the browser gets updated assets. Fingerprinting uses the unique name which is calculated the same across multiple servers, which stays identical, as long as the asset is identical.)

Conclusion:

And after implementing the header caching feature wait till few weeks to take effect. And check your blog on Google PageSpeed Insights, Thinkwithgoogle, and GTmetrix tools to see the result. Currently, modern web browsers are more efficient & optimized with website cache, external resource handling, data pre-fetching, etc, so the impact for the future is at a minimal – without depending (too much) on expiring header checks anyway IMHO.

Final Words:

Rest all is in your hand if you want to customize it or play with it. That’s all we have. If you have any problem with this code in your template then feel free to contact us with a full explanation of your problem. We will reply to you as time allowed to us. Don’t forget to share this with your friends so they can also take benefit from it and leave.