Hello, I'm Mike and today I'm going to show you how to fix the leverage browser caching warning in WordPress. Google Page Speed Insights is one of the several useful tools for measuring website performance. However, some of its suggestions like the leverage browser caching warning, maybe confusing to inexperienced site owners. When you break it down, caching isn't all that tough to understand. With a few tweaks, you can implement this development best practice on your site to cut downloading times and improve your Page Speed score.
But before we get too far, I want to let you know that there'll be links to more resources in the video's description below and remember subscribing and ring that bell to get notifications for future helpful content.
So let's jump in. The leverage browser caching warning is one of many diagnostics Google PageSpeed use to return as a suggestion for improving your score like the following one. In version five of Google PageSpeed Insights, this message was replaced with the serve static assets with an efficient cache policy warning. Despite the change in language and appearance, the solution to these warnings is the same.
Google suggests using browser caching to reduce page loading times and improve performance. In a nutshell, caching is when users browsers save static copies of your site's pages. Then on subsequent visits, this content can be reloaded faster because the browser doesn't have to contact your site server in order to access the requested resources. However, every cache resource needs a specified expiration period. This tells browsers when content on your site has become outdated, so it can replace its cache copy with an updated version.
If you're seeing the leverage browser caching warning in your performance test results, it likely means one of two things. One, the Cache-Control or Expires headers are missing from your site server or that of a third party.
Two, the necessary headers are present, but the expiration period is very short and therefore doesn't have much impact on performance. The solutions to this warning involve fixing one or both of these issues. Here are three solutions you can try.
One, add Cache-Control and Expires headers. There are two headers related to browser caching, Cache-Control and Expires. At least one must be present to enable browser caching for your site. As this is how browsers determine how long they should retain resources before refreshing them. A simple way to determine if this is what's causing the leverage browser caching warning, is to look at the details given for each resource.
In Google PageSpeed Insights version five, you'll see none listed under cache TTL instead. As a handy reference, previous versions of Google PageSpeed insights showed an exploration not specified message when the headers were missing. While the Cache-Control header turns on client side caching and sets the max age of a resource, the Expires header is used to specify a point in time when the resource is no longer valid. You don't necessarily need to add both, as this can be redundant.
Cache-Control is newer and is usually recommended method.
However, some web performance tools such as GTmetrix still check for Expires headers. If you're hosting at Kinsta, you don't have to worry about setting these headers. All of our Nginx servers already include them. In the event that you're using a different hosting provider, be sure to backup your site before following these next steps. As editing.
htaccess files could break your site if you're not careful. To add Cache-Control headers in Nginx, you can add the following to your service configuration file. This tells your server that the specified file types are not going to change for at least 30 days. It will keep the relevant file safe for that period of time before refreshing them. If you have an Apache server instead, you can add the following code to your .
htaccess file. And remember, these lines of code will be available in the resource section for you to copy and paste into your site.
The snippet should be added before hashtag begin WordPress, or after hashtag and WordPress. In this case, the cache is set to expire after 84,600 seconds. You can add Expires headers in Nginx by adding the following to your server block.
In this example, you can see how to specify different expiration times based on file types. You can add Expires headers in Apache by adding the following to your .htaccess file. You can then check your headers by running your site through Google PageSpeed Insights again, and see if the warning persists. Number two, leverage browser caching for Google analytics.
Ironically enough, Google analytics is sometimes the 'cause of leverage browser caching warning, and an imperfect PageSpeed score. This is because it has a low cache expiration time of just two hours. This used to be the old warning. In PageSpeed Insights version five, this issue no longer results in a warning, but Google analytics might still be listed as an unoptimized resource. You won't be able to change this with Cache-Control or Expires headers because this resource isn't on your server.
However, there's a way to leverage browser caching for Google analytics by hosting the script locally. Please be aware though, that this method is not supported by Google.
If you want to resolve this problem, there's a free plugin called Complete Analytics Optimization Suite developed by Dan Vandenberg that you can use. You can download CAOS from the WordPress plugin directory or by searching for it under plugins, and then clicking add new in your WordPress dashboard. Some additional benefits by hosting your analytics script locally include that it reduces your external HTTP request to Google from two to one, and it enables you to gain full control over the caching of the file.
This means that you can use the cache headers as we showed you earlier. To get started, install the plugin and then enter your Google analytics tracking ID. The plugin adds the necessary tracking code for Google analytics to your WordPress website, downloads and saves the analytics.js file to your server, and keeps it updated using a scheduled script in WP-Cron.
We recommend also setting it to load in the footer.
Keep in mind that CAOS won't work with other Google analytics WordPress plugins. Alternatively, you can use the WordPress caching plugin, WP Rocket to achieve the same goal. This plugins Google tracking add-on, enables you to host your analytics script locally with the click of a button. Simply toggle the status on under WP Rocket, and then click Add-ons. WP Rocket and it's add-on are compatible with other Google analytics plugins.
Number three, minimize your use of third-party scripts.
Sometimes the Google analytics script can cause problems for your Google PageSpeed Insight score, because it's hosted on Google server. Thus you are in control of the cache. The same is true for other third-party scripts. If you're managing a business through your WordPress website, most likely you have additional third-party scripts running to track conversions, AB tests, and more.
This might include scripts such as Facebook conversion pixels, Crazy Egg, Hotjar and others. Unfortunately, unless you can find a way to host these scripts locally, there's nothing much you can do to gain control of them. One option for Facebook pixel users, is to use yet another WP Rocket add-on. Ideally, you'll want to minimize your use of third-party scripts if you want to improve your Google PageSpeed score. So it may be worth conducting an audit of your site and removing any scripts that are necessary for running it.
While not a definitive measure of your site's performance, Google's PageSpeed Insights is still a decent indicator of how it's running.
Improving your score by resolving warning shown under the surf static assets with an efficient cache policy, can help make your website faster and more usable for visitors. If you're seeing this warning in Google Page Speed insights, you can resolve it by, Adding Cash-Control or Expires headers. Leveraging browser caching for Google analytics or minimizing your use of third-party scripts. Have any other tips about fixing the leverage browser caching error, let us know in the comments section below.
Kinast WordPress hosting can speed up your website by up to 200%, and you'll get 24-7 support from our expert WordPress engineers. Let us show you the Kinsta difference, try a free demo of our my Kinsta dashboard at demo.kinsa.com. Thank you for watching, and don't forget to subscribe for more tutorials, explainers and helpful content like this.
(A) Member Accelerator Primary
No comments:
Post a Comment