Layout Shift Prevention
Layout shift prevention reserves space for async content — images, ads, fonts — before it loads, so the content does not push the layout when it arrives and the CLS stays at zero.
Definition
Layout shift prevention is the set of techniques — width and height attributes, aspect-ratio CSS, min-height reservations, font-size-adjust — that reserve the space async content will occupy before it loads, so that when it arrives the layout does not reflow and the cumulative layout shift stays at zero.
Context and scope
Applied in image-heavy pages, ad slots, dynamic content, and any page where content loads after the initial paint and a shift would degrade the experience.
Common misconceptions
- Reserving space is just setting dimensions — it is setting dimensions for every async element, including fonts and ads, which are often missed
- CLS only matters on mobile — it matters on every viewport; a shift on desktop is still a shift that degrades the experience
Anti-patterns
- Omitting dimensions on images, so each image load reflows the content below it
- Injecting an ad slot without a reserved size, so the ad pushes the content when it loads
Related concepts
Authoritative source
What it is
Layout shift prevention is the set of techniques — width and height attributes, aspect-ratio CSS, min-height reservations, font-size-adjust — that reserve the space async content will occupy before it loads, so that when it arrives the layout does not reflow and the cumulative layout shift stays at zero. Applied in image-heavy pages, ad slots, dynamic content, and any page where content loads after the initial paint and a shift would degrade the experience. The browser is a hostile, shared, single-threaded (for JS) environment where every millisecond of main-thread work is a millisecond the user cannot interact.
How it works
The rendering pipeline — style, layout, paint, composite — is incremental and can be invalidated by any DOM change. Performance work targets avoiding the expensive phases (layout, paint) and scheduling the rest in idle callbacks or off the main thread. Loading work orders resources by their impact on the critical path: render-blocking scripts are deferred, images get fetch priority, and the server pushes what the client will need next.
When to apply and pitfalls
Apply when user interaction latency or load performance has a measured business impact. The pitfall is micro-optimizing a function while the page ships a megabyte of render-blocking JavaScript — the dominant cost is structural, not algorithmic. Another is measuring in the ideal lab profile and missing the long-tail devices and networks where most users actually live.