How to easily fix leverage browser caching warning in WordPress

August 18. 2021

You may come across different online tools for measuring website performance. Each of them is analyzing how fast the specific parts of your website are working. And among the numerous common warnings, there is often the “Leverage Browser Caching” error. This concerns caching, as a feature that allows you to temporarily make use of space on clients’ devices. Which results in faster overall loading of your website and its pages. In other words, you can easily the Fix Leverage Browser Caching Warning in WordPress to ensure a better user experience for your visitors.

Sure ways to fix leverage browser caching warning in WordPress

There are two cases when you will receive this warning. First, your browser caching is not enabled. Second, browser caching is not configured properly. However, in numerous online performance tools, this error nowadays reports as “Serve static assets with an efficient cache policy”. But, whatever warning you are receiving, means that your browser caching rules are not in place. If you are not confident in fixing the problems yourself, seasoned WP experts can always help you solve these matters. Or, if you are, then lets’ take a look at the way you can fix the “Leverage browser caching” warning in WordPress.

Table of content:

• What is Browser Caching?
  • W3 Total Cache plugin
  • CAOS plugin
  • WP Rocket plugin
• Fix Leverage Browser Caching warning with plugins
• Fix it manually with code

What is Browser Caching?

Before we proceed with the solution, it’s useful to understand what this type of browser caching means. It’s a method by which websites are storing a copy of their pages locally. It allows them to improve loading speed by reducing the number of requests between a browser and server. Therefore upon revisiting, the browser will load a website faster without the need to connect again to the server and ask for additional resources.

The most common type of files that are cached are:

• stylesheets
• images
• logos
• and other static elements

Since they are probably not changing since the last visit, your website will load faster in visitors’ browsers. The problem is – everything that is cached needs to have a set expiration period. Just in case something has been changed meanwhile, so visitors can load an updated version of a website.

Fix leverage browser caching warning with plugins

W3 Total Cache

W3 Total Cache is among the most popular caching plugins. It comes with all the features you could expect from such a plugin. Overall, this plugin directly improves SEO and the entire user experience by improving your website performance. When properly configured, it can give you about a 10 times boost in general performance. With more than a decade in existence, many web developers, web hosts, and publishers are placing their trust in this plugin.

CAOS plugin

Complete Analytics Optimization Suite can easily be found in the WordPress plugin repository. While it’s not famous as a general caching solution, this plugin solves the problem with Google Analytics. Sometimes, if you are using Google Analytics, it will skew the results from PageSpeed Insights and similar tools. Mostly because Google has set a too short cache expiry time. With the CAOS plugin, you can host your host analytics.js/gtag.js locally and keep it up-to-date automatically.

WP Rocket plugin

One of the best cache plugins for WordPress on this list is definitely WP Rocket. While other plugins might be hard to configure, WP Rocket is pretty much straightforward. It’s quite beginner-friendly and allows you to optimize everything without any prior knowledge. Basically, you just have to install, activate it, and it will use recommended .htaccess configuration right away. This is, by far, the easiest and fastest way to fix leverage browser caching warnings in WordPress and make your website user-friendly as much as possible.

Fix it manually with code

This method requires a certain experience, so it’s not a recommendation for beginners. In most cases, plugins will do the job. But, if, for any reason, you don’t want to use plugins, you fix the caching issue by manually adding code.

The first step, before making any changes, is to back up your website.

The next steps can be a bit different, depending on the server you are using.

If you are using the Apache server

Basically, everything starts with editing your .htaccess file. Once inside, you will have to add code for cache-control and expire headers. Cache-control is a set of instructions about how caching should be handled. While expire headers decide about the period of resource conservation in the browser.

• First, add the following code for the cache-control:

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

Basically, this enables caching of different types of files. And, set them to generally expire after the “max-age” in seconds. After which, the browser will update the entire cache again.

• Next, you will add the code that will define expire headers:

<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpeg "access 2 year"
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/png "access 3 year"
ExpiresByType image/svg "access 1 year"
ExpiresByType image/gif "access 2 year"
ExpiresByType text/css "access 1 month"
ExpiresByType application/javascript "access 1 month"
ExpiresByType application/x-javascript "access 1 month"
ExpiresByType application/pdf "access 3 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 5 days"
</IfModule>

These lines, in essence, set different expiration dates for different file types, depending on what you need.

If you are using the Nginx server

For Nginx, you will have to make changes to the server configuration file to fix the browser caching issues. The only caveat is that you might not have the access to your server config file. For this, you will have to get in touch with your hosting provider.

• But, once you have secured access, you are free to add cache-control headers:

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

Just like in Apache, this will set the expiration time of the entire cache.

• And the next lines will set expiration headers:

location ~* \.(jpg|jpeg|gif|png|svg)$ { expires 365d; }
location ~* \.(pdf|css|html|js|swf)$ { expires 4d; }

You can see that here, images have a longer expiration period because they usually don’t change as often as other files.

While they may not give you the right picture of how your website performs, online performance tools can point you in the right direction. And one of the easiest methods to start making changes is to fix the “Leverage Browser Caching” warning in WordPress. Or, as today it’s often regarded as “Serve static assets with an efficient cache policy”. This will make your website load faster and provide a better user experience to new and returning visitors. Whether you choose plugins or want to manually add the code, it doesn’t matter much. In general, it’s important that your website performs better.