The Stonemason's First Unfilled Joint: On the Deceptive Strength of a Perfectly Set, Yet Unmortared, Wall
There is a piece of advice so deeply embedded in the gospel of web performance that it is recited without question: lazy-load all images. It’s presented as an unalloyed good, a pure win. Defer what is out of view, speed up the initial load, save data. The logic is seductive in its simplicity. But like a stonemason who carefully selects each stone for its perfect fit yet neglects to mix the mortar, we are building interfaces that appear solid but are structurally fragile. We’ve prioritized the initial impression of speed over the actual experience of it.
The core failure of universal lazy-loading is its assumption that network is the only constraint. We optimize for the first moment the page paints, celebrating a pristine Lighthouse score, while quietly sacrificing the moments that follow. A user, intrigued by your content, begins to scroll. Their momentum is met not with a seamless flow of information, but with a sudden, jarring series of halts. Blank spaces appear where images should be. A spinner flickers, the low-resolution placeholder shudders and is replaced. This is not fast. This is interrupted.
This is the unmortared joint. Each lazy-loaded image is a tiny, unpredictable point of failure and delay. The user’s browser must now execute JavaScript, calculate intersection, initiate a new network request (complete with DNS lookup, TLS handshake, and TCP slow-start), and then process the decode and render—all while the user is actively waiting. We have taken a single, predictable blocking event at page load and shattered it into a dozen smaller, less predictable blocking events distributed across the user’s journey. We traded a single, larger upfront cost for a subscription plan of micro-frustrations.
The counterintuitive truth is that for critical content—especially the images immediately adjacent to the initial viewport—eager loading is often the more performant choice. Not for the machine, but for the human. It allows the browser to leverage its full network capacity early, in parallel, during the initial idle period after the main thread is freed. The image arrives before the user even asks for it, making the subsequent scroll feel instantaneous, frictionless, and strong. The mortar is set.
This isn’t an argument to abandon lazy-loading entirely, but to apply it with the precision of a craftsperson, not the blanket mandate of a dogma. It is a tool for truly ancillary content, for images far down the page. For the hero, the logo, the key product shot? Load them. Build a wall that doesn’t just look complete from the road, but that can bear the weight of a real person leaning against it.
Notes & further reading
A few pages I came back to while writing this:
- The Watchmaker's First Unregulated Escapement: On the Erratic Tick of a Perfectly Crafted, Yet Unadjusted, Mechanism
- The Carpenter's First Unbraced Joist: On the Silent Tremor of a Perfectly Placed, Yet Unsupported, Load
- The Blacksmith's First Unquenched Blade: On the Brittle Edge of a Perfectly Forged, Yet Unhardened, Asset