CDN Cache Strategy Simulator

Content Delivery Networks reduce latency, offload origin servers, and improve global availability. Simulate cache behavior in real-time and learn how Cache-Control headers govern the web's performance layer.

Edge Caching • Cache-Control • Hit/Miss Ratio
Cache Simulator
💻
USER
Browser / Client
REQUEST
MISS
🌐
CDN EDGE
Fastly / Cloudflare
Cached Resources
Empty
FETCH
🖥️
ORIGIN
GitHub Pages
0
Cache Hits
0
Cache Misses
0%
Hit Rate
0ms
Avg Response
Cache-Control Header Builder
0 (no cache) 1 hour 1 day 1 week 1 year
public, max-age=86400
Resources can be cached by any cache (CDN, browser, proxy) for 1 day. After expiration, the cache must revalidate with the origin before serving.
This Site's CDN: GitHub Pages + Fastly

Actual Response Headers

Cache-Control max-age=600
ETag W/"60b7-..."
Vary Accept-Encoding
X-Cache HIT / MISS
X-Served-By cache-fra19123-FRA
Content-Encoding gzip / brotli

Latency Comparison: CDN vs Direct Origin

San Francisco
180ms (direct)
15ms (CDN)
London
165ms (direct)
12ms (CDN)
Tokyo
220ms (direct)
18ms (CDN)
Sydney
250ms (direct)
20ms (CDN)
Direct to Origin (California)
Via CDN Edge

What This Proves

Cache Hit/Miss Mechanics

First request: MISS — CDN fetches from origin, stores copy, serves to user (~200-300ms). Subsequent requests: HIT — served directly from edge node (~10-20ms). Cache eviction occurs based on TTL, LRU policy, or manual purge.

Cache-Control Directives

public: CDN may cache. private: browser only. no-store: never cache. immutable: never revalidate (for versioned assets). stale-while-revalidate: serve stale while fetching fresh.

CDN Edge Network Topology

Global anycast network routes users to nearest PoP (Point of Presence). Origin shield reduces origin load. Tiered caching: L1 (edge) → L2 (shield) → Origin. This site uses Fastly's 200+ edge locations.

Cache Invalidation Strategies

Hard purges (immediate removal), soft purges (mark stale), surrogate keys (tag-based purging), or time-based TTL. "Cache busting" via filename hashing: app.a3f2b1.js enables infinite caching.

Content Hashing for Cache Busting

Versioned filenames based on content hash ensure changed files get new URLs, while unchanged files remain cached forever. Combined with immutable directive, eliminates revalidation overhead entirely.

Real-World CDN Awareness

GitHub Pages serves via Fastly's CDN. Response headers reveal cache status (X-Cache: HIT/MISS), serving POP (cache-fra19123-FRA), and compression. Understanding these headers is essential for debugging performance.