The Mason's First Unaligned Trowel: On the Uneven Settling of a Cumulative Layout Shift
There is a particular frustration known to anyone who has laid tile or brick. It’s the moment you step back to admire your work and notice it: a single tile, set a fraction of an inch too low. It wasn’t wrong when you placed it; the mortar was wet, the bed was level. But as the materials beneath it settled and shifted, that one piece sank just enough to create a trip hazard for the eye, a tiny tectonic plate shifting the entire geography of the wall. The work is technically complete, yet it feels fundamentally unstable.
This is the precise sensation of a Cumulative Layout Shift (CLS) on the web. It is not a failure to load, nor is it a sluggish delay. It is a failure to remain still. It is the experience of focusing on a paragraph of text, only to have the ‘Subscribe’ button suddenly drop from the top of the viewport and land squarely on the sentence you were reading. Your cursor, once hovering over a link, is now hovering over an advertisement. The page, like that uneven tile, has settled after the fact.
The culprit is almost always a mundane, overlooked object, the digital equivalent of an air pocket in the mortar: an image without dimensions, a font that flashes in before its fallback is swapped out, a third-party ad or widget that injects its content on a delay. These elements are the unmortared bricks of the front-end. The browser renders the initial layout based on what it knows, but when these late-arriving assets finally report for duty, they demand their share of the page’s real estate. The browser, ever the obedient servant, redraws everything to accommodate them, shoving existing content aside.
Fixing this is a craft of anticipation. It is the mason ensuring his bed is perfectly level and his mortar mix is consistent. For us, it is the simple, declarative act of providing width and height attributes on our images, carving out the precise space they will occupy before they ever arrive. It is about defining aspect ratio boxes in CSS, creating placeholders that hold their ground. It is about the careful use of `font-display: optional` or `swap` with appropriate fallbacks, ensuring text remains a constant measure. It is about reserving space for dynamic content, even when it’s empty, because we know something will eventually live there.
A low CLS score isn’t just a good metric; it is a promise of stability. It tells the visitor that the ground beneath their cursor will not suddenly give way. It is the quiet satisfaction of a wall built true, where every element is set plumb and level, and the final form is exactly as it first appeared—solid, reliable, and immovable.
Notes & further reading
A few pages I came back to while writing this: