Confused about caching TTLs

I am hosting a blog with Wordpress. The blog is simple, there’s no login available. The only dynamic content seems to be new blog posts and comments.

Due to lacking technical knowledge and time deficiency, I am not going to set up subdomains for static content and set my caching rules accordingly. So I am trying to make it work with caching all the content on my website.

The problem is that I don’t know what TTLs to set to my browser and edge caching to optimize both for speed and functionality, partly because I don’t know the exact caching logic. AFAIK edge caching is server-side and sets the rule for requesting fresh copy from server (in my case WP server) and browser caching is client-side and sets the rule for caching a local copy of the website.

My confusion stems from the fact that since new blog posts and comments is dynamic content that ideally should be displayed in real time (so not cached?) then my edge cache TTL can’t be high, because I need to request that dynamic content from my server. Is that correct? Because AFAIK browser cache TTL will not affect this dynamic content at all.

So if I understand it correctly, the following TTL schemes would yield following results:

  1. High edge cache (EC) TTL, high browser cache (BC) TTL -> optimized page load speed for longer time but dynamic content won’t be displayed quickly enough -> wouldn’t exactly work for me
  2. Low edge cache (EC) TTL, low browser cache (BC) TTL -> dynamic content gets refreshed often, but this comes at a cost of page load speed -> not optimized
  3. High edge cache (EC) TTL, low browser cache (BC) TTL -> probably the worst of both worlds (AFAIK), dynamic content doesn’t refresh often enough and I also lose in terms of page load speed
  4. Low edge cache (EC) TTL, high browser cache (BC) TTL -> not too sure about this variant, not sure how that would work in practice -> dynamic content refreshes often but also the page load speed is optimized?

There’s another thing I am not very aware of how to use for my benefit - purging. If I have set to cache everything then how purging could help here?

I plan to post 1-3x a week, for easier cache management I could set all my posts to be released only once per week on a specific day. Could you please advise how to set up my caching TTLs for optimized performance?

Hi @flocity,

Performance and caching aren’t my strongest subjects, but since no one else has replied, I will give it a go! :slight_smile:

Here are the details on what each is:

Edge Cache TTL

Specify how long to cache a resource in the Cloudflare edge network. Edge Cache TTL only takes effect when included as a setting in a Page Rule that also sets Cache Level to Cache Everything . Edge Cache TTL isn’t visible in response headers. The minimum Edge Cache TTL depends on plan type:

Free - 2 hours
Pro - 1 hour
Business - 30 minutes
Enterprise - 1 second

https://support.cloudflare.com/hc/en-us/articles/218411427#summary-of-page-rules-settings

Browser Cache TTL

Set the Browser Cache TTL option in the Cloudflare Caching app. To accelerate page load for your repeat visitors, select a high Browser Cache TTL .

If you modify cached assets, the new asset isn’t displayed to a repeat visitor before the Browser Cache TTL duration. Purging Cloudflare’s cache does not affect assets cached in a visitor’s browser.

https://support.cloudflare.com/hc/en-us/articles/200168276-Understanding-Browser-Cache-TTL

Both can help with the performance of your website, the edge cache can speed it up for all visitors (assuming it is cached in all datacentres, otherwise the first couple of visits may be slower). Browser cache will help speed it up for returning visitors.

One thing to be aware of is the fact that you can purge the edge cache whenever you want, so I guess it’s up to you if you want it to refresh after so many hours/days, or whether you want to set it to longer but purge if you add anything. The browser cache, however, will remain until the TTL.

No idea if that will help you at all, and maybe someone else here can help further!

Hi,

Thanks for your contribution.
I’ve spent a lot of time now testing and figuring the right flow out and finally I may have arrived to some satisfactory result.

I’ve set the page rule to cache on edge for a month and didn’t specify browser caching TTL, but under “caching” tab it is set to “respect existing headers”. Now since my dynamic content is just comments and new blog posts which I do not update very often then I am fine with just manually purging a couple of pages on updates and fetching new copies from CF.

I am still not sure what benefit would I see from implementing browser caching (in addition to edge cache TTL) because purging would not instantly fetch a new copy for client-side session where prior cached version is stored. I feel like specifying it would just ruin the current purge-fetch flow.

I am now looking to automate my fetching requests on purge to make a fresh copy instantly available in CF data servers.

It’s probably not very efficient and seamless but does it’s job just fine.

That’s pretty much what I have on one of my sites too. Respect existing headers seems to work for me with WordPress as static content is cached in the browser but the dynamic content isn’t.

This topic was automatically closed after 30 days. New replies are no longer allowed.