Leverage Browser Caching In WordPress To Speed Up Your Website

In This article, we will learn how to fix Leverage Browser Caching In WordPress, Apache, and Nginx servers to improve your website speed score in tools like webpagetest, GTmetrix, Pingdom, Google PageSpeed Insights, and YSlow.  Before I start explaining how you can fix browser cache warning it is very important to know some basic detail about browser caching.

You may also be interested in the best Cache plugins, Fomo Plugins, and Security Plugins

What is Browser Caching and How it works?

Whenever you visit a website or web page Your browser has to download every content like Html, CSS, javascript, images, and other resources. To avoid repeated downloading of the content inside your browser we set Leverage Browser Caching. When you set browser caching your browser will get an instruction from the server on how your content should be dealt with when visitors visit your website. That means once you set caching then the visitor browser will store all your static files like images and CSS files once they visit that page. And when they visit another page then the browser will download only the rest of the content which is not saved inside the Visitor’s Browser.

Benefits of adding Browser Caching?

• Speed up your website loading time and enhance the visitor experience.
• Saves lots of bandwidth which will result in a decrease in cost
• Decrease the number of the HTTP request

There are two Methods for Fixing Leverage Browser Caching In WordPress (Only valid for Apache server)

1. With Plugin
2. Without Plugin

Both the methods yield the same output. Let’s see how

First Method: With Plugins – Best Leverage Browser Caching Plugins are as follows

• WP Rocket – WP Rocket is a popular plugin that has provided excellent leverage to the browser cache in a few simple steps.

Steps required

Click on WP Rocket Settings >> Click on Basic >> Check all the options under Mobile cache, user cache , SSL cache and emoji cache >> Click on save changes

• W3 Total Cache – It is one of the popular plugins and has a user-friendly interface.

Steps required

• Go to Options >> Click on General Option>> Click on Enable >> Click on Save Settings & Purge Caches
• Scroll Down >> Enable Page Cache >> Scroll & Enable Minification for HTML, JS & CSS >> Click on Save Settings & Purge Caches

• WP Super Cache – WP Super Cache boosts website performance and load speed by giving an excelled user experience.

Steps required

Click on WP Rocket Settings >> Click on Caching On >> Click on Update

• Leverage Browser Caching In WordPress Plugin – You can download this plugin and activate it and you are ready to rock. This is going to add codes to your .htacess file

Second Method: Without Plugin

You need to paste the following code inside Your .htacess file

#start Leverage Browser Caching Gomahamaya 
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/gif "access 1 year"
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType image/x-icon "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType text/javascript "access 1 month"
ExpiresByType text/html "access 1 month"
ExpiresByType application/javascript "access 1 month"
ExpiresByType application/x-javascript "access 1 month"
ExpiresByType application/xhtml-xml "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresDefault "access 1 month"
</IfModule>
#End Leverage Browser Caching Gomahamaya 

Note – You can’t add caching to 3rd party content that means the content which you are not hosting in your server. In that case, You need to neglect such content, For example, Ying images, Facebook and google analytics, etc etc

Leverage Browser Cache On Nginx

For enabling Leverage browser caching on the Nginx server you need to edit the website configuration file in Nginx.

Steps for Adding Browser caching on Nginx.

You need to open a configuration file for Your particular domain For that You need to pass the First command

Next step is to add caching codes to Your server

The next step is to save and exit. And restart the server For that you need to pass the below command

Leverage Browser Caching Google Analytics In WordPress Warning

So many people want 100/100 of Google page speed score and Google Matrix. For them, the Google analytics code may be a hurdle. You can neglect it if you want. But for those who want to fix this issue need to host Google Analytics code locally, for that, we are going to use one plugin which is the Complete Analytics Optimization Suite (CAOS)

Steps for fixing google analytics leverage browser caching warning

• Download the Plugin Complete Analytics Optimization Suite (CAOS). Install this plugin and activate it
• After that, on the setting page of the plugin, you need to update it with the Google Analytics tracking id

• Then click on save and clear cache from your caching plugin.

Leverage browser caching for the following cacheable resources: said by GTmetrix and google page speed. But to be frank, you can’t cache the below-mentioned content because you are not hosting it inside your own server

• https://apis.google.com/js/platform.js (30 minutes)  – Hosted by Google
• https://apis.google.com/js/rpc:shindig_random.js?onload=init (30 minutes) – Hosted by Google
• https://i.ytimg.com/vi/M9Okoi0ELAw/hqdefault.jpg (2 hours) – Hosted by Youtube
• https://i.ytimg.com/vi/jMB57m3N2mQ/hqdefault.jpg (2 hours)
• https://i.ytimg.com/vi/nLH0Vjs1zvI/hqdefault.jpg (2 hours)
• https://www.google-analytics.com/analytics.js (2 hours) – Hosted by Google analytics
• https://www.google.com/recaptcha/api.js (5 minutes)  – Hosted by Google Recaptcha
• http://maps.googleapis.com/maps/api/js (30 minutes) – Hosted by Google Maps

Now Bingo no more issues related to Leverage Browser Caching In WordPress. Your website speed will be like a rocket.