How to Fix Leverage Browser Caching in WordPress? (4 Ways)

Are you getting the warning ‘Leverage Browser Caching’ in website speed tests?

Browser caching is a speed optimization method, and you can quickly enable it. In this article, I will tell you how to leverage browser caching in various ways.

• What is Browser Caching?
• How to Enable the Leverage Browser Caching?
• #1 Add Expires Headers
• #2 Add Cache-Control
• #3 Google Analytics Leverage Browser Caching Warning
• #4 WordPress Caching Plugins

What is Browser Caching?

To understand how browser caching works, you have to know how a page loads.

The data (information that you see on the web page) is located on the server (a storage unit). Information sharing happens with the HTTP request-response cycle.

When a person opens a URL, the browser sends the request to load the web page’s assets. The web server reads the request and finds the mentioned content. 

Then Web Server responds and sends the content (mostly in the Gzip format for the better optimization) to the browser. Browsers read the file, open it, and compile the page for the reader.

All of this happens in a matter of seconds. Speed of the page loading (or getting the content from the server) depends on the various factors, such as DNS response time, coding, server speed, etc.

One of the factors that impact the loading speed of the page is the weight of the files sent by the webserver to the browser. Heavy the files, more time it will take in transmitting.

So we aim to make the file as light as possible. That’s where the Browser Caching is introduced.

As there is lots of content on the web page that is static. Static assets are the content that does not change every time you load the page.

For example, any blog on ServerGuy will not update itself, until a content curator does it. But if I embed a tweet on the page, then that tweet will be dynamic and will change as the like/retweet on the original tweet will increase/decrease. 

In browser caching, we save a copy of the static content on the browser itself. Modern web browsers are built to do caching. They make a copy of the files, and when the next time visitors visit the page, the browser loads up the content from the local storage.

The distance gets reduced significantly, and the loading of the page improves.

Leveraging browser caching is standard practice, and if you are not doing it, you will get the warning message in many speed tests: Leverage Browser Caching. In Google Page Speed Insight tool, you will find this message:

These are two tags that should be inside the headers to enable the browser caching correctly.

Cache-Controls: More sophisticated way to establish the expiry time of cache data. After the set time, the browser will purge the local content, load the content directly from the server, and make a new copy.

ETag: It is a way for the browser to check if the local storage content is the same as the content on the server. If it is the same, the browser will load it from the cache. Read more about Etags.

How to Enable the Leverage Browser Caching?

You need to fix leverage browser caching in WordPress/site, to load up the webpage faster. With every one second delay, you are losing customer, sales, and conversion.

With Core Web Vitals and mobile-first indexing, you have to take every measure to ensure your page load fast.

Use these methods to Leverage Browser Caching:

1. Add Expires Headers
2. Add Cache-Control
3. Google Analytics Leverage Browser Caching Warning
4. Caching Plugins

#1 Add Expires Headers

Browsers use the Expire Headers to know whether to request the resources from the server or to use the cached copy of the content.

How to Add Expires Headers in Nginx

Add the code inside the server block. You can find it at /etc/Nginx/sites-enabled/default.

location ~* \.(jpg|jpeg|gif|png|svg)$ {
        expires 365d;
    }

    location ~* \.(pdf|css|html|js|swf)$ {
        expires 2d;
    }

You can clearly understand the information provided in the Expires Headers. The jpg, jpeg, and other image formats are set to expire after 365 days, while pdf, CSS, html are set to expire after 2 days.

How to Add Expires Headers in Apache

You can add Expires headers in Apache by adding the following to your .htaccess file:

## EXPIRES HEADER 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 image/svg "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType application/javascript "access 1 month"
ExpiresByType application/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 2 days"
</IfModule>
## EXPIRES HEADER CACHING ##

#2 Add Cache-Control

Cache-controls is also an HTTP header that specifies the amount of time the browser should cache a file. And when the new copy should be made.

Apache “Cache-Control” headers

You have to add the following snippet of code to the top of your .htaccess file to leverage browser caching. 

<filesMatch ".(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$">
    Header set Cache-Control "max-age=2592000, public"
</filesMatch>

Nginx “Cache-Control” headers

The code will go inside the server block, that you can usually find at /etc/Nginx/sites-enabled/default.

location ~* \.(png|jpg|jpeg|gif)$ {
    expires 365d;
    add_header Cache-Control "public, no-transform";
}

location ~* \.(js|css|pdf|html|swf)$ {
    expires 30d;
    add_header Cache-Control "public, no-transform";
}

Cache Controls vs. Expires Headers

The difference between Cache Controls and Expires Headers is that the Cache controls header is a client-side caching technique in which the maximum age of the resources is set. Any other proxy between the browser and web server can also cache a public copy of the content. 

In the Expires header, a specific amount of time is set up, and after that, the cache copy becomes invalid.

It is a subtle difference from far, but it is more intricate once you dive into it. 

You don’t have to use both of the headers. Pick anyone; however, Cache Controls is the modern and latest way to cache, so it is better.

But many web speed tests (such as GTmetrix and Pingdom) still count Expires Header while calculating the speed grades.

#3 Google Analytics Leverage Browser Caching Warning

After applying the proper caching header to the WordPress site, and the server, you will find that the tests are still telling you to Leverage Browser Caching in Google Analytics.

It is an issue of Leveraging browser caching, but a separate one than we resolved. 

Google Analytics uses its JavaScript code to interact with the site and discourage webmasters from hosting JS locally.

Cache controls and Expire Headers cannot cache third party resources. To Leverage caching for GA, you can install Host Google Analytics Locally plugin.

CAOS plugin cache the GA script, and run the cron job to keep it updated. Install the plugin, and activate it. Open it from the setting tab.

You can easily configure the plugin. You have to add the analytics code, tick the ‘allowing tracking.’

We suggest you put the code in the footer, as the page renders from top to bottom. This way, the JS will always load in the end.

#4 WordPress Caching Plugins

The easiest way to implement browser caching is to install a caching plugin and enable the function form the setting.

All the best and quality WordPress caching plugins have browser caching features.

Using WPRocket

WPRocket is a WordPress performance plugin. It is packed with multiple optimizations, including imaging, CDN, code minification, Gzip, etc. 

You can use this plugin to leverage browser caching.

There is no free version of this plugin. You have to buy the license to start using this. The plan starts from $49 a year.

Using WP Fastest Cache

WP Fastest Cache another fantastic WordPress caching plugin. It provides various speed optimization at no cost.

Install the plugins and activate it. Go to the setting.

Tick on the browser cache, and click on submit. This is the free version of the Faster cache. With the premium version, you get additional functions.

Conclusion

Speed tests like GTmetrix are not an absolute indicator of the speed of the site. However, the insights they provide help optimize the page for better performance.

I hope this post helped you in clearing any doubts regarding leveraging the browser caching. If there are still any issues, or if you have any tips to improve the article, leave it in the comments section.