Web performance

Latency is a chain

A small download can still feel slow when the browser must wait through several dependent round trips.

Inspired by High Performance Browser Networking by Ilya Grigorik. This is an original explanation, not a reproduction of the text.

The idea

Bandwidth describes how much data a connection can move over time. Latency describes how long data takes to travel. Both matter, but they hurt in different ways. A larger pipe helps when transferring a large object. It cannot erase the waiting built into a sequence of dependent requests.

Imagine that a browser must discover an address, establish a secure connection, request some HTML, parse it, and only then discover a stylesheet needed to display the page. Even when every file is tiny, each dependency can add another wait. The critical question is not only “How many bytes?” but also “What must finish before the next useful thing can begin?”

Make it concrete

A news page loads a 12 KB HTML document, which references a stylesheet. That stylesheet references a font. Compressing the font saves bytes, but the browser still discovers it late. Preloading the font or avoiding it for the first view can remove a link from the critical chain and make text appear sooner.

Optimize the waits that block progress

Open a network waterfall and trace backward from the first useful screen. Look for resources that were discovered late, redirects, repeated connection setup, or requests that block rendering. Start with the longest dependent path, because ten independent requests can overlap while three sequential ones must wait for one another.

Keep this: Page speed is shaped by dependency depth as well as byte count; shorten the chain that blocks the user’s next useful moment.

Try it

Inspect one slow interaction. Name the three requests that must happen in sequence before it becomes useful. Which dependency could you remove, start earlier, or make unnecessary?