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 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 me 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 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 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 two easy ways to fix leverage browser caching issue:
- Without plugin by modifying .htaccess file
- Using a caching plugin
1. Manually Adding Cache Expiry Header Without Plugin
Login to your FTP client or use File Manager from hosting account and open .htaccess file located on the root directory of your site. You can check the 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. 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 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 manual setup. You can check out the beginners guide to 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 I have tested 1 hour for HTML & XML and 1 month for other files work fine for Google PageSpeed.
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 are added by the plugin. In W3TC cache, all browser caching related directives are shown in-between the section “# BEGIN W3TC Browser Cache” to “# END W3TC Browser Cache”. WP Rocket will show the entries under “# Expires headers (for better cache control)” section.
For CDN users: Many content delivery networks like Cloudflare also offers 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.
Check Back in Google PageSpeed Insights
Once you have manually added the code in .htaccess file or activated browser caching through a plugin, 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 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. Even, it is possible to host Google Analytics locally using plugins like Perfmatters.
1 Comment
Leave your reply.