Local browser cache problem- Age: and max-age

#1

I am not sure if this is new or I never noticed it before…

Cloudflare is sending an ‘age:’ header for cached content which I must have never noticed before however it seems to be causing an unwanted issue with the browser local cache.

My settings are to respect existing headers.

We serve HTML pages with no cookies and origin headers:
cache-control: max-age=3600
pragma: cache

I have a page rule Cache Everything / Edge Cache TTL : 7 Days for HTML

So Cloudflare hits the server once per week for an update, and clients browsing the site get a fast (TTFB 50ms) response the first time they visit a page, and 5ms response (browser cache) if they hit ‘back’ or revisit the page.
All this makes the whole experience blindingly fast.

Recently I have noticed an ‘age:’ header sent from Cloudflare which is telling the client browser the Cloudflare cache age for that page. (ie, up to 7 days in my case)

Now whenever the ‘age:’ becomes older than the cache-control: max-age, the client browser refuses to cache the page, and hits Cloudflare on every load.
That seems like incorrect behavior by the browser.

Is that something I may have broken unknowingly with something in the html or another setting in Cloudflare?

I have never noticed the ‘age:’ header before, maybe that is new?

A workaround may be to remove the ‘age’ header. I tried adding an “age: 1” at the server but it gets overridden so I can’t test that. Maybe with a ‘worker’ but I have no idea how to use them.

  • Scott
1 Like
#2

Can’t test locally, but it looks like age is just an information header letting you know how long the item has been in the cache

Not sure how/why this would cause the browser to no longer use its own cache.

2 Likes
#3

Yes that was what I was thinking, the browser should ignore the Cloudflare age.

I thought I would speed things ap a little by adding Etag: W/… so at least Coudflare may return a 304 instead of the content, but as soon as I enable “Cache Everything / Edge Cache TTL” Cloudflare deletes my ETag header. Cloudflare seems determined to stop me :frowning:

#4

I figured this one out and the answer was indeed to use a Worker to remove the “Age” header, and my sites are back to being fast enough to see into the future.

In case anyone ever has the same issue, it was simple…

 addEventListener('fetch', event => {
   event.respondWith(handleRequest(event.request))
 })
 
 async function handleRequest(request) {
   let response = await fetch(request)
   response = new Response(response.body, response)
   response.headers.delete('age')
   return response
 }