![Apple Music Experiencing Outage [Update: Fixed]](https://images.macrumors.com/t/cBpeJ95wekMRm8-YbPPJQhJrDsY=/1920x/article-new/2024/08/apple-music.jpg)
![New Apple M3 iPad Air On Sale for $50 Off [Deal]](https://www.iclarified.com/images/news/96759/96759/96759-640.jpg)
![[The AI Show Episode 139]: The Government Knows AGI Is Coming, Superintelligence Strategy, OpenAI’s $20,000 Per Month Agents & Top 100 Gen AI Apps](https://www.marketingaiinstitute.com/hubfs/ep%20139%20cover-2.png)
![[The AI Show Episode 138]: Introducing GPT-4.5, Claude 3.7 Sonnet, Alexa+, Deep Research Now in ChatGPT Plus & How AI Is Disrupting Writing](https://www.marketingaiinstitute.com/hubfs/ep%20138%20cover.png)
Understanding Cloudflare Caching: What Gets Cached and How to Control It
I used to think that Cloudflare caching just worked out of the box - set your website behind Cloudflare, and boom! Your HTML and media pages are cached, performance increases, and your boss is happy. Well… not quite. Cloudflare is a great tool, but to truly take advantage of it, you must take the time to understand how it works. Especially, you may have to set up a somewhat counter-intuitive rule. Curious? Let’s break it down! ℹ BEFORE WE START ℹ This article is far from complete, I couldn’t cover all of Cloudflare’s cache nuances without losing my audience (and myself). Instead, I will focus on key concepts and configurations, assuming you already know how to set up an application behind Cloudflare. In this article: Cloudflare Cache Statuses What is a “resource” Which resources are eligible for cache Which eligible resources are cached How to extend cached resources to HTML (and others) Cloudflare Cache Statuses First, let’s understand the headers and tools Cloudflare gives us to understand how our pages are cached (or not). When a page is served through Cloudflare, it adds some Cf-* cache headers. The most important one is Cf-Cache-Status, which can take the following values: HIT → cacheable content, served from the cache. MISS → cacheable content, never cached (or at least not in the cache at the time of the request). Served from the origin. EXPIRED → cacheable content, was in the cache but has an expired TTL. Served from the origin. BYPASS → cacheable content, not cached due to directive, cookie, etc … DYNAMIC → uncacheable content So, resources (or URLs) are organized into cacheable and uncacheable assets. Cacheable resources have more nuanced statuses, depending on the state of the Cloudflare cache and other settings such as the TTL, the Cookies, etc. (Another useful header is the Cf-Ray, which is a unique identifier of this request. You can use this ID in the CloudFlare console to find out more about the request) What is a “resource”
I used to think that Cloudflare caching just worked out of the box - set your website behind Cloudflare, and boom! Your HTML and media pages are cached, performance increases, and your boss is happy.
Well… not quite. Cloudflare is a great tool, but to truly take advantage of it, you must take the time to understand how it works. Especially, you may have to set up a somewhat counter-intuitive rule. Curious? Let’s break it down!
ℹ BEFORE WE START ℹ This article is far from complete, I couldn’t cover all of Cloudflare’s cache nuances without losing my audience (and myself). Instead, I will focus on key concepts and configurations, assuming you already know how to set up an application behind Cloudflare.
In this article:
- Cloudflare Cache Statuses
- What is a “resource”
- Which resources are eligible for cache
- Which eligible resources are cached
- How to extend cached resources to HTML (and others)
Cloudflare Cache Statuses
First, let’s understand the headers and tools Cloudflare gives us to understand how our pages are cached (or not). When a page is served through Cloudflare, it adds some Cf-* cache headers.
The most important one is Cf-Cache-Status, which can take the following values:
HIT→ cacheable content, served from the cache.MISS→ cacheable content, never cached (or at least not in the cache at the time of the request). Served from the origin.EXPIRED→ cacheable content, was in the cache but has an expired TTL. Served from the origin.BYPASS→ cacheable content, not cached due to directive, cookie, etc …DYNAMIC→ uncacheable content
So, resources (or URLs) are organized into cacheable and uncacheable assets. Cacheable resources have more nuanced statuses, depending on the state of the Cloudflare cache and other settings such as the TTL, the Cookies, etc.
(Another useful header is the Cf-Ray, which is a unique identifier of this request. You can use this ID in the CloudFlare console to find out more about the request)
What is a “resource”
