How To Serve Static Assets With An Efficient Cache Policy In WordPress (PageSpeed Insights Item)

If you ran your site through PageSpeed Insights, you may see a recommendation to serve static assets with an efficient cache policy.

Serve static assets with an efficient cache policy

This is flagged when you have a short cache expiration for images, fonts, media, scripts, and stylesheets. Google fails the audit if the cache expiration is under 180 days (259200 minutes). This simply means you need to adjust your cache expiration for those files to 180 days or over.

In most cases, you will login to your hosting account and adjust the static cache expiry (or similar) to 180 days. However, this can be quite a long time that visitors won’t see an updated version of those files. If you change these files frequently, a longer cache lifespan may not be best and you may want to make it shorter (even if it’s flagged). Google warns you about this.

I’ll cover a few other ways to serve static assets with an efficient cache policy in WordPress specifically for Cloudflare, other CDNs, Google Analytics, WP Rocket, and third-party scripts.

 

1. NGINX

Some hosts using NGINX let you adjust the cache expiration:

  • Login to your hosting account.
  • Find the static cache expiry option (or similar).
  • Set the static cache expiry to 259200 minutes (180 days).

Static Cache Expiry

Alternatively, add this code to your server’s configuration file (borrowed from Kinsta).

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

If you’re not using a host that lets you to change this, contact them and request it.

 

2. Cloudflare

Cloudflare has it’s own browser cache expiration.

Login to Cloudflare and go to Caching → Browser Cache TTL, then set it for “6 months.”

Cloudflare-Browser-Cache-TTL

 

3. Other CDNs

Most other CDNs let you change the browser cache expiration.

For example, in BunnyCDN, go to Pullzone → Your Website → Cache → Browser Cache Expiration. In this case, there is no option for 180 days. You can either set it for 1 year or “match server cache expiration.” You’ll need to make sure your server uses the correct cache expiration.

BunnyCDN Browser Cache Expiration

 

4. WP Rocket

WP Rocket has documentation on how their browser caching works.

This code is automatically added to your .htaccess file when you activate WP Rocket. But you will notice the browser cache expiration for images, fonts, and other files is 4 months (about 2 months short of Google’s 180 day requirement). It means you’ll need to change it to 180 days.

# Expires headers (for better cache control)

ExpiresActive on
    ExpiresDefault                              "access plus 1 month"
    # cache.appcache needs re-requests in FF 3.6 (~Introducing HTML5)
    ExpiresByType text/cache-manifest           "access plus 0 seconds"
    # Your document html
    ExpiresByType text/html                     "access plus 0 seconds"
    # Data
    ExpiresByType text/xml                      "access plus 0 seconds"
    ExpiresByType application/xml               "access plus 0 seconds"
    ExpiresByType application/json              "access plus 0 seconds"
    # Feed
    ExpiresByType application/rss+xml           "access plus 1 hour"
    ExpiresByType application/atom+xml          "access plus 1 hour"
    # Favicon (cannot be renamed)
    ExpiresByType image/x-icon                  "access plus 1 week"
    # Media: images, video, audio
    ExpiresByType image/gif                     "access plus 4 months"
    ExpiresByType image/png                     "access plus 4 months"
    ExpiresByType image/jpeg                    "access plus 4 months"
    ExpiresByType image/webp                    "access plus 4 months"
    ExpiresByType video/ogg                     "access plus 4 months"
    ExpiresByType audio/ogg                     "access plus 4 months"
    ExpiresByType video/mp4                     "access plus 4 months"
    ExpiresByType video/webm                    "access plus 4 months"
    # HTC files  (css3pie)
    ExpiresByType text/x-component              "access plus 1 month"
    # Webfonts
    ExpiresByType font/ttf    "access plus 4 months"
    ExpiresByType font/otf    "access plus 4 months"
    ExpiresByType font/woff   "access plus 4 months"
    ExpiresByType font/woff2  "access plus 4 months"
    ExpiresByType image/svg+xml                 "access plus 1 month"
    ExpiresByType application/vnd.ms-fontobject "access plus 1 month"
    # CSS and JavaScript
    ExpiresByType text/css                      "access plus 1 year"
    ExpiresByType application/javascript        "access plus 1 year"

Edit your .htaccess (you can use Htaccess File Editor if you don’t know how). Change the expiration from 4 months to 180 days. You may only want to do this for file types being flagged.

WP Rocket Cache Policy

WP Rocket also suggests to check with your host to make sure they don’t block WP Rocket’s rules and that Mod_expires is enabled.

 

5. LiteSpeed Cache

To serve statics assets with an efficient cache policy using LiteSpeed Cache, go to LiteSpeed Cache Settings > Browser. Enable browser cache and the browser cache TTL should be left as default (31557600 seconds). If you still see errors, check if your host or CDN is overriding this.

Serve static assets with efficient cache policy - LiteSpeed Cache

 

6. W3 Total Cache

If you need to serve static assets with an efficient cache policy in W3 Total Cache, go your Browser Cache settings and change the Expires header lifetime to at least 15552000s (180 days). Make sure the cache expiration in your hosting and CDN settings aren’t overriding this.

Serve static assets with efficient cache policy W3 Total Cache

 

7. Google Analytics

Google Analytics can also cause errors when serving static assets with an efficient cache policy.

If Google Analytics is appearing in PageSpeed Insights for this recommendation, CAOS Analytics lets you host analytics locally and adjust the cookie expiration period. WP Rocket’s Google Tracking Addon hosts it locally but doesn’t give you other options for the tracking code.

  • Install the CAOS Analytics plugin.
  • Go to Settings → Optimize Google Analytics → Advanced Settings → Cookie Expiry Period.
  • Set it to 180 days.

CAOS Analytics Cookie Expiry Period

I recommend checking out other features in the CAOS Analytics plugin. Using a minimal analytics tracking code and serving it from your CDN can be beneficial for WordPress speed.

 

8. Google Fonts

Just like you hosted Google Analytics locally to control the cache lifespan, you can do the same thing with Google Fonts.

But they need to be hosted locally on your server (not pulling from fonts.gtstatic.com). You can do this by downloading your fonts directly from the Google Fonts website (remember to be minimal with font families and weights), converting them to WOFF2 format using a tool like Transfonter, then adding them to your CSS. Alternatively, you can also try the the OMGF plugin.

Once fonts are hosting locally, follow step #4 to set the cache expiration to 180 days for fonts.

 

9. Third-Party Scripts

Third-party code isn’t hosted on your server, so you can’t optimize it.

Google Analytics and fonts are an exception since they can be hosted locally, and therefore, you can control the cache expiration. But serving  static assets with an efficient cache policy is not possible for AdSense, YouTube, Google Maps, and other third-party scripts that you might be getting errors for. Although, there may be other ways to optimize them like delaying JavaScript.

Third Party Usage

 

10. Purge Files And Retest

Once you’re done changing your cache expiration, remember to purge files and retest your WordPress site. Ideally you’ll have 100% for serve static assets with an efficient cache policy.

 

Frequently Asked Questions

How do I serve static assets with an efficient cache policy in WordPress?

Change your browser cache expiration to 180 days (or 259200 minutes). This is typically done in your hosting account, cache plugin, or CDN.

How do I serve static assets with an efficient cache policy using WP Rocket?

Edit your. htaccess file and locate the browser cache expiration code added by WP Rocket. Change the expiration from 4 months to 6 months for files flagged in Lighthouse, which are usually images or fonts.

How do I serve static assets with an efficient cache policy using Cloudflare?

Login to Cloudflare and go to Caching > Browser Cache TTL and change it to 6 months.

How do I serve static assets with an efficient cache policy using W3 Total Cache?

In your W3 Total Cache settings, go to Browser Cache and change Expires header lifetime to 180 days (15552000 seconds). Check your server and CDN to make sure they're not overriding this setting.

See also: My Ultimate WordPress Speed Guide

Cheers,
Tom

About Tom Dupuis

Tom Dupuis 2017Tom Dupuis writes WordPress speed and SEO tutorials out of his apartment in Denver, Colorado. In his spare time, he plays Rocket League and watches murder documentaries. Read his bio to learn 50 random and disturbing things about him.

Subscribe
Notify of
guest
4 Comments
Newest
Oldest Most Voted
Inline Feedbacks
View all comments