Caching & CDNs: HTTP Caching That Actually Works

What you’ll learn

• What Cache-Control directives really do
• How to cache static assets “forever” safely
• How CDNs reduce TTFB and improve LCP

---

30‑second interview answer

HTTP caching is controlled mainly by Cache-Control. For versioned static assets (like app.abc123.js) you can use public, max-age=31536000, immutable. For HTML/documents you usually cache short or use validation (ETag). A CDN improves performance by serving content closer to users and reducing TTFB. The key is: long-cache immutable assets, carefully cache HTML, and avoid accidental stale dynamic content.

---

Two categories of content

1) Versioned static assets

Examples:

• JS/CSS bundles with hashes
• images with hashed filenames

These are safe to cache for a year.

2) Documents / dynamic responses

Examples:

• HTML
• API responses

These need shorter caching or validation.

---

The most useful headers

Cache-Control

Common patterns:

• Static hashed assets:
  • public, max-age=31536000, immutable
• HTML:
  • public, max-age=0, must-revalidate (forces validation)

ETag

Allows revalidation:

• Client asks: “do you still have the same version?”
• Server answers 304 (no body) if unchanged

---

CDN mental model

A CDN is a distributed cache.

It helps by:

• reducing round trip latency (TTFB)
• offloading origin

But it can hurt if you cache personalized content.

---

Common mistakes

• Caching HTML for too long (users see stale pages)
• Not hashing asset filenames, then using long cache (can’t roll back safely)
• Forgetting Vary headers for content negotiation

---

Production rule of thumb

• Hash static assets → cache long + immutable.
• Cache HTML cautiously → prefer revalidation.
• Use a CDN for global users.

---

Quick recap

• Caching strategy depends on content type.
• Long-cache immutable assets, validate documents.
• CDNs reduce TTFB and improve real-user speed.

---

Performance checklist (copy/paste)

• Hashed static assets: max-age=31536000, immutable
• HTML/documents: cache short or revalidate (ETag)
• Verify CDN is not caching personalized responses
• Confirm caching behavior in DevTools (from disk/memory cache, 304s)