Serve static assets with an efficiently cache policy in WordPress

Serve static assets with an efficiently cache policy in WordPress

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

This error is caused if 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 efficiently cache policy in WordPress specifically for Cloudflare, other CDNs, Google Analytics, WP Rocket, and third-party scripts.

 

1. NGINX

Some hosts using NGINX might let you adjust it’s 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 using a host that doesn’t let you to adjust 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 adjust 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 (thanks Remy ~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. 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.

 

6. 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.

 

7. Third-Party Scripts

Third-party code isn’t hosted on your server, so you usually 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

 

8. Purge Files And Retest

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

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.

Keep reading the article at Tom Dupuis. The article was originally written by Tom Dupuis on 2021-03-09 23:59:27.

The article was hand-picked and curated for you by the Editorial Team of WP Archives.

Disclosure: Some of the links in this post are "affiliate links." This means if you click on the link and purchase the product, We may receive an affiliate commission.

Leave a Comment

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

Show Your ❤️ Love! Like Us
Scroll to Top