The Grocer's Stacked Oranges: On the Stable Order of a Cumulative Layout Shift

There is a particular scene familiar to anyone who has visited a decent produce market. A pyramid of oranges, built with care upon a flat wooden crate. It is a small, unremarkable feat of engineering. Yet, watch for a moment, and you’ll see its true purpose. It is not built for the person who takes the first orange from the top, the act of a tidy mind. It is built for the person who, inevitably, pulls the second one from the middle.

When that central support is removed, the structure shifts. But it shifts in a specific, contained, and predictable way. The oranges above settle downwards and inwards; those to the sides roll gently to fill the new void. The pyramid changes, but it does not collapse. It does not send fruit cascading onto the sawdust floor. This is the art of the grocer: creating a display that can withstand inevitable, user-driven disruption without creating a chaotic mess.

The Settling Fruit of the Viewport

This is the precise craft we ignore when we think of Cumulative Layout Shift (CLS) as merely a metric to be gamed. It is not about eliminating all movement. It is about managing the physics of the viewport as deftly as the grocer manages his crate. When a slow-loading image finally appears, it is not simply ‘painted’. It pushes. It displaces the text below it, which shunts the following headline, which nudges the button someone was just about to click. Our carefully stacked content becomes a cascading spill of user frustration.

The grocer’s wisdom is in providing dimensions. The wooden crate has a fixed width and depth. The oranges have a known, consistent size. Before a single fruit is placed, the boundaries are set. In our medium, this translates to the most humble of acts: setting `width` and `height` attributes on an image, or using CSS aspect-ratio boxes. It means reserving space for an injected ad unit, even a stubbornly empty one. It is the acknowledgement that something *will* occupy this area, and that the elements around it must not be surprised by its eventual arrival.

But there is a second, subtler lesson in the pyramid. The structure is stable because each orange is in contact with its neighbors, offering mutual support. In our layouts, this is the integrity of the containing element. A sudden shift is catastrophic when it occurs in isolation—a lone, unsized image in a sea of flowing text. But when we group related elements within a defined container, a shift within that container is contained. The ‘oranges’ may resettle amongst themselves, but the crate, the module on the page, holds its ground. The overall layout commits.

We chase the perfect, instantaneous load, the untouched pyramid. But the web is not a static museum exhibit; it is a market, alive with interaction, with late-arriving data, with dynamic content. The true measure of our front-end craft is not in preventing all movement, but in designing for the graceful, expected settlement of elements. It is in building pages that, like a well-stacked crate, can have their middle pulled out without betraying the user’s trust. We must build not for the first click, but for the second, and ensure that when the page shifts, it does so with the stable, reliable order of settling fruit.

Notes & further reading

A few pages I came back to while writing this: