Chapter 58: Asset Optimization & Delivery

CDN Caching & Immutable Assets Architecture

**Part 12: Performance & Optimization** — Chapter 58: Asset Optimization & Compression

LEARNING OBJECTIVES ⌵
  • Implement the FAANG standard: Content-Hash filenames + Immutable Cache-Control.
  • Configure Cache-Control: max-age=31536000, immutable for static hashed bundles.
  • Ensure HTML files are never cached permanently (Cache-Control: no-cache, must-revalidate).
  • Master CDN edge cache invalidation and Stale-While-Revalidate (s-maxage, stale-while-revalidate).
🎬 INTERACTIVE VISUAL PIPELINE Core Architecture Simulation
🌐
1. Input
Directives & Tags
⚙️
2. Parse
Tokenizer & AST
🌳
3. Layout
Box Model & Flow
🎨
4. Render
GPU Paint & Composite
PHASE 1: INPUT & DIRECTIVES
Browser receives declarative markup stream, parsing tag tokens and initializing component state.

📖 The Two-Rule Caching Golden Standard

RULE 1: HTML Document (index.html)
  ===> Cache-Control: no-cache, no-store, must-revalidate
  (Ensures users ALWAYS fetch the latest HTML referencing new bundle hashes)

RULE 2: Hashed Assets (app.8f91a2.js, style.3b41c0.css, hero.9a1d.avif)
  ===> Cache-Control: public, max-age=31536000, immutable
  (Cached FOREVER in browser and CDN; 0ms HTTP 304 round-trips!)

📌 Key Takeaways

  • Never cache HTML documents with long max-age.
  • Always append cryptographic content hashes to CSS, JS, and image filenames.
  • Add immutable to tell browsers never to send conditional If-None-Match requests on page reloads.
  • --

❓ Knowledge Check

1. Which of the following is correct?

2. Which of the following is correct?