Cumulative Layout Shift
CLS aggregates every unexpected layout movement of visible content across the page lifetime, scoring impact by displaced area and distance; user intent movements do not count.
Definition
Cumulative Layout Shift is the sum of layout shift scores for every unstable element that moves between frames without user input triggering it. Each score multiplies the fraction of viewport affected by the movement distance. Input-adjacent shifts within a short window are excluded as intent-driven, and shifts are session-windowed to bound bursts.
Context and scope
The stability input of Core Web Vitals. Driven by unsized media, late fonts, injected banners, and async content replacing placeholders.
Common misconceptions
- All layout change is bad CLS — shifts within 500ms of user input are treated as intentional and excluded
- Reserving space fixes everything — placeholders must match final geometry, including fonts and aspect ratios
- CLS happens only at load — any moment of the page lifetime counts, including late chat widgets and infinite scroll inserts
Anti-patterns
- Shipping images and embeds without width and height or aspect-ratio, guaranteeing reflow on arrival
- Injecting cookie banners and chat bubbles above content instead of overlaying them
- Animating layout properties like top or width for real content movement and feeding the score with every frame
Related concepts
Related examples
Authoritative source
What it is
A shift is scored when visible content moves without the user causing it: viewport fraction times maximum distance ratio. CLS sums these, using a session window so one bad burst dominates the report rather than accumulating forever. Mis-taps on moving buttons are the user-facing harm.
How it works
The layout instability API reports each shift with the elements and distances involved. Shifts following discrete input within the exclusion window are attributed to intent. Attribution tooling in devtools highlights the exact nodes and often the image, font, or script responsible.
When to optimize
Whenever users interact with content that might move: reading flows, forms, e-commerce listings. Reserve media dimensions, metric-match font fallbacks, and give async sections skeleton geometry that matches final size.
Pitfalls
Placeholder-to-content size mismatches shift twice: shrink the placeholder, grow the content. Dynamic insertion above the fold is the worst offender. Server-side injection of banners mid-stream causes a shift no client trick can hide — fix at the template level.