Fix Serve Static Assets With An Efficient Cache Policy (5 Pro Tips)

Caching is becoming the backbone of every website. Without caching your site will struggle to load faster, however, when a tool like Google PageSpeed Insight or GTmetrix suggests a warning “Serve Static Assets With An Efficient Cache Policy” you need to fix it quickly in order to load your site even faster.

In this post, we gonna go through some of the most effective tips to resolve this issue. Make sure you follow everything mentioned in this post to get a complete info.

Let’s jump right into it!

What Exactly Serve Static Assets With An Efficient Cache Policy Means

A few years back this issue was known as the Leverage Browser Caching Warning issue, so, don’t get confused between the “Serve Static Assets With An Efficient Cache Policy” and “Leverage Browser Caching Warning” issue because they both mean the same.

This issue is one of the many issues flagged by Google’s Pagespeed insight. Google suggests the things you need to fix to get a perfect score.

If your site has a short cache expiration for images, fonts, media, scripts, and stylesheets then this issue may appear.

Google fails the report if the cache expiration is under 259200 minutes or 180 days. This means you need to modify your cache expiration for those files to 180 days or more than that.

Caching, in a nutshell, means a software or hardware component directed at saving data so that later requests for the same data can be served quicker.

The central reason why caching was born is that accessing data from persistent memories takes a significant amount of time. So, whenever data is recovered or processed, it should be saved in more active memory.

We call such a memory cache, which can be considered as a high-speed data storage layer whose main goal is to decrease the need to access slower data storage layers. To be cost-effective and productive, caches must be comparatively small, especially if compared to regular memories.

This is why they are normally performed by using fast access hardware like RAM (Random-Access Memory) plus a software component.

However, every cached resource requires a specified expiration period. This instructs browsers when content on your site has become old, so it can substitute its cached copy with an updated version.

If you’re noticing this warning in speed tools results, it possible means one of two things:

  • The Cache-Control or Expires headers are missing from your website’s server or that of a third party.
  • The required headers are present, but the expiration period is too short and therefore doesn’t have a significant impact on performance.

How To Fix Serve Static Assets With An Efficient Cache Policy

This issue can be fixed in several ways, but here I’m only gonna show the most effective ways. Also, I’ll suggest some plugins as well so that beginners can also fix it this issue effectively.




Solution 1: Adding Cache-Control And Expires Headers

According to heroku.com, There are two primary cache headers: Cache-Control and Expires, and one of them must be present to enable browser caching on your website because it helps browsers decide for how long they should retain resources before refreshing them.

To find out whether this is causing this issue or not, you need to check Google’s Pagespeed result. Once the report is presented to you, you’ll see “None” listed under Cache TTL (If none of them is working).

Cache-control means an HTTP header used to define browser caching policies in both client requests and server responses. Policies cover how a resource is cached, where it’s cached and its maximum age before terminating (i.e., time to live).

While Expire headers Expires simply introduces a date from which the cached resource should no longer be counted/valid. From this date onward the browser will demand a fresh copy of the resource.

You don’t need to add both as this could be unnecessary. cache-Control is a better choice as it is more advanced and recommended by most webmasters.

If you’re using a premium hosting service, you may not need to worry about setting these headers as most premium web host uses NGNIX server and already include them.

Also, before proceeding be sure to back up your site before following the steps below, as editing .htaccess could break your site if you’re not careful.

NGNIX (Cache-Control Headers)

NGINX is open-source software for website serving, reverse proxying, caching, media streaming, load balancing, and more.

Adding Cache-Control headers in NGNIX is pretty simple, add the following code to your server’s configuration file:

location ~* \.(js|css|png|jpg|jpeg|gif|svg|ico)$ {
 expires 30d;
 add_header Cache-Control "public, no-transform";
}

Once you save/update the file, it will tell the browsers that the files aren’t going to change for at least 30 days. The relevant files will be saved for that period of time before renewing them.

Apache (Cache-Control Headers)

If your host is using Apache serve then use the following code below to your .htaccess file.

Note: The code must be added before “#BEGIN WordPress” or after “#END WordPress”.

<filesMatch ".(ico|pdf|flv|jpg|jpeg|png|gif|svg|js|css|swf)$">
        Header set Cache-Control "max-age=84600, public"
</filesMatch>

According to Kinsta, the max-age should be 84,600 seconds, but yours could be different. In the above line of code, the max-age is set to 84,600 seconds.

NGNIX (Expires Headers)

To add expired headers to your NGNIX server, use the below code. You can notice that the time is set as per the file type. For images, it is 365 days and for CSS, JV, and HTML it is 2 days.

    location ~*  \.(jpg|jpeg|gif|png|svg)$ {
        expires 365d;
    }

    location ~*  \.(pdf|css|html|js|swf)$ {
        expires 2d;
    }

Apache (Expires Headers)

Visit your Apache servers .htaccess file and the code below:

## EXPIRES HEADER 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 image/svg "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType application/javascript "access 1 month"
ExpiresByType application/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 2 days"
</IfModule>
## EXPIRES HEADER CACHING ##

Now, check your site in Google’s PageSpeed insight. See whether the issue is still there or not. Under Cache TTL you may see cache expiry/renewal days.

Solution 2. CDN’s

A content delivery network (CDN) is a combination of geographically distributed servers that speed up the performance of web content by bringing it closer to where visitors are. Data centers over the globe use caching, a process that temporarily saves copies of files so that you can reach internet content from a web-enabled gadget or browser more swiftly through a server near you. CDNs cache content such as web pages, images, and video in proxy servers near your physical location.

Did you know? You can change the browser cache expiry date in CDN’s. One of the most popular CDN Cloudflare lets you set the Browser Cache TTL as per your need.

Cloudflare

Connecting your site with Cloudflare is really easy, if you don’t how to do it, then read this tutorial.

  • Step 1: Login to Cloudflare
  • Step 2: Go to Caching Section
  • Step 3: Click On Configuration
  • Step 4: Adjust the Cache TTL time

Now, set the time to 6 months as it is considered to be ideal.

BunnyCDN

BunnyCDN is the fastest CDN available. I recommend it, but there is a slight problem and that is, it’s not free, BunnyCDN is paid service, however, it will charge you as per your usage.

You can change the Browser Cache Expiration Time from their cache section. Login>Pull Zone>Cache.

From the drop-down, select the cache expiration time, the recommended time is 6 months, however, BunnyCDN doesn’t give the 6-month option, either set it for 1 year or “match server cache expiration.”

Solution 3. Use Plugins

Plugins save our time and make everything easy for us. However, I don’t normally recommend installing plugins until or unless it’s too important.

I know plugins save our time and reduce our work, but they also increase the server pressure which may slow down our site and impact search engine performances. That’s why I have found some really good lightweight plugins that can help us fix this issue with ease.

W3 Total Cache

W3 Total Cache is one of the most popular speed optimization plugins. I really love this plugin because it offers tons of features for free, and one of them is “set expires headers”, with this feature, we can set up the cache expiry time.

  • Step 1: Install And Activate

Just search “W3 Total cache in the plugin section and you’ll find it.

  • Step 2: Go To Browser Cache

Once the installation has been done, the plugin will ask you to accept the policies, accept it! After that, click on browser cache from the menu.

  • Step 3: Set Up The Expires Header Lifetime

Under the Media & Other Files section, the option Expires Header Lifetime is visible. Put 15780000 (6 months) in that.

Please be sure that cache expiration in your hosting and CDN settings are not overriding this.

LiteSpeed Cache

LiteSpeed cache is another powerful plugin that offers a variety of features. It is possible to set the browser cache expiration date with this plugin and that is why it is here in this list.

Setting up this plugin may be a bit difficult for beginners as it has too many features, however, believe me, this plugin can certainly boost your site speed significantly. Now let’s set up the browser cache expiration date in the LiteSpeed cache.

  • Step 1: Install And Activate

This plugin is easily available and free to use. Just search LiteSpeed Cache in the plugin section of your WordPress.

  • Step 2: Go To The Cache Section

Once you installed the plugin, click on “Cache” from the plugin menu.

  • Step 3: Click On “Browser” And Adjust The Browser Cache TTL

Turn on the browser cache and Put 15780000 seconds in the Browser Cache TTL.

Click on Save Changes.

Solution 4. Fixing Google Analytics

Google Analytics sometimes causes this issue and the problem is that you can’t fix it through CDN’s, adding codes in the server, or using plugins like W3 Total Cache and LiteSpeed cache because the resource isn’t on your server.

Google Analytics has a low cache expiration time normally two hours and it looks something like this:

However, there is a way to fix this. We have to install a plugin called “Host Google Analytics Locally” or CAOS (Complete Analytics Optimization Suite ).

You can download this plugin from the WordPress Plugin Directory or by searching for it under Plugins > Add New in your WordPress.

Some extra benefits to hosting your analytics script locally is that it reduces your external HTTP requests to Google from two to one and it allows you to get full control over the caching of the file. 

Now let’s see how to use CAOS to fix this issue.

  • Step 1: Install And Activate

As I said, this plugin is free to use and easily available. Search it in the plugins area of your WordPress.

  • Step 2: Go to Settings And Click On Advanced Settings

In the Advanced Settings, you’ll be able to change the Cookie Expiration days.

  • Step 3: Change The Expiration Date From 30 To 180 Days

The default expiration date would be 30 days, you need to change it to 180 days because according to Google the recommended expiration date should be 180.

Some Extra Tips

There is always room for improvement and that’s why you should implement these extra tips mentioned below. The below tips are very effective in improving your site speed.

A. Host Google Fonts Locally

Google Fonts load a lot of additional CSS that you won’t require. If you self-host, you can bundle and minify your font-related CSS files/rules too (which also ends in fewer HTTP requests).

There is a wonderful plugin that can help you host Google Fonts Locally and the plugin is called  OMGF.

In order to efficiently host Google Fonts in WordPress, you have to install and activate the OMGF plugin.

Once OMGF has been installed and activated, go to Settings > Optimize Webfonts. This will take you to the plugin settings page where you can then set it up and begin hosting Google Fonts locally. This plugin is actually pretty straightforward.

B. Minimize Third-party Requests

Like Google Analytics, Adsense, Youtube, Facebook pixels, and many other third parties are hosted on a different server, thus, you aren’t in control of cache.

However, you can minimize the effect by setting up a powerful speed optimization plugin. The most amazing plugin that you can have today is definitely WP-Rocket. It provides tons of options to the users and helps to reduce the loading time.

But the problem is that this plugin isn’t free. If you are a beginner, you must save money and that’s why I’ve published tutorials of free plugins that can help you optimize your website.

How To Reduce Server Response Time (TTFB) 14 Terrific Ways

How To Detect Plugins Which Are Slowing Down Your WordPress Site (Ultimate Guide)

How To Setup EWWW Image Optimizer (Compress Upto 80%)

How To Serve Scaled Images (Properly Sized Images) In WordPress

WP Super Cache Ideal Settings With Screenshots (Updated Version)

How To Set Up Hummingbird Plugin Step By Step: Quick Tutorial

Autoptimize Plugin Ideal Settings – Step By Step (CDN Tutorial)

I hope this post was helpful. Thanks for reading!

Sumit
Sumit

Sumit is a regular contributor to Hostinggrow.com. He has 6 years of experience in blogging, and he loves football, his favorite player is - Lionel Messi (GOAT), but he has no hate for Ronaldo.

Articles: 54

2 Comments

Leave a Reply

Your email address will not be published. Required fields are marked *