How to Fix Leverage Browser Caching Issue in WordPress?

Google PageSpeed Insights tool is one of the ways to measure the speed of your WordPress site. Generally Google’s speed  score is different than other popular speed measuring tools like Pingdom or Gtmetrix. But it is recommended to keep track of Google’s score as it may directly impact the ranking on the search results.

When checking your site on Google PageSpeed, you will see some frequent problems like optimize images, leverage browser caching, enable compression, etc. In our previous articles we have explained how to fix enable compression and optimize images issues. In this article we will discuss how to fix leverage browser caching issue in WordPress.

What is Leverage Browser Caching?

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 than the first time. Here is what will happen on the browser:

If you don’t set the expiry time for images and other static files then Google PageSpeed Insights tool will show this as a high priority issue under “Should Fix” or “Possible Optimizations” category.

You can see the information in the brackets next to image URLs as “expiration not specified”.

How to Fix Leverage Browser Caching Issue in WordPress?

There are two easy ways to fix leverage browser caching issue:

1. Without Plugin

Login to your FTP client and open .htaccess file located on the root directory of your site. Refer our article to learn more on how to edit .htaccess file in WordPress. 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 more if required for your site.

2. Using W3 Total Cache

Fortunately WordPress has plugins to fix every issues. In order to fix leverage browsing caching issue for your WordPress site, we recommend to use W3TC plugin. W3TC is the popular caching plugin available on WordPress plugins repository for free with many additional options.

Install the plugin and activate it. 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.

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

W3T Totoal Cache plugin essentially adds the directives in .htaccess file as explained in the first method. Open your .htaccess file and you will see the long set of directives are added by W3TC plugin. All browser caching related directives are shown in-between the section “# BEGIN W3TC Browser Cache” to “# END W3TC Browser Cache”.

Check Back in Google PageSpeed Insights

Once you have manually added the code in .htaccess file or activated browser caching of all types of objects in W3TC, first purge all your caching. Then go back to Google PageSpeed Insights tool and check the page. Most probably the issue should have been resolved or moved to the lower priority under “Consider Fixing” as shown below. The new PageSpeed tool will still show the issues under “Possible Optimizations” section with the improved overall score.

In our example case, the issue still exists due to 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 resource which can’t be cached on the browser. Below are some of the popular external resources which may cause leverage browser caching issue:

If site speed is 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 page speed score.