{"id":3916226,"date":"2021-11-29T13:55:57","date_gmt":"2021-11-29T12:55:57","guid":{"rendered":"https:\/\/wp-rocket.me\/?post_type=core_web_vitals_hub&p=3916226"},"modified":"2023-04-12T16:00:55","modified_gmt":"2023-04-12T14:00:55","slug":"serve-static-assets-with-an-efficient-cache-policy","status":"publish","type":"core_web_vitals_hub","link":"https:\/\/wp-rocket.me\/google-core-web-vitals-wordpress\/serve-static-assets-with-an-efficient-cache-policy\/","title":{"rendered":"How to Serve Assets With an Efficient Cache Policy on WordPress"},"content":{"rendered":"

Do you want to know how to easily fix the leverage browser caching warning in your WordPress site? You are at the right place. Google PageSpeed Insights<\/a> is a useful tool for measuring website performance, but it’s possible to be intimidated by some of its suggestions. The “Leverage browser caching” recommendation has recently been changed to \u201cServe static assets with an efficient cache policy\u201d.<\/p>

\"How<\/figure>

How to fix this warning for your WordPress site? <\/p>

In this article, we will share several optimization techniques you can follow, and we\u2019ll also explain what \u201cLeverage Browser Caching\u201d is. Finally, a performance test will also be conducted before<\/em> and after<\/em> using WP Rocket to see how easy it is to improve your Google PageSpeed score and address the browser caching issue.<\/p>

What Browser Caching is and How it Works<\/h2>

Browser Caching Explained in Plain English <\/h3>

Implementing browser caching will help to reduce the server load by reducing the number of requests per page.  <\/strong>Caching allows recent web pages to be stored temporarily in the web browser of your visitors. <\/p>

\"Browser
Browser caching explained – Source: WP Rocket
<\/figcaption><\/figure>

Speeding up your web page loading can be accomplished with browser caching, which stores the frequently accessed resources on local memory for faster access. All the requests are running locally rather than being sent over a network connection. As a result, your HTML pages and images are rendered faster, reducing bandwidth usage and server load. <\/p>

To activate caching in the browser, we will be looking at both \u201cExpires\u201d and \u201cCache-Control<\/a>\u201d headers:<\/p>

\u201cExpires\u201d header: <\/strong>a basic way to enable caching on the browser and specify a time duration after which the resource will be deleted.

\u201cCache-Control\u201d header: <\/strong>it\u2019s <\/strong>more detailed and gives fine-grained options to control the caching behavior of the browser. <\/td><\/tr><\/tbody><\/table><\/figure>

How to Check if Browser Caching is Enabled on Your Site<\/h3>

To check if browser caching is enabled on your WordPress site, go to Google PageSpeed Insights and run the audit with the URL of your site. If you see the \u201cServe static assets with an efficient cache policy\u201d warning, then that means you are not using a cache.<\/p>

\"Checking
Checking browser caching – Source: PSI
<\/figcaption><\/figure>


<\/p>

Similarly, you can use GTmetrix<\/a> to check if the browser caching is activated: <\/p>

\"Checking<\/figure>


Finally, you can also use the \u201cNetwork\u201d tab in Chrome\u2019s developer tools. Simply select the page that you want to analyze and check the \u201cHeaders\u201d tab:  <\/p>

\"\u201cCache-Control\u201d
\u201cCache-Control\u201d Header on Chrome
<\/figcaption><\/figure>

What Does Serve Assets With an Efficient Cache Policy Mean on PageSpeed Insights?<\/h2>

\u201cLeverage Browser Caching\u201d was a recommendation in version 4 of the PageSpeed Insights API, which was shut down in May 2019. Since Version 5, real-world data from the Chrome User Experience Report and lab data are coming from Lighthouse, which replaced the diagnostic with the \u201cServe assets with an efficient cache policy\u201d warning. <\/p>

\u201cLeverage Browser Caching\u201d (2019) \u2192 \u201cServe assets with an efficient cache policy\u201d (2021)<\/td><\/tr><\/tbody><\/table><\/figure>
\"Lighthouse
Lighthouse issue – Source: new PSI diagnostics section 
<\/figcaption><\/figure>

Why Do You See the \u201cServe Static Assets With An Efficient Cache Policy\u201d Issue? <\/h3>

Leverage browser caching means that you should specify how long web browsers should keep your files stored locally – on the visitor\u2019s browser. There are two headers involved in browser caching, namely \u201cCache-Control<\/a>\u201d and \u201cExpires\u201d. If you see the Lighthouse’s issue, that means that both headers are missing or that their expiration period is too short. <\/p>

Lighthouse flags all static resources that aren’t cached according to the following criteria:

– The resource is a font, image, media file, script, or stylesheet

– The resource has a 200, 203, or 206 HTTP status code<\/a>

– The resource doesn’t have an explicit no-cache policy<\/td><\/tr><\/tbody><\/table><\/figure>

There are three main reasons why Lighthouse flags your WordPress site with that issue, namely:
<\/p>

1. Leverage Browser Caching for Google Analytics and Tag Manager<\/h4>

Google Analytics is the most popular tool when it comes to statistics of your WordPress site. However, the code in the \u201canalytics.js\u201d file goes back and forth to Google\u2019s server, so the browser treats it every time as a new external resource. Google has set a 2 hours cache policy that is too short for Lighthouse, which triggers the warning.<\/p>

2. Leverage Browser Caching for Other Third-Party and External Scripts <\/h4>

Sometimes, you may use plugins that require adding some additional scripts from another server, such as a YouTube video or your Instagram feed. Some plugin authors have set up a cache policy on their scripts.<\/p>

3. Nginx Servers Where The Expiry Headers Are Not Properly Set <\/h4>

Nginx is the king of the servers to deliver content quickly. The thing is, Nginx does not use a .htaccess file, so you need to add the configuration for both headers in the main server block if you want Nginx to read them. If you don\u2019t do that, Nginx (and Lighthouse) will not detect the expiry data properly. <\/p>

To leverage browser caching on WordPress also means an improvement in the loading speed of your website because the files don\u2019t need to be \u201cre-downloaded\u201d. To make things easier, we have put together a list of techniques you can use to fix leverage browser caching warnings (with and without a WordPress plugin).<\/p>

<\/div>\n\t