How to set Browser TTL for 1 page and another for the rest of the site?

General Rules
1

I have Browser TTL in Caching Configuration set to 1 year.

I would like 1 page specifically to have a Browser TTL of 5 minutes.

I set a Page Rule for that 1 page with the only setting being Browser TTL.

When I checked the Response Headers for that page, the max-age was still 31536000 (1 year) despite the Page Rule.

I then read that Cache Configuration overrides the Page Rule and that made sense given that I didn’t see max-age at 300 (5 minutes) for that page in Response Headers.

I then decided to try setting Browser TTL inside Caching > Cache Rule for that particular page. There the settings allow a minimum of 1 hour. That worked. max-age returned 3600.

However, I want it set to 5 minutes. At the same time want the rest of the site to have a Browser TTL of 1 year.

How do I set that?

4

Cloudflare never reduces browser cache TTL, the rules only increase it.

5

When it comes to Cache Rules, that isn’t correct, given this option:

Cache-Rules-Account-Cloudflare
Cache-Rules-Account-Cloudflare885×295 9.21 KB

I could use Cache Rules option but my plan doesn’t allow me to go lower than 1 hour.

So as I see I only have 2 options:

  • Set Browser TTL headers at the origin to 5 min for that 1 page and remove Cache Rule so that CF respects origin by default.
  • Set origin to either send no cache control headers for that 1 page and then use Page Rule to 5 minutes for that 1 page.

Correct?

6

Yes, if you want to use Page Rules, you must set the headers sent from your origin either to the correct value or something lower than what you want.

7

There’s one other thing I read in the CF Docs above that raised my eyebrows:
That Edge TTL cannot be set for a period longer than Browser’s TTL.

I need Browser TTL to be 5 min and Edge TTL to be 1 day for that 1 particular page.

The CF Docs are unclear whether:

  • one cannot set the two TTLs in a Cache Rule (where Edge’s is longer than Browser’s)
    OR
  • one can actually set Edge’s TTL longer than the duration of Browser TTL if Browser TTL is sent by Origin.

While I understand the logic behind not allowing Edge TTL to be longer than Browser TTL, my problem is that 1 page can change at any time within a 24-hour period. So I have to keep it on Edge for that long. I cannot afford for a Browser to just serve local cached content for the next 24 hours because content may have changed on Edge by then.

I purge CF cache via API for that 1 page when a change occurs. But no one tells the browser that a change occurred, so a Browser’s TTL has to be short enough, hence a 5-minute duration.

So I am not sure now given the CF Docs can I actually have Browser TTL set to 5 min and Edge TTL to 1 day for that 1 particular page or not?

8

First I’m hearing of this. Where did you find this information?

Caching things on the Edge but not in browsers is a very common setup.

9

I would also recommend to just set the headers at the Origin with cache-control and Cloudflare-CDN-cache-control.

That way, you should not be limited in setting browser cache TTL.

Just create a cache rule that marks everything on the hostname as eligible for cache, and set it to respect Origin headers.

10

I read the docs again and again and some other sources I’ve read and… darn it, I cannot find that either. I must have misread something.

11

I will try setting origin cache control for that 1 particular page then and see what happens.

Thanks for all the help!