Start practising

SYSTEM DESIGN · CONCEPTS · SERVICES AND HOW THEY TALK · EPISODE 12

CDN: How Static Files Get Close to Users

What a content delivery network is, edge servers and the origin, cache hits and misses, Cache-Control headers and TTLs, cache keys and versioned file names, invalidation, pull vs push CDNs, what else CDNs do (TLS, DDoS protection, video), and when to use one in a design.

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
  18. 18
  19. 19
  20. 20
  21. 21
  22. 22
  23. 23
  24. 24
  25. 25
  26. 26
  27. 27
  28. 28
  29. 29
  30. 30
  31. 31
  32. 32
  33. 33
  34. 34
  35. 35
  36. 36
  37. 37
  38. 38
  39. 39
  40. 40
  41. 41
1 / 10

Press play to hear the narration, or step through at your own pace. Every picture here is the same one used in the YouTube video.

Notes

The problem

Here's the problem. A user in Chennai loads a page served from Virginia, fourteen thousand kilometres away. Even at the speed of light in fibre, each round trip takes a few hundred milliseconds, and a page has dozens of files. Meanwhile every user in the world hammers the same origin servers.

Distance costs time
  • Chennai ↔ Virginia ≈ 14,000 km
  • light in fibre: ~200 km per ms
  • → ~140 ms one way, best case
  • a page with 60 files,
  • TLS handshakes, retries…
  • and every user hits
  • the same origin servers

Edge servers

A content delivery network runs hundreds of edge servers around the world. DNS sends each user to the nearest one. If the edge has a copy of the file, it answers in a few milliseconds, and the request never reaches your origin.

Content delivery network
  • hundreds of edge locations
  • (points of presence) worldwide
  • DNS sends each user to
  • the nearest edge
  • edge has a copy → serve it
  • Cloudflare, CloudFront, Akamai,
  • Fastly

Hit or miss

The first request for a file at an edge is a miss: the edge fetches it from your origin, usually backed by object storage, keeps a copy and returns it. Everyone nearby after that gets a hit. With a ninety-five percent hit ratio, your origin sees only one request in twenty. That's a pull CDN; a push CDN has you upload files ahead of time.

Pull CDN
  • first request at an edge: MISS
  • edge fetches from origin,
  • stores it, returns it
  • next requests: HIT
  • hit ratio 95% →
  • origin sees 1 in 20 requests
  • push CDN: you upload files
  • to the CDN ahead of time

Headers

Your origin controls caching with the Cache-Control header. Public with a max age of a year means cache it for a year. Private, no store means never cache it, for anything user-specific. And stale-while-revalidate lets the edge serve a slightly old copy while it fetches a fresh one in the background.

Cache headers
Cache-Control: public,
  max-age=31536000, immutable
→ cache for a year

Cache-Control: private, no-store
→ never cache (account pages)

Cache-Control: max-age=60,
  stale-while-revalidate=300
→ 1 min fresh, then refresh
  in the background

Versioning

The cleanest trick is to put a hash of the content in the file name: app dot three f nine a, dot js. A new deploy produces a new name, so you can cache scripts, styles and images forever, cache the HTML only briefly, and never worry about users getting a stale script.

Versioned file names
app.js          → which version?
app.3f9a1c.js   → content hash

new deploy = new file name
old copies just expire
HTML points to the new name

cache JS/CSS/images forever,
cache HTML briefly

Invalidation

If you must change a file without renaming it, CDNs let you purge it, by path, prefix or tag, and the purge spreads to every edge within seconds to minutes. It works, but treat it as the emergency tool. Versioned file names avoid the problem entirely.

Invalidation
  • changed a file with the same
  • name? purge it:
  • purge /images/logo.png
  • purge by tag or prefix
  • takes seconds to minutes
  • across all edges
  • prefer versioned names;
  • purge is the emergency tool

More

Modern CDNs do more than store files. They terminate TLS close to the user, absorb denial-of-service attacks, compress responses, resize images on the fly, stream video in small chunks, and can even run code at the edge. Just never cache personal data as public.

CDNs do more
  • terminate TLS near the user
  • absorb DDoS attacks
  • compress (gzip, brotli)
  • resize and convert images
  • stream video in chunks (HLS)
  • cache some API responses
  • run code at the edge
  • personal data: never public-cache

Say it like this

In an interview: store images and video in object storage, serve them through a CDN with content-hashed names and long cache times, keep HTML and API responses short-lived or uncached, and use signed URLs for private media. Mention that origin load drops to one minus the hit ratio.

In the interview
  • "Users are global, media is big"
  • images/video in object storage
  • served through a CDN
  • content-hashed file names,
  • long max-age
  • HTML and APIs: short or no cache
  • signed URLs for private media
  • origin load ≈ (1 − hit ratio)

Interview questions

What is a CDN and why use it?

A network of edge servers around the world that cache and serve content near users. It cuts latency, reduces load and bandwidth at the origin, and adds protection against traffic spikes and DDoS attacks.

What is the difference between a pull CDN and a push CDN?

A pull CDN fetches content from the origin on the first request at each edge and caches it. A push CDN requires you to upload content to the CDN in advance; useful for large files that rarely change.

How do you control what the CDN caches?

With HTTP headers from the origin, mainly Cache-Control (public/private, max-age, s-maxage, no-store, stale-while-revalidate), plus CDN rules for paths and cache keys.

How do you deploy a new version of a JavaScript file without users getting the old one?

Include a content hash in the file name and reference it from HTML. Each version has a unique URL, so it can be cached forever while the short-lived HTML points to the new name.

How do you serve private images through a CDN?

Use signed URLs or signed cookies that expire, so the CDN only serves the file to holders of a valid signature, and mark user-specific responses as private.

What is the cache hit ratio and why does it matter?

The fraction of requests served from the edge. Origin traffic is roughly (1 − hit ratio), so going from 90% to 99% cuts origin load by ten times.

Can a CDN cache API responses?

Yes, for public, cacheable GET responses with appropriate headers, such as product listings. Personalised or rapidly changing responses should not be cached publicly.