githubEdit

CDN

CDN

Content Delivery Network (CDN) is a distributed network of edge servers that caches and delivers content from the nearest node to users, reducing latency and offloading origin server traffic.

How CDN Works

User Request → DNS Resolution → CDN Edge Node (cache hit?)
                                  ├── Hit  → Return cached content
                                  └── Miss → Fetch from Origin → Cache at edge → Return
  1. User requests https://example.com/style.css

  2. DNS resolves the domain to the nearest CDN edge node (via CNAME or Anycast)

  3. Edge node checks local cache:

    • Cache Hit: Return content directly from edge, with header X-Cache: HIT

    • Cache Miss: Forward request to origin server, cache the response, then return to user

Cache Rules

Origin Cache-Control Headers

The origin server controls CDN caching behavior via Cache-Control response headers:

Directive
Description

public

Response can be cached by CDN and browsers

private

Response can only be cached by browsers, not CDN

max-age=<seconds>

Cache TTL in seconds (e.g., max-age=3600 = 1 hour)

s-maxage=<seconds>

CDN-specific TTL, overrides max-age for shared caches

no-cache

Must revalidate with origin before using cached copy

no-store

Do not cache at all (sensitive data)

must-revalidate

Once stale, must revalidate before use

stale-while-revalidate=<s>

Serve stale content while revalidating in background

Common Cache Strategies

Cache Key

CDN uses a cache key to identify cached objects. The default key typically includes:

  • Scheme (HTTP/HTTPS)

  • Host

  • URI path

  • Query string

Some CDNs allow customizing cache keys to include/exclude query strings, headers, or cookies.

Browser Cache

Cache Loading Order

  1. Memory Cache — Fastest. Stores resources in browser memory (tab process). Cleared when tab closes. Typically used for images, scripts loaded in the current page

  2. Disk Cache — Persists on disk across sessions. Stores larger resources (CSS, JS, fonts). Survives tab/browser restarts

  3. Conditional Request (304) — Browser sends If-None-Match (ETag) or If-Modified-Since to server. Server returns 304 Not Modified if unchanged

  4. Full Request (200) — No cache available, fetches the full response from server/CDN

Validation Headers

Request Header
Response Header
Description

If-None-Match

ETag

Content hash comparison

If-Modified-Since

Last-Modified

Timestamp comparison

Chrome DevTools Cache Behavior

DevTools Option
Effect

Disable cache (checked)

Bypasses memory cache, disk cache, and sends Cache-Control: no-cache

Normal browsing

Uses full cache loading order

Hard Refresh (Cmd+Shift+R)

Bypasses cache, sends Cache-Control: no-cache

CDN Response Headers

Common CDN-specific response headers for debugging:

Header
Description
Example

X-Cache

Cache status

HIT, MISS, EXPIRED

CF-Cache-Status

Cloudflare cache status

HIT, MISS, DYNAMIC, BYPASS

X-Cache-Hits

Number of times served from cache

3

Age

Time (seconds) object has been in CDN cache

120

Via

Intermediate proxies/CDN nodes

1.1 varnish

X-Served-By

CDN node that served the request

cache-hkg123

CF-Ray

Cloudflare request ID + datacenter

abc123-HKG

Debugging

curl

dig / nslookup

Cache Purge

Reference:

Last updated