Web Performance
Layout shift is layout shit
When an interface moves after someone has started reading, deciding, or tapping, it is not a tiny visual defect. It changes targets, breaks orientation, wastes attention, and makes the product feel unsafe.
The failure mode
The page moves. The user gets blamed.
A layout shift happens when visible content unexpectedly changes position between rendered frames. The most dangerous version occurs in the gap between a person choosing an action and physically completing the tap or click.
Before the late content loads
After the layout shifts
The person did not change their mind. The page changed which action occupied the same physical position.
Why it matters
Visual instability is a product problem
The browser may describe it as a rendering metric, but the consequences show up in usability, accessibility, trust, support costs, and commercial outcomes.
It changes the user's target
A person can aim at one control and activate another because the interface moved between seeing and tapping. In checkout, account, consent, and deletion flows, that can create genuinely harmful mistakes.
It breaks orientation
Readers lose their place, forms jump away from the keyboard, and controls appear to disappear. The user has to spend attention rebuilding a mental map of the page.
It makes the product feel unsafe
Visual stability is a trust signal. When content shifts without warning, even a technically secure product can feel improvised, unreliable, or manipulative.
It punishes real-world users
Layout shift often looks fine on a developer's fast connection and cached device. It becomes visible on slower networks, older phones, personalized pages, and third-party content in production.
Core Web Vitals
CLS gives visual stability a measurable threshold
Cumulative Layout Shift, or CLS, measures the largest burst of unexpected movement during a page visit. Google recommends evaluating the 75th percentile separately for mobile and desktop users.
Good
≤ 0.1
Needs improvement
0.1 to 0.25
Poor
> 0.25
A good score does not make every interaction good, and a bad score is not merely an SEO issue. CLS is useful because it turns a felt quality problem into something teams can observe, compare, and improve.
Common causes
Most layout shift is preventable
The recurring pattern is simple: the page paints before it knows how much space its content will need.
Media without reserved dimensions
Images, video, maps, and embeds arrive after surrounding content has already been placed, then push everything below them out of the way.
Late banners and injected UI
Cookie notices, promotions, alerts, ads, and personalized modules are inserted above existing content instead of occupying space reserved for them.
Font swaps that change geometry
A fallback font and the final web font can have different character widths and line heights, causing headings and paragraphs to reflow after rendering.
Loading states with the wrong shape
A tiny spinner is replaced by a large result, or a one-line placeholder becomes a multi-line card. The loading state did not preserve the final layout.
Layout-based animation
Animating width, height, top, left, or similar properties can move neighboring content. Transform and opacity usually create movement without recalculating the document layout.
Client rendering after an empty shell
The server sends too little structure, then JavaScript fills in navigation, account data, recommendations, or controls after the first paint.
Prevention checklist
Design the space before the content arrives
Stable interfaces come from treating geometry as part of the component contract, not as something the browser should improvise after loading.
- 1Give images and video explicit width and height, or reserve their shape with CSS aspect-ratio.
- 2Reserve stable slots for ads, embeds, alerts, personalization, and other content that may arrive late.
- 3Make skeletons and placeholders match the dimensions of the final component, not just its general vibe.
- 4Load critical fonts deliberately and reduce metric differences between fallback and final typefaces.
- 5Prefer transform and opacity for animation, and keep expected state changes visually connected to the user action.
- 6Measure CLS with real-user monitoring. Lab tests can miss shifts that happen after scrolling, interaction, or slow API responses.
References
Measure the experience users actually get
Field data matters because production content, device speed, network conditions, personalization, and third-party scripts can create shifts that never appear in a clean local test.