How to Fix the Leverage Browser Caching Warning in WordPress

Google PageSpeed Insights is a useful tool for measuring website speed. In this case, there are a lot of suggestions provided; however, some of the site owners find “Leverage Browser Caching” confusing. 

This shouldn't be an issue if you try to break down the steps into pieces. Thus caching would be much easier. This will also improve the site's loading times and enhance PageSpeed score.

Ways To Fix the Leverage Browser Caching Warning

Add Cache-Control and Expires Headers

There are two browser-caching headers as Cache-Control and Expires. At least one must be present to allow browser caching for your web, as this is how browsers decide how long they will maintain resources before they are refreshed.

To determine whether it's causing the Leverage Browser Caching warning, look at the details given for each resource. While previous versions of Google PageSpeed Insights showed an “expiration not specified” message when the headers were missing. InGoogle PageSpeed Insights Version 5, you’ll see “None” listed under Cache TTL instead.

While the Cache-Control header turns on client-side caching and sets the maximum resource age, the Expires header is used to define a point in time when the resource is no longer available.

Note: You don't need to add both because that may be redundant. Cache-Control is newer and is usually the preferred form. Nonetheless, some site efficiency tools, such as GTmetrix, also search the Expires headers.

Be sure to back up your site before following the steps, as editing.htaccess may break your site if you are not careful.

Add Cache-Control Headers in Nginx

You can add the following to your server’s configuration file:

<code>

This tells your server to keep the important files stored and will not be changed for at least 30 days before refreshing.

Add Cache-Control Headers in Apache

You can add the following code to your .htaccess file:

<code>

This snippet should be inserted before “#BEGIN WordPress” or “#END WordPress.” The cache will expire after 84,600 seconds.

Add Expires Headers in Nginx

With the following code, you can see how to specify different expiration times based on file types:

<code>

Add Expires Headers in Apache

Add the following to your .htaccess file:

<code>

You can then recheck your headers by running your site through Google PageSpeed Insights and see if the warning remains.

Leverage Browser Caching for Google Analytics

In fact, Google Analytics is sometimes the cause of a warning for Leverage Browser Caching and a bad score for PageSpeed. It has a short caching expiry time of just two hours.

The old version was used to determine the issue and a warning. However, PageSpeed Insights Version 5 no longer results in a warning, instead listed as an unoptimized source.

By these circumstances, you can resolve this with leverage browser caching for Google Analytics by hosting the script locally.

Leverage Browser Caching for Google Analytics with Complete Analytics Optimization Suite

A free plugin called Complete Analytics Optimization Suite (CAOS) was developed by Daan van den Bergh that you can use to resolve the issue.

You can download CAOS from the WordPress Plugin Directory or search for it under Plugins > Add New in your WordPress dashboard. Some additional benefits to hosting your analytics script locally are:

  • It reduces your external HTTP requests to Google from two to one.
  • It enables you to gain full control over the caching of the file.

Install the plugin and enter your Google Analytics Tracking ID to get going. The plugin adds the relevant tracking code for Google Analytics to your WordPress site, installs, and saves the analytics.js file to your server. Keep it updated using a scheduled script in wp_cron(). It is highly recommended to set it to load in the footer.

Note: CAOS won’t work with other Google Analytics WordPress plugins.

Leverage Browser Caching for Google Analytics With WP-Rocket

Similarly, you may use the WP-Rocket WordPress caching plugin to accomplish the same objective.

This Google Tracking Add-on feature helps you host your analytics script locally by clicking a button. Simply customize the status under WP-Rocket > Add-ons.

Minimize Your Use of Third-Party Scripts

Third-party Scripts can cause problems for your Google PageSpeed Insights score and would not be able to control the cache.

If you manage the business through a WordPress website, you most likely have additional third-party scripts running to track conversions, A/B tests, and more. This might include scripts such as Facebook conversion pixels, Crazy Egg, Hotjar, and others. Apparently, unless you can find a way to host these scripts locally, you wouldn't be able to control them.

One alternative for Facebook Pixel users is to use another WP-Rocket add-on. Preferably, limit the use of third-party scripts if you want to boost your Google PageSpeed score. Moreover, it's worth undertaking an audit of your site and removing any hands that are not required to run.

What Is the Leverage Browser Caching Warning?

The Leverage Browser Caching Warning is one of several Google PageSpeed ‘diagnostics' used to get back as a recommendation to boost your score. 

Google recommends using browser caching to reduce page load times and boost performance. Simply put, caching is when users' browsers save static copies of the pages on your site. Then, on subsequent visits, this content can be re-loaded faster because the browser does not need to contact your site's server to access the requested resources.

However, if your cached resource is about to reach its expiration period, it automatically gives a warning so it can be replaced with the updated version immediately.

  • The headers of Cache-Control or Expires are missing from the server of your site or from a third party.
  • The requisite headers are available, but the expiry period is very short and therefore has little effect on results.

Conclusion

Thus, the solution to this warning is to fix one or both of the problems. As the solution to fix the leverage browser cache has been detailed, now it becomes a cakewalk for you.