Interactive capstone breaking a page load into seven phases with warm/cold waterfall timings and links to deep guides on DNS, TCP, HTTPS, HTTP, LB, CDN, and caching.
Key Takeaways
Seven phases: URL parse, DNS, TCP handshake, TLS handshake, HTTP request, server hop (LB/app/DB), and browser render. Cold path adds ~100-200 ms preamble.
Render (phase 07) is the largest single time bucket; first six phases combined often finish under 200 ms.
Phase 06 server-side work – cold DB caches, N+1 queries, hot keys, slow downstream calls – is where most production p99 latency hides.
TLS 1.3 with session resumption enables zero-RTT; the handshake and GET request fly together, collapsing what was once two round trips.
Optimization priority should follow the waterfall: read Chrome DevTools Network panel first, attack the biggest bar, not the easiest one.
Hacker News Comment Review
Discussion is minimal with no substantive technical debate about the content itself.
One commenter flags a UX copy issue: “Press Play to scrub” misuses the term “scrub” as it applies to timeline navigation.
