2 February 2023
How to Easily Fix Leverage Browser Caching in WordPress
Do you want to learn how to fix leverage browser caching in WordPress?
Page speed is an essential part of the user experience. The time it takes for the requested page to load in your user’s browser has a significant impact on whether they stay on your site or not.
Further, page load time depends on many factors — browser caching is one of them. In this tutorial, we’ll discuss how to fix leverage browser caching in WordPress. It is also one of the performance optimization tips recommended by many page speed analytics tools.
First, we’ll explore what browser caching is, and then we’ll look at different methods to fix leverage browser caching in WordPress — with and without the use of a plugin.
What Is Leverage Browser Caching Warning?
The leverage browser caching is one of many diagnostics returned by Google PageSpeed Insights as a suggestion for boosting your score, such as the following:
Google recommends using browser caching to improve page loading speeds and performance. Simply said, caching is when users’ browsers save static copies of your site pages. Then, on future visits, this content may be reloaded faster because the browser does not need to access your site’s server to obtain the necessary resources.
However, every cached resource must have an expiration date. This warns browsers when content on your site has become old, allowing them to replace their cached copy with an updated one.
If you get the leverage browser caching warning in your performance test results, it most certainly means one of two things:
- The Cache-Control or Expires headers are missing from your site or a third-party server.
- The required headers are present, but the expiry time is very short. Thus it has no impact on performance.
The solutions to this warning include fixing one or both of these issues.
Fix Leverage Browser Caching in WordPress (2 Methods)
There are two methods that you can use to fix the leverage browser caching in WordPress, depending on what’s causing it. Let’s start with using WordPress plugins.
Method 1: Fix Leverage Browser Caching in WordPress Using Plugin
If you’re using a WordPress caching plugin, it may already offer browser caching.
Let’s now look at how to fix leverage browser caching with a few common caching plugins.
WP Rocket
WP Rocket is the most effective WordPress caching plugin available. Even if you don’t know complex caching and speed terms, it can still help you optimize your website for performance.
All of the recommended caching settings will speed up your WordPress website right out of the box.
To fix the leverage browser caching with WP Rocket, all you need to do is install and activate the plugin. For more in detail, see our guide on how to install a plugin in WordPress.
That’s it.
WP Rocket will automatically activate browser caching and change your .htaccess file with the appropriate rules.
To learn more, check out our complete WP Rocket review.
LiteSpeed Cache
LiteSpeed Cache is another caching plugin allowing you to fix leverage browser caching by enabling the feature. Once activating the plugin, go to the LiteSpeed Cache » Cache from your WordPress dashboard. Then, navigate to the Browser tab and enable the Browser Cache option.
Plus, you can also set the expiry time. However, remember that this option will apply to all cached files on your website.
WP Fastest Cache
If you’re searching for a free caching plugin with a lot of functionality, WP Fastest Cache can be a good fit. It supports browser caching, GZIP compression, and minification for free.
Upon activation, go to the Settings tab and check the checkbox for Browser Caching.
W3 Total Cache
W3 Total Cache is another best caching plugin for WordPress. It allows you to customize a good range of caching options.
Once activated, go to Performance » General Settings, then scroll down to Browser Cache and check the box next to enable if it’s unchecked.
Next, go to Performance » Browser Cache. Under General, check the first five boxes. These enable the headers (HTTP instructions sent from your server to browsers) that enable browser caching.
Lastly, you’ll need to set the expiry times for your specific file types. The expiration header tells browsers how long to store a copy of your site’s files.
You can set separate expiration headers for CSS and JavaScript files, HTML and XML files, and media files.
Leverage Browser Caching
It’s not a cache plugin; instead, it’s a browser cache plugin. You can download it from the WordPress.org plugin directory.
Why should you use this plugin instead? If you don’t want to install a full caching plugin, the Leverage Browser Caching plugin focuses on just one specific activity. This may work if all you need is a solution to the leverage browser caching error.
It’s also simple: when you activate it, it immediately starts working, and you may deactivate it to stop it.
It works by adding the browser caching code straight into your Apache server’s .htaccess file.
Method 2: Fix Leverage Browser Caching in WordPress Without Using Plugin
If you don’t want to install a plugin, you can leverage browser caching by changing your web server settings. If you do this, your web server will instruct the visitor’s browser to save specific resources in the browser cache. The browser will save these files locally for a certain time and use them on subsequent page visits.
Configuring your web server to tell your visitors’ browsers to start caching differs from server to server. In this tutorial, we’ll look at how to enable browser caching in the two most common web servers, Apache and Nginx.
Note: Before you customize your WordPress code, we recommend that you backup your WordPress site. Check out some best WordPress backup plugins.
Fix Leverage Browser Caching in Apache
To resolve the leverage browser caching with an Apache server, you will need to add code to your .htaccess file.
To edit this file, you must first login to your WordPress hosting account using an FTP client or your host’s file manager tool.
After connecting, you should be able to see your .htaccess file in the root folder of your website.
Then, to enable browser caching, add cache-control and expire headers.
The cache-control header instructs the web browser on how caching should be performed.
The expires header allows caching and instructs the web browser how long certain files should be stored before being deleted.
To add expires headers, add the following code 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 3 days"
</IfModule>
## EXPIRES HEADER CACHING ## This code set different cache expiration dates depending on the type of file.
Then, to enable cache-control, add the following code: <filesMatch ".(ico|pdf|flv|jpg|jpeg|png|gif|svg|js|css|swf)$">;
Header set Cache-Control "max-age=96000, public"
</filesMatch> This code specifies when the cache will expire. The cache in the above example will expire after 90,000 seconds.
Save the .htaccess file and restart Apache for the changes to take effect.
Fix Leverage Browser Caching in Nginx
If you host your WordPress blog on an Nginx web server, you may fix the browser caching error by editing the server configuration file.
Your host decides how you edit and access this file, so contact them if you need help.
Then, to add expire headers, add the following code:
This code will set the expiration times for the various file types. location ~* \.(jpg|jpeg|gif|png|svg)$ {
expires 365d;
}
location ~* \.(pdf|css|html|js|swf)$ {
expires 3d;
} Then, to add cache-control headers, add the following code: location ~* \.(js|css|png|jpg|jpeg|gif|svg|ico)$ {
expires 14d;
add_header Cache-Control "public, no-transform";
} This code specifies when the cache will expire. It informs your server that the file types listed above will not change for 14 days.
WordPress Leverage Browser Caching for Google Analytics
If you use a WordPress Google Analytics plugin, you may still get a leverage browser caching issue, even if everything is configured correctly.
It’s because Google Analytics set the default expiry time to two hours to ensure you get updates as soon as possible.
You can optimize your site’s usage of Google Analytics with a free plugin called Complete Analytics Optimization Suite (CAOS). The CAOS plugin automatically hosts Google Analytics locally and fully resolves any leverage browser caching errors you’re seeing.
If you’re a beginner, then check out our comprehensive guide on how to add Google Analytics to a WordPress site.
Conclusion
You’ve learned how to boost site speed by using leverage browser caching. There are two methods for doing this: adding code into the .htaccess file and installing a caching plugin. Once activated, you will see how it increases your page speed.
We hope this tutorial helped you learn how to fix leverage browser caching in WordPress.
To learn more about WordPress speed and performance, check out these helpful resources:
Lastly, follow us on Twitter for regular updates on new articles.
