HTTP/1.1 → HTTP/2 → HTTP/3 (QUIC) & Network Perf

FE Lead · Lesson 16 reference card

Lead line — say this out loud

"HTTP/1 had head-of-line blocking at the HTTP layer, HTTP/2 fixed that but not TCP's, HTTP/3 fixed TCP's by replacing it with QUIC. The architectural fix for waterfalls is SSR data colocation — not protocol choice."

The 3-generation story

Version	Fix	Remaining problem
HTTP/1.1	Persistent connections	1 req/connection → 6 TCP workaround
HTTP/2	Multiplexed binary streams	TCP HoL: 1 dropped packet = all streams blocked
HTTP/3	QUIC/UDP, per-stream reliability	UDP firewalls; QUIC CPU cost; observability

HTTP/2 features

Multiplexing

Many streams on one TCP connection, interleaved as frames. Eliminates HTTP-layer HoL. Domain sharding → active regression.

HPACK header compression

Static table (61 common headers) + per-connection dynamic table. Repeated headers (Cookie, UA) → 1–4 bytes.

Server Push → deprecated 2022

Browsers couldn't check cache before accepting push → waste. Replaced by 103 Early Hints (browser uses own cache logic).

HTTP/3 / QUIC wins

Per-stream reliability — dropped packet only delays that stream; others flow uninterrupted
0-RTT resumption — returning visitor sends data in first packet (idempotent GETs only)
Connection migration — Connection ID, not IP:port → Wi-Fi→4G = seamless, no reconnect
Built-in TLS 1.3 — unified QUIC+TLS handshake; encrypted headers
QPACK — header compression adapted for out-of-order delivery

Compression strategy

Use case	Algorithm	Level
Static JS/CSS/HTML (CDN)	Brotli (pre-compressed)	11 (offline only)
Dynamic SSR responses	gzip	6 (fast default)
Dynamic (if CPU budget)	Brotli	4–5
JPEG/WebP/AVIF/woff2/zip	None — already compressed	—

Brotli = ~20–26% smaller than gzip for text. Level 11 = ~100× slower to compress → pre-compute only. Requires HTTPS.

Request waterfall — flatten checklist

SSR data colocation — fetch on server → data in initial HTML, zero client waterfall
103 Early Hints — preload CSS/fonts while SSR runs the DB query
Preconnect — <link rel=preconnect href="https://api.example.com"> in <head>
Preload LCP image — fetchpriority="high" + rel=preload
Parallel queries — Promise.all() / RSC parallel routes, not sequential awaits
Edge CDN cache — ISR pages served from PoP near user; eliminates origin RTT
Speculative prefetch — Speculation Rules for next likely navigation

Platform Lead answer — deploy strategy

Protocol: H2 everywhere (table stakes). H3 at CDN edge = flag flip, CDN handles Alt-Svc + H2 fallback. Validate via RUM segmented by protocol.
Compression: Pre-compressed Brotli 11 for static assets. gzip 6 for dynamic SSR. CDN content-negotiates via Accept-Encoding.
Waterfalls: Hotel data in SSR (no client waterfall). 103 Early Hints for CSS/fonts. Parallel queries. Edge-cached ISR for hotel static content. Speculation Rules for search→detail.
H3 ROI: Highest for SEA mobile (high packet loss + connection migration for mid-booking network switch).

Key headers to know

Header	Purpose
`Alt-Svc: h3=":443"`	Server advertises HTTP/3 support; browser upgrades next request
`Accept-Encoding: br, gzip`	Client declares compression support (Brotli first = preferred)
`Content-Encoding: br`	Server declares applied compression
`Link: </s.css>; rel=preload`	In 103 Early Hints — browser fetches before 200 arrives

Don't fail the interview — traps

Trap 1

Domain sharding under HTTP/2 — it was a H1.1 workaround. Under H2, sharding creates many TCP connections instead of sharing one → defeats multiplexing, adds DNS+TLS cost. Remove it.

Trap 2

"H2 eliminates head-of-line blocking" — only at the HTTP layer. TCP HoL blocking remains: 1 dropped packet holds ALL streams. H3/QUIC fixes TCP HoL. Two distinct problems.

Trap 3

0-RTT on POST/mutations — 0-RTT early data is replayable. Safe for idempotent GETs only. Never use for booking POSTs, form submissions, payments.

Trap 4

Brotli level 11 for dynamic responses — 100× slower than gzip. Pre-compute for static assets; use gzip 6 for SSR/API. Claiming Brotli is always better ignores the CPU cost.

Trap 5

"Switch to H3 to fix LCP waterfalls" — waterfalls are sequential dependencies, not protocol overhead. H3 speeds each hop; it can't collapse a chain of useEffect→fetch→render→image. Fix: SSR data colocation.