How to Fix Leverage Browser Caching Issue in WordPress?

Google PageSpeed Insights is one of the tools to measure page loading speed of your WordPress site. When checking your site on PageSpeed, you will notice some frequent problems like optimize images, leverage browser caching, enable compression, etc. You can check our articles on how to enable GZIP compression and optimizing your images to fix those issue. In this article, let us explore what is browser caching and how to fix leverage browser caching issue in WordPress.

Leverage Browser Caching Issue

Let us explain with an example. Open a web browser like Google Chrome and clear the browsing history. Now open any website and you will see the page is loading slowly. When you navigate through different pages on the same site, you will notice the pages are loading faster compared the first time. Here is what will happen on the browser:

• The browser will fetch all static resources like images, styles, scripts, etc. from the web server during first time loading of the site.
• When browser caching is enabled on the site for static resources, then browser will follow the instruction from the server received through HTTP headers.
• Browser will store all static resources on local storage with the expiry date or the maximum age received from the server.
• The static resources are fetched from the browser’s local storage when the next page is loaded.
• If browser caching is not enabled on the site (expiry time is not set), then the browser will fetch the files from origin server every time it loads the page. This will increase the page loading time as well as the load on the server.
• Expiry time should be specified for each file types like png, jpg, css. js, etc.

If you don’t set the expiry time for images and other static files, then Google PageSpeed Insights tool will show this as a “Leverage browser caching” issue. You can see the information in the brackets next to image URLs as “expiration not specified”.

You can also use other speed measuring tools like Pingdom or GTmetrix to check whether the leverage browser caching issue appears on your pages.

Fix Leverage Browser Caching Issue in WordPress

Now that you might have got an idea of what is browser caching and why leverage browser caching issue appears. There are various easy ways to fix leverage browser caching issue. Follow one of the below explained methods depending on your situation.

1. Manually Adding Cache Expiry Header in Apache Servers

If your site is hosted on an Apache server, you can manually add caching rules in the server configuration file. Login to your FTP client or use File Manager from hosting account and open .htaccess file located in root directory of your site. You can check our detailed article on how to edit .htaccess file in WordPress to learn more. After opening .htaccess file, add the below directives at the end of the 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 text/html "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType text/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 1 month"
</IfModule>

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

The first block is for cache expiry and the second is for the cache control. All general file extensions are included in the directive, you can also include additional file types if required for your site.

Note: If you don’t have FTP or File Manager access, there are plugins to edit .htaccess file directly from admin panel. For example, Yoast SEO plugin offers file editor option to edit .htaccess file from admin panel.

2. Set Headers in NGINX Configuration (for NGINX Servers)

For sites hosted on an NGINX server, you will need to modify the NGINX configuration file to set caching headers.

• Access your NGINX configuration file, usually located at /etc/nginx/nginx.conf or /etc/nginx/sites-available/your-site.conf.
• Add the following code within the server block.

location ~* \.(jpg|jpeg|gif|png|css|js|ico|woff|woff2|ttf|svg)$ {
    expires 1M;
    add_header Cache-Control "public";
}

• Save the file and restart NGINX by running the following command.

sudo systemctl restart nginx

This code tells the browser to cache images, CSS, JavaScript, and other specified file types for one month.

3. Using a Caching Plugin

Fortunately, WordPress has plugins to fix every issue and almost every caching plugin has an option to configure browser caching. While some plugins automatically add entries in .htaccess file, few others allow you to configure the setup. If you do not want to break your head, simply purchase WP Rocket and activate the plugin on your site. That’s it!!! WP Rocket will automatically enable browser caching headers and fix leverage browser caching issue.

If you do not want to purchase a premium WP Rocket, then you can use the free W3 Total Cache (W3TC) plugin. W3TC is the popular caching plugin available on WordPress plugins repository for free with many additional options. However, you need to be careful as everything needs a manual setup. You can check our beginner’s guide to properly setup W3TC plugin in WordPress. Install the plugin and activate it on your site. Navigate to “Performance > Browser Cache” section and enable all browser caching related options under General, CSS & JS, HTML & XML, Media & Other Files sections.

You can leave the “Expires header lifetime” box with the default values pre-filled in seconds. If you want, modify with your own values under “CSS & JS”, “HTML & XML” and “Media & Other Files” sections.

• 31536000 for 1 month
• 604800 for 1 week
• 86400 for 1 day
• 3600 for 1 hour

As far as we have tested, 1 hour for HTML & XML and 1 month for other files work fine for Google PageSpeed Insights tool.

Note: Whether you use WP Rocket, W3 Total Cache or any other caching plugin, they essentially add the directives in .htaccess file as explained above. Open your .htaccess file and you will see the long set of directives added by the plugin. With W3TC cache, all browser caching related directives are shown in-between the comments “# BEGIN W3TC Browser Cache” and “# END W3TC Browser Cache”. Similarly, WP Rocket will show the entries under “# Expires headers (for better cache control)” section.

4. Using CDN Setup

Many content delivery networks like Cloudflare also offer optimization options including browser caching. So, if you are using Cloudflare along with a caching plugin or manually added entries in .htaccess file, make sure to set 1 year for “Browser Cache TTL” (Time to Live) in Cloudflare. You can set this under “Caching > Configuration” section.

If you have other CDN setup, check with your service provider and make sure to have the correct setting.

5. Set Cache-Control Headers Using PHP (Alternative Option)

If you can’t modify the .htaccess or NGINX files, you can set caching headers in your theme’s functions.php file. This is a less common approach but can work for some configurations.

• Go to “Appearance > Theme File Editor” and open your theme’s functions.php file.
• Add the following code and update the file.

function add_cache_control_headers() {
    if (!is_admin()) {
        header("Cache-Control: public, max-age=2592000");
    }
}
add_action('send_headers', 'add_cache_control_headers');

Note: You can also access the file using FTP by navigating to /wp-content/your-theme/ folder. Edit the file using a plain text editor, add the above code and re-upload it back.

Check Back in Google PageSpeed Insights

Once you have finished one of the above methods, first purge all your caching. Then go back to Google PageSpeed Insights tool and check the page speed score. Most probably the issue should have been resolved and fixed. In the below example case, the issue still exists due to third-party AdSense ads and font files.

What You can’t Do with Browser Caching?

Now that you know how to fix leverage browser caching issue in your WordPress site. But in most cases this is not sufficient because it will only work for the static resources loaded from your own domain. In reality, the page may have many other external resources, which can’t be cached on the browser. Below are some of the popular external resources, which may cause leverage browser caching issue:

• Google Analytics tracking code script.
• Google AdSense ad code script (as shown in the above example).
• Some fonts files.
• Gravatar images on author bio and comments.
• Images loaded with social plugins.

If site speed is the most important factor for you, then use the external resources carefully on your site. Possibly, you can deactivate all external resources except important ones like Google Analytics to improve the page speed score. Even it is possible to host Google Analytics locally using plugins like Perfmatters to further improve the browser caching.