The Stonemason's Settled Mortar: On the Unseen Labor of a Stable Viewport

I was reading a news article the other day, the kind with images and ads scattered throughout, when it happened again. My thumb, poised to scroll, twitched. The page jolted. A block of text I was about to read was suddenly displaced, shoved downward by a belatedly loading element from above. I lost my place, my focus shattered. It’s a small, modern annoyance, so common we barely name it. But it has a name: Cumulative Layout Shift (CLS). And the fight against it is less like the flashy work of a sculptor and more like the patient, foundational labor of a stonemason laying a wall.

A stonemason’s craft isn't just about the stones themselves—the clean lines of the images or the elegant curves of the fonts. It’s about the mortar. That gritty, unseen substance that fills the gaps, binds the pieces, and, most importantly, holds everything in its intended place. Without stable mortar, the grandest wall is untrustworthy; it shifts under pressure, its seams becoming points of failure. On the web, our viewport is that wall. Every image, every advertisement, every dynamically loaded comment is a stone. And the ‘mortar’ is the space we explicitly reserve for them.

We often obsess over how quickly the stones appear (the First Contentful Paint), but we pay less mind to whether they’ve settled. The core culprit of a shaky layout is almost always a resource without defined dimensions. An image that loads without a defined width and height attribute is like a stone delivered to the mason without a known size. The browser sees the empty space, renders the text around… nothing. Then the image arrives, and the browser has to rapidly recalculate and repaint the entire section, shoving the existing content aside. The user’s reading flow is broken. Their tap lands on the wrong button. The experience feels cheap, unstable.

The solution is deceptively simple, yet it requires a discipline that runs counter to a desire for fluid, ‘responsive’ design. It’s the discipline of declaration. It’s telling the browser, upfront, how much space a future element will occupy. Using width and height attributes on images, or using modern techniques like aspect-ratio in CSS, is the equivalent of the stonemason measuring and preparing the exact space for a stone before it’s even lifted. For embeds and ads, which are often the worst offenders, it means using reserved containers or placeholders. This isn’t restrictive; it’s respectful. It tells the user, “I have accounted for everything that is coming. Your place on this page is safe.”

This work is silent. When done perfectly, it’s invisible. A user will never finish an article and think, “What a wonderfully stable scrolling experience!” They’ll just have read the article, undisturbed. The mason’s mortar, once set, is forgotten, its strength taken for granted. But we, as builders, must champion this unseen labor. In a digital landscape vying for attention with constant movement and pop-ups, the most profound courtesy we can offer is a simple, steadfast promise: that the ground beneath a reader’s eyes will not suddenly give way.

Notes & further reading

A few pages I came back to while writing this: