The Sculptor's First Un-anchored Base: On the Silent Topple of a Perfectly Optimized Page Without a `loading=eager`

In the grand cathedral of modern front-end doctrine, the lazy-loaded image is a sacred relic. We genuflect at the altar of `loading="lazy"`, preaching its gospel of reduced initial load times and bandwidth salvation. It has become received wisdom, an unassailable truth: lazy-load everything below the fold. But like any dogma applied without nuance, this one has a brittle edge. In our zeal to optimize, we’ve quietly chiseled away at a fundamental pillar of user experience: the certainty of a stable, complete layout.

The promise is seductive. Defer what the user can’t immediately see, let the main content paint, and then quietly fetch the rest. It’s a performance win on paper. But paper doesn’t scroll. Paper doesn’t have a user who, upon landing, immediately drags their thumb down the screen. What they encounter isn’t a seamless progression of content, but a chasm—a block of empty space where an image should be, followed by a sudden, janky reflow as that image finally arrives and snaps into place. The page, for a moment, becomes a liar. It presents a layout it cannot yet hold.

This is the silent topple. We’ve spent hours fine-tuning our CSS, ensuring our CLS scores are pristine, only to introduce a new form of instability through our very optimization. The user’s focus is broken, their scroll momentum stolen. They aren’t thinking about our excellent LCP; they’re thinking the page is broken, or that their connection is faltering. The perceived performance, the feeling of quality, plummets.

The heresy, then, is this: sometimes, you must eager-load. The critical image just below your hero section, the primary product photo in an e-commerce listing, the key diagram in an article—these are not lazy candidates. They are part of the initial narrative. To defer them is to build a sculpture on an un-anchored base; it looks perfect until the slightest interaction reveals its fundamental instability.

This isn’t a call to abandon lazy-loading. It’s a call for craftsmanship. It demands we look up from our Lighthouse reports and actually use our pages. Scroll through them. Feel the experience. Identify the moments where a reflow would be most jarring and anchor those elements with `loading="eager"`. It’s a conscious, deliberate choice, a trade-off that prioritizes user perception over a raw metric. Because a fast page that feels broken is, in the most human sense, slower than a slightly heavier page that feels solid, stable, and true from the very first moment.

Notes & further reading

A few pages I came back to while writing this: