The Potter's First Uncentered Wheel: On the Unseen Pull of a Layout Shift During Interaction
We speak often of the jarring visual jump of an image loading late, a banner ad snapping into place, or a font swapping in. We’ve learned to measure these instabilities, these Cumulative Layout Shifts (CLS), and we work diligently to banish them from the initial pageload. But there is a subtler, more pernicious instability that occurs not in the passive act of viewing, but in the active moment of engagement. It is the shift that happens not while the page is settling, but while the user is clicking.
Consider a potter at a wheel. The clay is centered, the form is beginning to rise. The potter applies pressure, and in that exact moment, the wheel itself shifts minutely. The vessel wobbles, the rim tears. The intention of the action is betrayed by the instability of the foundation. This is the experience of clicking a button or a link only to have the entire page content lurch downward a fraction of a second before the click registers, causing you to miss your target and activate something entirely different.
This specific failure of layout stability is a special kind of betrayal. It breaks the fundamental contract of interaction: that a UI element, once presented, will remain stable under intent. The cause is often not a lazy-loaded hero image, but a resource that loads or a component that renders as a direct result of the user’s action. A script that populates a dropdown, a font that finally applies to a newly focused input field, a related items panel that fetches and draws itself—any of these can change the geometry of the page in the critical milliseconds between a mouse-down and a mouse-up event.
The browser’s CLS metric, focused on the initial viewport, can sometimes miss this. It measures the unexpected, but this shift is often a direct, if poorly timed, consequence of an expected action. The user asked for something to happen, and the page obliged—it just did so with a violent clumsiness that ruined the intended result.
Fixing this requires a craftsperson’s attention to the entire sequence, not just the initial state. It means understanding the dependency chain of an interaction. It means strategically preloading the fonts for a search bar that appears on focus. It means reserving the space for a dropdown before its data even arrives, or ensuring that any dynamically injected content does so in a way that expands the page downward, not upward into the cursor’s path. It is the work of anticipating the consequence of an action and building a stable stage for it to play out on. The goal is not just a stable page, but a stable conversation.
Notes & further reading
A few pages I came back to while writing this: