Networking & Protocols
Putting it together: trace and optimise a full page load
You have studied every layer in isolation. The capstone is to hold the whole stack in one view: take a real page load, decompose it into DNS, TCP/QUIC, TLS, HTTP, CDN, and render, find where the time actually goes, optimise each layer with the right lever, and prove every win with a measured before/after — not a guess.
Turn the track’s mental model into a reproducible end-to-end engineering loop: capture a full waterfall, attribute every millisecond to a layer, apply the highest-leverage lever at each one (eliminate round-trips before shortening them), and verify the page is faster and more resilient with numbers.
Take one real page load (your own app, or a site you control end-to-end including its CDN and origin) and drive its cold-cache LCP and TTFB down by attacking the network stack layer by layer — DNS, TCP/QUIC, TLS, HTTP, CDN, and the render path — proving each improvement with a captured measurement.
- A before/after waterfall table broken out by phase (DNS, TCP, TLS, TTFB, download, LCP, CLS) for both a cold and a warm load — measured under the same conditions, not estimated.
- Cold-cache LCP and/or TTFB improved by a stated margin, with the dominant baseline phase visibly shrunk in the after capture, and CLS held at or below 0.1.
- Evidence that round-trips were eliminated, not just shortened: a warm-visit waterfall showing DNS sub-millisecond, TCP/TLS at zero (pooled or resumed), and a CDN cache HIT serving the document.
- A one-paragraph write-up naming the lever applied at each layer and why it was the highest-leverage choice for that phase — explicitly distinguishing levers that removed round-trips from levers that merely shortened spans.
- Instrument the same request path with OpenTelemetry and W3C Trace Context so the browser, CDN edge, and origin appear as distinct spans in one waterfall; confirm the trace localises the largest span to the same layer your manual analysis found.
- Add a resilience layer: put a circuit breaker plus a bulkhead on one origin dependency, then inject a 5 s slowdown into it and show the rest of the page still loads from cache and isolated thread pools while the slow path fails fast.
- Reproduce a QUIC connection migration: load a streaming asset over HTTP/3, change the network (WiFi to tethered cellular), and show via qlog that the connection survived via the Destination Connection ID instead of reconnecting — and confirm your load balancer routes by connection ID.
- Add a CI performance budget (Lighthouse CI or size-limit) that fails the build if LCP, TTFB, or the JS bundle regress past the targets you achieved, so the wins cannot silently erode.
This is the loop you will run on every real slow-page incident: capture the full waterfall first, attribute every millisecond to a layer, then apply the highest-leverage lever at each one — eliminate round-trips (edge cache, pooling, resumption, 0-RTT) before shortening them, fix the render path so the LCP element is discovered early, and verify with before/after numbers under identical conditions. Adding the stretch tracing and resilience work turns the toy exercise into the production muscle memory of seeing the whole stack as one system that you can measure, optimise, and defend.