Leverage browser caching for the following cacheable resources:

I just started testing out cloudflare workers, and it’s impressive! Very satisfied with the initial results.

However, I am getting some bad points because I am not leveraging browser caching for some resources, see: https://gtmetrix.com/reports/v2.thejewelleryroom.com/ZDuTAws8

“The following resources are missing a cache validator. Resources that do not specify a cache validator cannot be refreshed efficiently. Specify a Last-Modified or ETag header to enable cache validation for the following resources:” (all resources served by CloudFlare workers).

How can I enable this?

1 Like

Hey @mattias3,
I am pretty sure that you will find valuable info into Cache API Docs.

While you can control the cache with VCL

At the same time, check the community tips for an example:

Let us know if we can do something else to help

Hi Stefano! Thanks for your quick reply. I have found a few of theese articles prior to asking; but I’m not sure if this is a CloudFlare setting, or if I should do something in my project? For instance, it’s a Vue / Nuxt.js application. Should I implement some .htaccess despite of this?

Also, as per the cache docs, they illustrate a lot of code, but don’t really show me where I should write all this.
EDIT: Ok, so I have located the /workers-site/ directory, so I guess I know where to add code now. However, there’s no example of how to add expiration headers to my statically served files anywhere :confused:

I have also tried with this setup under Page Rules, but they don’t seem to affect the Expires header:

OK. So after purging the cache it now works - great!! However, I still get the following errors:

The following resources are missing a cache validator. Resources that do not specify a cache validator cannot be refreshed efficiently. Specify a Last-Modified or ETag header to enable cache validation for the following resources:

Edit:

I have tried with this .htaccess file inside the folder where aparently the files are not served with a last-modified / ETag, but it doesn’t seem to work:

 <IfModule mod_expires.c>
ExpiresActive on
ExpiresByType application/pdf A2592000
ExpiresByType image/x-icon A2592000
ExpiresByType image/vnd.microsoft.icon A2592000
ExpiresByType image/svg+xml A2592000

ExpiresByType image/jpg A2592000
ExpiresByType image/jpeg A2592000
ExpiresByType image/png A2592000
ExpiresByType image/gif A2592000
ExpiresByType image/webp A2592000

ExpiresByType video/ogg A2592000
ExpiresByType audio/ogg A2592000
ExpiresByType video/mp4 A2592000
ExpiresByType video/webm A2592000

ExpiresByType text/css A2592000
ExpiresByType text/javascript A2592000
ExpiresByType application/javascript A2592000
ExpiresByType application/x-javascript A2592000

ExpiresByType application/x-font-ttf A2592000
ExpiresByType application/x-font-woff A2592000
ExpiresByType application/font-woff A2592000
ExpiresByType application/font-woff2 A2592000
ExpiresByType application/vnd.ms-fontobject A2592000
ExpiresByType font/ttf A2592000
ExpiresByType font/woff A2592000
ExpiresByType font/woff2 A2592000

</IfModule>

Hey @mattias3
Can you send your domain?

The .htaccess method depends from your origin server setup, (for example if you run on NGInX, htaccess wont work) and is ending up on CloudFlare and what serves on browser.

If you can’t add your domain, can you paste your app’s Response Headers here?

Hey Stefano. Sorry for late reply. My domain is: https://v2.thejewelleryroom.com - I run on Cloudflare Workers, which I believe has support for htaccess / apache - right?

I forgot to reply directly to your question, so I gussed you missed my reply. Anyhow, it’s https://v2.thejewelleryroom.com. I also tried deploying with Netlify, just to compare, and I get a slightly better PageSpeed score because it does most of theese things out of the box (see https://v3.thejewelleryroom.com which is served by Netlify)

Hi @StefanoWP! So I got a biiit more experienced with cloudflare workers scripting. I made a redirector using KV storage - pretty cool.

Next step is to fix the “Leverage browser caching for the following cacheable resources:” pagespeed issue. I am not using htaccess anymore, so I need to find some solution. As I said earlier, it wonders me why my Page Rules doesn’t work:

I guess I’ll need to add some code to the workers-site file.

1 Like

@mattias3 with these setting my Expires headers reach 100% on YSlow, thank :wink:

You’re welcome. Are you using Cloudflare worker or just a normal website? because the rules doesn’t work for me, using Cloudflare Workers :wink: