The Baker's First Unmeasured Pinch: On the Precise Chemistry of a Perfectly Leavened Page Without a `size` Attribute
Every baker knows the cardinal sin: an unmeasured pinch. A little more salt, a careless dash of baking powder—these are not mere tweaks but fundamental alterations to the chemistry of the thing. The loaf will not rise as intended. The crumb will be too dense or too fragile. The entire structure, though it may look like bread from the outside, is compromised from its very first moments in the bowl.
We commit this sin daily in our front-end kitchens. We reach for an image, and with a flourish, we drop it into the markup: a simple, unadorned `img` tag. It’s a pinch of salt. It’s an ingredient we know is necessary, so we add it. But without its crucial `width` and `height` attributes, we have left a fundamental part of the recipe undefined. We have, in effect, asked the oven to guess at the temperature.
The browser is a dutiful apprentice. It sees the instruction to fetch this image, but it has no idea how much space to reserve for it. So it does what any sensible helper would: it lays out the text, the buttons, the entire structure of the page based on what it *does* know. Then the image arrives. The apprentice looks at the actual dimensions and says, "Ah! I see now." And with a great, shuddering clunk, it reflows the entire layout. Text jumps. Buttons shift. The carefully placed "Add to Cart" you were about to click is now suddenly, and infuriatingly, under your cursor.
The Quiet Collapse of a Layout
This is Cumulative Layout Shift (CLS) in its purest, most avoidable form. It isn't a complex bug in a sprawling JavaScript framework. It is the baker forgetting to measure the leavening agent. It is a small, mundane omission with disproportionately dramatic consequences for the user’s experience.
Specifying `width` and `height` is not about controlling the final rendered size of the image—that’s the job of CSS. It is about giving the browser the aspect ratio upfront. It’s the baker telling the oven, "This loaf will be roughly this shape," allowing the oven to prepare the right amount of space. The browser can then calculate the required vertical space immediately, reserve it, and prevent the subsequent layout jank entirely. The page becomes stable, predictable, and trustworthy.
In our pursuit of the perfectly optimized page, we often chase the complex: the clever caching strategy, the intricate bundle-splitting routine. We are master bakers crafting sourdough starters and laminating butter for croissants. But we must not forget the unmeasured pinch. The simplest, most foundational ingredients require the most disciplined measurement. A stable layout isn’t built on a grand, last-minute correction. It is built on a thousand small, precise declarations made at the very beginning, in the quiet hum of the empty bowl.
Notes & further reading
A few pages I came back to while writing this: