Global Network and Edge Caching: A Developer's Guide to CDN Performance

Previously in this course, we covered Configuring SSL/TLS Settings to ensure our traffic is encrypted. Now that our connection is secure, we need to make it fast. In this lesson, we explore how a Content Delivery Network (CDN) uses edge caching to deliver your content from the location closest to your users.

What is a CDN and How Does it Work?

A Content Delivery Network (CDN) is a distributed group of servers—often called "edge nodes"—spread across the globe. Instead of forcing every user to fetch your website's files from a single origin server (where your code actually lives), a CDN stores copies of your content at these edge nodes.

When a user visits your site, the request is routed to the nearest edge server. If that server has a copy of the requested file, it serves it instantly. This significantly reduces latency—the time it takes for data to travel between the client and the server.

The Edge Caching Workflow

Think of the "Edge" as the front line of your infrastructure. By leveraging edge computing for web performance, you intercept requests before they ever reach your origin.

1. User Request: A user in Tokyo requests style.css.
2. Edge Check: The Cloudflare edge node in Tokyo checks its local cache.
3. Cache Hit: If the file is present, the node serves it immediately (Cache Hit).
4. Cache Miss: If the file is missing, the node fetches it from your origin, stores a copy, and then serves it to the user.

Cacheable vs. Non-Cacheable Assets

Not everything should be cached. Understanding the difference is the difference between a lightning-fast site and one that shows stale, broken data.

Identifying Content

• Cacheable: Files with predictable paths that don't depend on user identity (e.g., /images/logo.png, /css/main.css).
• Non-Cacheable: Dynamic content generated per-request, authenticated endpoints, or sensitive transactional data (e.g., /api/me, /checkout).

Worked Example: Inspecting Cache Headers

You can verify if an asset is being served from the edge by inspecting the HTTP response headers in your browser's Developer Tools (Network tab).

When you request an asset from a Cloudflare-proxied site, look for the cf-cache-status header:

HTTP
HTTP/1.1 200 OK
Date: Wed, 25 Oct 2023 10:00:00 GMT
Content-Type: text/css
cf-cache-status: HIT

• HIT: The file was served from the Cloudflare edge.
• MISS: The file wasn't in the cache and had to be fetched from your origin.
• DYNAMIC: The file is not eligible for caching (often due to your configuration).

Hands-on Exercise

1. Open your website in a browser (ensure it is proxied via the Cloudflare Proxy Fundamentals orange cloud).
2. Open Developer Tools (F12) and navigate to the Network tab.
3. Refresh the page and click on a static file, such as a .css or .png file.
4. Check the Response Headers. Can you find the cf-cache-status?
5. If it says MISS, refresh the page again. Does it change to HIT?

Common Pitfalls

• Caching Dynamic Pages: Accidentally caching a page that includes user-specific data (like a dashboard) can result in one user seeing another user's information. Always ensure dynamic, authenticated routes are excluded from standard cache rules.
• Ignoring Cache TTL: If you set your Time-To-Live (TTL) too long, users will see stale content after you deploy updates. We will cover how to manage this with Cache Invalidation Strategies in a later lesson.
• Over-caching: Trying to cache everything "just because" can lead to complex debugging when content doesn't update as expected. Cache only what is safe to cache.

FAQ

Q: Does Cloudflare cache my HTML by default? A: No. By default, Cloudflare only caches static file extensions (like .jpg, .css, .js). HTML is considered dynamic and is not cached unless you explicitly create a Cache Rule.

Q: How do I know if an asset is "dynamic"? A: If the content changes based on headers, cookies, or user session state, treat it as dynamic and do not cache it at the edge.

Q: Can I force a file to cache? A: Yes, we will cover that in the next lesson using Cache Rules.

Recap

By placing content at the edge, you drastically reduce latency for your global users. Remember: cache your static assets, protect your dynamic routes, and always verify your cf-cache-status headers to ensure your configuration is working as intended.

Up next: Configuring Cache Rules