The Miller's Level Stone: On the Patient Foundation of a Cumulative Layout Shift

Behind the old town, where the river bends, there’s a mill that hasn’t ground flour in fifty years. Its wheel is still, but its foundation endures, anchored by a single, massive stone. For a century, that stone absorbed the shudder of the gears and the rush of the water, holding the entire structure perfectly plumb against a world of constant, gentle violence. It never moved. The miller’s entire craft, his guarantee of a smooth, consistent grind, depended on that one immovable object.

We have a similar responsibility in the browser, though our foundation is built of code, not granite. We call it Cumulative Layout Shift, or CLS. It is the measure of a page’s visual stability, the metric that quantifies how much your content jumps and shudders as it loads. That headline you’re about to click? It might suddenly lurch downward as an advertisement finally renders above it. The paragraph you’re mid-sentence in? It could be shoved aside by an image of unknown dimensions arriving late to the party. This is the opposite of the miller’s stone; it is the tremour of an unsettled house.

The miller knew his stone had to be set before a single timber was raised. He couldn’t lay the foundation after building the walls. In our craft, we often do the inverse. We build our beautiful interfaces, our clever components, and only later fret about the dimensions of the assets that will fill them. A font loads asynchronously, and the text reflows. A video embed pops into a space that wasn’t reserved for it. Social media widgets, analytics iframes, dynamic content—each a potential tremor in the user’s experience.

The discipline, then, is in pre-setting our own stones. It’s the quiet, unglamorous work of defining aspect ratios for images and videos with CSS, carving out the precise space they will occupy. It’s the insistence on including width and height attributes in our image tags, a simple instruction to the browser that says, “Hold this space; something important is coming.” It’s the strategic use of `font-display: optional` for secondary typefaces, making the deliberate choice to avoid a flash of unstyled text if it means avoiding a subsequent, jarring reflow. These are not afterthoughts; they are the first principles of a stable layout.

A low CLS score isn’t merely a green checkmark in a performance audit. It is the feeling of a page that respects the reader’s attention. It is the miller’s level stone, laid with patience and foresight. It is the assurance that once a word is read, it will stay put. This stability is a form of craft, a quiet promise to the user that the ground beneath their cursor will not suddenly give way.

Notes & further reading

A few pages I came back to while writing this: