How can I get Google Pagespeed Insights or Lighthouse to acknowledge that I am caching - I get the warning 'Serve static assets with an efficient cache policy'

I am using Google Pagespeed Insights and Lighthouse to evaluate my site for performance and SEO reasons, and no matter what I do I get the following optimization suggestion:

Serve static assets with an efficient cache policy

The assets it is warning about are all jpg, png, and webp files. I have the following CloudFlare settings:

Caching level: Standard
Browser Cache TTL: 4 hours
Page rule: site.com/* Polish: Lossy, Auto Minify: HTML, CSS & JS, Browser Cache TTL: 12 hours, Cache Level: Cache Everything, Edge 
Cache TTL: 12 hours, Origin Cache Control: On, Opportunistic Encryption: On

I have caching enabled in Apache, like this:

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

and when I curl the resource I get the following headers back:

HTTP/1.1 200 OK
Date: Sun, 25 Jul 2021 22:24:38 GMT
Content-Type: image/webp
Transfer-Encoding: chunked
Connection: keep-alive
Last-Modified: Fri, 23 Jul 2021 13:53:54 GMT
ETag: W/"16b5c-5c7cabbf61951-gzip"
Vary: Accept-Encoding
Cache-Control: max-age=84600, public
CF-Cache-Status: DYNAMIC

I would really like to figure out why I’m getting this suggestion and make it go away. Any ideas?

I’m pretty sure it’s because it’s only 4 hours. I think when I set mine to 30 days, the warning goes away.

1 Like

Correct, Google does not like low Cache TTLs on static ressources.

Thats not enough AFAIK, should be 1 Year according to:

The max-age directive tells the browser how long it should cache the resource in seconds. This example sets the duration to 31536000 , which corresponds to 1 year: 60 seconds × 60 minutes × 24 hours × 365 days = 31536000 seconds.

When possible, cache immutable static assets for a long time, such as a year or longer.

2 Likes

So I should make this setting in Apache:

<FilesMatch "\.(ico|pdf|jpg|jpeg|png|gif|js|css|webp)$">
   Header set Cache-Control "max-age=31536000, public"
</FilesMatch>

If so, then what is the best practice way of asking CloudFlare to pass it on to the browser? Is it:

Origin Cache Control: On

Thanks.

This should do it:

2 Likes

This topic was automatically closed 3 days after the last reply. New replies are no longer allowed.