When you check your web speed with tools like GTMetrix, Pingom, Google PageSpeed or Think with Google it is quite common to see a warning about Leverage Browser Caching errors, with a list of elements that cause such errors, usually scripts.
If you don’t know how to fix these errors and, consequently, speed up your website, let’s see what they are and how to fix them.
What is the Leverage Browser Caching error message?
The leverage browser caching notice refers to your browser’s cache, which is that every time you visit a website it downloads a bunch of resources, such as images, HTML, CSS and JavaScript into your browser’s local cache.
The idea is that you won’t have to download them again to display them every time you reload that page.
The Leverage Browser Caching error is telling you that your server, or another server, does not have the correct HTTP headers included, or that they are not properly configured because the caching time is too short.
Solutions to Leverage Browser Caching errors in WordPress
Depending on the results of the errors you will notice that there are several things to fix.
The most common errors are usually due to misconfigured servers, which are easy to fix, but on the other hand there are those that leave us frozen, such as errors due to Google Analytics scripts or other scripts that we believe are essential, plus some other surprises.
In any case, it is always instructive to analyze Leverage Browser Caching errors, so let’s take a look at the most common ones and their solutions.
Leverage Browser Caching on the Server
As I said, the most common errors are caused by elements hosted on your server, and usually refer to the fact that the expiration has not been defined.
You should know that when caching content there are two main methods used: Cache-Control headers and Expires headers.
Cache-Control works on the client cache and sets the maximum resource age, while Expires header is used to specify a specific point in time after which the resource will no longer be valid.
Needless to say (or not) that both headers should not be added, as it would be redundant. Cache-Control is a newer method and is usually the recommended method, although there are performance analysis tools, such as GTMetrix, that still check Expires Headers.
So it’s time to learn how to add these headers to your server. Of course, the codes we are going to see are examples, you should not copy them as they are, but decide on which file types, expiration times, etc., you should adjust to your website.
Important: Of course, before modifying the Nginx config or Apache .htaccess file, make a backup copy of it, just in case. Also, if you don’t know if your server works with Ngix or Apache check your hosting configuration or ask your provider.
Adding Cache-Control header in Nginx
Add the following, tailored to your needs, to your server’s Ngix config file:
location ~* \.(js|css|png|jpg|jpeg|gif|ico)$ { expires 2d; add_header Cache-Control "public, no-transform"; }
Code language: JavaScript (javascript)Adding Expires Headers in Nginx
To use Expires in Nginx add the following to your config:
location ~* \.(jpg|jpeg|gif|png)$ { expires 365d; } location ~* \.(pdf|css|html|js|swf)$ { expires 2d; }
Adding Cache-Control headers in Apache
In this case we add them to the .htaccess file of your server:
<filesMatch ".(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$"> Header set Cache-Control "max-age=84600, public" </filesMatch>.
Code language: HTML, XML (xml)Adding Expires Headers in Apache
Likewise, we add it to the .htaccess file:
## EXPIRES 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 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 CACHING ##Code language: PHP (php)To check the headers, and make sure that everything is OK, you can use your browser’s developer tools or inspector, or take another look at your favorite speed analysis tool.
Leveraging browser cache and Google Analytics
The other most common Leverage Browser Caching error is usually Google Analytics.
I know, it sounds almost funny that you are seeing how optimized your website is in Google PageSpeed and it is precisely THE Google tool that generates errors and optimization problems of your website.
But the question is, can it be fixed? At the end of the day you want to know, and so does Google, who visits you, what they do, how often they visit, etc.
Well, the only half solution is to host the Google Analytics script on your server, something that Google does not like, but it works.
To achieve this you can use a plugin called Complete Analytics Optimization Suite, which, among other things, allows you to host the Google Analytics analytics.js file locally, updating it using wp_cron().
The benefit of hosting your Google Analytics script locally is that you reduce the HTTP requests to Google by half, plus you have full control of the file, which means you can apply the header cache rules we’ve seen before.
The plugin works in a simple way, you install and activate it, you put in the settings your Google Analytics tracking ID and the plugin does everything else: it adds the tracking code to your WordPress, downloads the analytics.js file to your server and updates it using a script programmed in wp_cron().
Just don’t use this plugin in conjunction with other Google Analytics plugins, no matter how much you like them, or it won’t work.
Leveraging browser cache and social networks
Other elements that usually give error are those related to social networks like Facebook and Twitter, since rare is the web that does not have a widget to display the latest tweets or to give the like on your Facebook page, and of course, all these scripts to display followers and tweets in real time slow down the loading of your website while performing the checks.
The solution you may not like it but you should avoid this kind of plugins and widgets. If you want to show followers put an image and link it to your profiles, period. It is almost never worth showing tweets in real time.
Leveraging browser cache and Google Maps
Similar, but worse, is the case of Google Maps, as it requires several scripts to identify if the user viewing the map is connected to his Google account and to which one, determines its location, saved maps, and more.
These types of elements are increasingly used on corporate websites, especially on the contact page, but they don’t really add much beyond appearance.
What’s the solution? There is no direct fix possible, but what I have seen in many sites, and gets the result, is to replace the script that loads the map in real time by a screenshot of it linked to the Google Maps URL of the location.
The user will click to open the location, in your map application even if it is from a mobile, so you offer the functionality at the same time that you optimize the web.
What about the rest of the scripts?
There are a lot of other possible external scripts that you may be using. I’m talking about codes from newsletter services, ad servers and a thousand other things.
Here you will have to decide if the functionality they provide is worth compromising the performance and loading times of your website.
To summarize
As you have seen, it is possible to reduce Leverage Browser Caching errors and optimize your website as much as possible, but also remember that you should not take the recommendations and results of these speed analyzers at face value.
And, above all, you must decide in each case what you gain and what you lose, before changing the expiration times of a resource or eliminating it.
But it is good that you at least apply some of the techniques seen here, because the reality is that you will improve the performance of your website and your WordPress will go faster.
If you know any other trick to reduce Leverage Browser Caching errors, let us know in the comments.
