Cloudflare not caching static content

Hi Support

I can’t seem to get cloudflare to cache my static content. I run an online shop with woocommerce extension. Html pages by default is bypassed and marked as dynamic under cf-cache status. What concerns me is the image file, css, and js files. I tried several product pages using chrome incognito mode and cf-cache status is showing missed or expired no matter how many times I reload the page. The following are the settings I have under Cloudflare.

Speed Optimization: All minification enabled, Brotli Enabled, Rocket Loader Off
Caching Configuration: Caching level set to Standard, Browser Cache TTL Respect Existing Headers
Page Rules: none set

Here’s what I see from inspect network under google chrome.

GENERAL:

  1. Request URL:
    https://domainsample.com/wp-content/plugins/woocommerce/assets/js/frontend/woocommerce.min.js?ver=5.4.1
  2. Request Method:GET
  3. Status Code:200 (from memory cache)
  4. Remote Address:172.67.170.73:443
  5. Referrer Policy:strict-origin-when-cross-origin

RESPONSE HEADERS:

  1. alt-svc:h3-27=":443"; ma=86400, h3-28=":443"; ma=86400, h3-29=":443"; ma=86400, h3=":443"; ma=86400
  2. cache-control:public, max-age=604800
  3. cf-cache-status:EXPIRED
  4. cf-ray:663b0d14192118a3-SIN
  5. cf-request-id:0ad8c6808d000018a3aa0da000000001
  6. content-encoding:br
  7. content-type:application/x-javascript
  8. date:Wed, 23 Jun 2021 04:42:41 GMT
  9. etag:W/“85b-60c9d1bb-2805f46;gz”
  10. expect-ct:max-age=604800, report-uri=“https://report-uri.cloudflare.com/cdn-cgi/beacon/expect-ct
  11. expires:Wed, 30 Jun 2021 04:42:41 GMT
  12. last-modified:Wed, 16 Jun 2021 10:26:03 GMT
  13. nel:{“report_to”:“cf-nel”,“max_age”:604800}
  14. report-to:{“endpoints”:[{“url”:“https://a.nel.cloudflare.com/report/v2?s=%2FQaauePMWZAmwNsjKpriohYR8mGPzXn9sB8Fb708VhCPcoeKtYPVgDehOo0RsBgDVN8LkgCY1zE0gJqtZoF3TsTqY6XbCj6AA0Ys66EFGvg29wBwmdK6%2BDEXVElislLOFw%3D%3D"}],“group”:“cf-nel”,"max_age”:604800}
  15. server:cloudflare
  16. vary:Accept-Encoding
  17. x-turbo-charged-by:LiteSpeed

Expiry is set to expire on June 30th, yet everytime I reload the page, css & js files always show expired and would not cache. I have tried purge all cache and clear browser cookies, none seem to work. Not sure what seems to be blocking Cloudflare from creating new cache for these static content onto its edge server.

You’ll need to check the caching headers from your origin - e.g.

curl "https://domainsample.com/wp-content/plugins/woocommerce/assets/js/frontend/woocommerce.min.js?ver=5.4.1" -svo /dev/null --connect-to ::1.2.3.4

Replace 1.2.3.4 with your origin IP and you should check what cache-control / expires headers are set there.


Here’s what I found by following your method:

  1. :authority: domain.com
  2. :method:GET
  3. :path:
    /wp-content/plugins/woocommerce/assets/js/frontend/woocommerce.min.js?ver=5.4.1%22%20-svo%20/dev/null%20–connect-to%20::162.220.167.62
  4. :scheme:https
  5. accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,/;q=0.8,application/signed-exchange;v=b3;q=0.9
  6. accept-encoding:gzip, deflate, br
  7. accept-language:en-US,en;q=0.9
  8. cache-control:max-age=0
  9. cookie:
    _gcl_au=1.1.256023802.1624423361; _ga=GA1.2.108117832.1624423361; _gid=GA1.2.2021802715.1624423361
  10. if-modified-since:Wed, 16 Jun 2021 10:26:03 GMT
  11. if-none-match:W/“85b-60c9d1bb-2805f46;gz”
  12. sec-ch-ua:
    " Not;A Brand";v=“99”, “Google Chrome”;v=“91”, “Chromium”;v=“91”
  13. sec-ch-ua-mobile:?0
  14. sec-fetch-dest:document
  15. sec-fetch-mode:navigate
  16. sec-fetch-site:none
  17. sec-fetch-user:?1
  18. upgrade-insecure-requests:1
  19. user-agent:
    Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.114 Safari/537.36

It looks like cache control is set to max-age=0 after following your method to request headers.
I don’t understand why this is the case. When I inspect the element under chrome network, cache-control is public, max-age=604800

I would like to add that I am using openlitespeed server with litespeed cache. Under htaccess, the following is added with expiry.

ExpiresActive on ExpiresByType application/pdf A31557600 ExpiresByType image/x-icon A31557600 ExpiresByType image/vnd.microsoft.icon A31557600 ExpiresByType image/svg+xml A31557600

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

ExpiresByType video/ogg A31557600
ExpiresByType audio/ogg A31557600
ExpiresByType video/mp4 A31557600
ExpiresByType video/webm A31557600

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

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

What seems to be blocking resources from being cached under cloudflare edge?

What you have pasted there are HTTP Request headers - you need to check the response headers directly from your origin to understand why something might not be cached.


I’m sorry but this is very new to me. Here is a copy of the response header after pasting this code on my browser:
https://domainsample.com/wp-content/plugins/woocommerce/assets/js/frontend/woocommerce.min.js?ver=5.4.1"%20-svo%20/dev/null%20--connect-to%20::162.220.167.62
The domain is only a sample, I don;t know how to hide it from the public.

Response headers:

  1. age:156
  2. alt-svc:h3-27=":443"; ma=86400, h3-28=":443"; ma=86400, h3-29=":443"; ma=86400, h3=":443"; ma=86400
  3. cache-control:public, max-age=604800
  4. cf-cache-status:MISS
  5. cf-ray:66449aca5c3f0af0-NRT
  6. cf-request-id:0adebf127900000af0792df000000001
  7. content-encoding:br
  8. content-type:application/x-javascript
  9. date:Thu, 24 Jun 2021 08:32:17 GMT
  10. etag:W/“85b-60c9d1bb-2805f46;gz”
  11. expect-ct:
    max-age=604800, report-uri=“https://report-uri.cloudflare.com/cdn-cgi/beacon/expect-ct
  12. expires:Thu, 01 Jul 2021 08:32:17 GMT
  13. last-modified:Wed, 16 Jun 2021 10:26:03 GMT
  14. nel:{“report_to”:“cf-nel”,“max_age”:604800}
  15. report-to:
    {“endpoints”:[{“url”:“https://a.nel.cloudflare.com/report/v2?s=tRZhIu1oP4TDtETFXVa1C2VCQVrtCVT25GOZ0DKSzv9Rb%2FWqwFACDAmyETxbzLklpWHqEpObcgNZGWLMBogNn4tac3wYGw0Muf%2FaRI72%2BKDPteltONZA9wsDcYpK"}],“group”:“cf-nel”,"max_age”:604800}
  16. server:cloudflare
  17. vary:Accept-Encoding
  18. x-turbo-charged-by:LiteSpeed

I have a lso shared a copy of my htaccess from my previous post. Under htaccess, it has set expiry headers. Not sure hwy it isn’t working.

No problem - the request you are running is not reaching your origin - it’s actually hitting Cloudflare - as evidenced by the server: cloudflare response header.

What we want to do is see your origin headers without Cloudflare - these are the headers Cloudflare will see when deciding whether to Cache your response and for how long - so they should reveal if you are set up correctly.

To do that, try this command:

curl "https://domainsample.com/wp-content/plugins/woocommerce/assets/js/frontend/woocommerce.min.js?ver=5.4.1" -svo /dev/null --ipv4 --connect-to ::1.2.3.4

Just replace https://domainsample.com/wp-content/plugins/woocommerce/assets/js/frontend/woocommerce.min.js?ver=5.4.1 with the URL you want to test and 1.2.3.4 with your origin server’s IP address. If you see something other than server: cloudflare in the server response header, then you’re likely hitting your origin, which is the test we want to run.

Is there anyway to send you private message so my details won’t be revealed to the public?

1 Like

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