Chapter 58: Asset Optimization & Delivery

HTTP 103 Early Hints for Zero-Wait Preloading

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

LEARNING OBJECTIVES ⌵
  • Understand the HTTP 103 Early Hints informational status code (RFC 8297).
  • Utilize server processing think-time to send Link headers before the 200 OK body.
  • Preload critical CSS, fonts, and scripts while backend database queries execute.
  • Shave 200–500ms off First Contentful Paint (FCP) in server-rendered applications.
🎬 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 Timeline Comparison

Standard Server-Rendered Request (Without Early Hints):
Browser:  ===[ GET /product/123 ]===> Server
Server:   (Backend Database Query Running... 300ms Idle Time)
Server:   <===[ 200 OK + HTML ]======= Browser
Browser:  Parses HTML ===> Discovers /style.css & /font.woff2 ===> Starts Fetch!

With HTTP 103 Early Hints:
Browser:  ===[ GET /product/123 ]===> Server
Server:   <===[ 103 Early Hints (Link: </style.css>; rel=preload) ]=== (Immediate! 10ms)
Browser:  Starts downloading CSS & Fonts IMMEDIATELY during server think-time! ⚡
Server:   (Finishes 300ms DB Query) ===[ 200 OK + HTML ]===> Browser (Assets already loaded!)

📌 Key Takeaways

  • HTTP 103 Early Hints enables browsers to download critical resources while the server generates dynamic HTML.
  • Supported in Chrome, Cloudflare, Fastly, Node.js, and modern reverse proxies.
  • --

❓ Knowledge Check

1. Which of the following is correct?

2. Which of the following is correct?