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:
- 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 the 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 every time it loads. This will increase the page load 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 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:
- Without plugin by modifying .htaccess file
- Using W3 Total Cache plugin
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 ##
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 application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 1 month"
## CACHE CONTROL ##
Header set Cache-Control "max-age=2592000, public"
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.
- 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.
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:
- 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 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.