Cumulative Layout Shift (CLS): what it is & how to fix it

Thresholds measured at the 75th percentile of page loads, per Google’s web.dev guidance.

How a layout shift is scored

Each unexpected shift gets a score of impact fraction × distance fraction. The impact fraction is how much of the viewport the moving content covers, before and after the move combined. The distance fraction is how far it moved, relative to the viewport. Shifts that happen close together (less than 1 s apart, within a 5 s window) are added into one “session window”, and CLS is the worst window.

Late-loading banner calculator

Height of the element that loads late: 90 pxHeight of the content it pushes down: 360 pxHow many times it happens in the worst 5-second window: 1 Reserve the space in CSS (aspect-ratio / min-height)

impact 0.533 × distance 0.107 = 0.057 per shift

CLS 0.06 → Good

Viewport: 390 × 844 phone. Impact fraction = share of the viewport touched by the moving content before and after the move; distance fraction = how far it moved relative to the viewport height.

Common causes and fixes

Cause	Fix
Images and videos without dimensions	Add `width` and `height` attributes, or CSS `aspect-ratio`
Ads, embeds and iframes	Reserve the slot with `min-height` at its most likely size
Cookie banners and promo bars inserted at the top	Overlay them (position fixed) instead of pushing content down
Web fonts swapping in with different metrics	Tune the fallback with `size-adjust` / `ascent-override`, or preload the font
Content injected after an API call	Render a skeleton of the same size first
Animating `top`, `height` or `margin`	Animate `transform` instead, which never causes layout shifts

Questions people ask

What is Cumulative Layout Shift?

CLS measures unexpected movement of visible content while a page is open. Each shift is scored as impact fraction × distance fraction, shifts within a short burst are added up, and CLS is the largest burst (session window) in the visit.

What is a good CLS score?

0.1 or less at the 75th percentile. 0.1–0.25 needs improvement; above 0.25 is poor. CLS has no unit.

Do all layout shifts count?

No. Shifts within 500 ms after a click, tap or key press are excluded, because the user expects the page to change. Animations that use CSS transform also don’t count.

Why is my field CLS higher than Lighthouse CLS?

Lighthouse only watches the initial load. Real visitors scroll, which triggers lazy-loaded images, ads and embeds, and shifts from those only show up in field data.