Cumulative Layout Shift (CLS)
A score for how much content jumps around across the whole visit, not just the load. Under 0.1 passes; if you notice it, it is too high.
See it
What it is
CLS scores how much visible content moves without you asking it to. Each shift is scored as the fraction of the screen affected times how far it moved, and the metric reports the worst 5 second burst of shifts, not the whole-page total. Under 0.1 passes, over 0.25 fails. Shifts within 500ms of a qualifying user input are excused, which is why opening an accordion mostly gets a pass. Only mostly, though: a long animation runs past that 500ms window, and every frame after it counts again.
The usual culprits are boring and repeatable: images and iframes without dimensions, ad and embed slots that size themselves after load, cookie banners injected above the content, late-arriving web fonts whose metrics differ from the fallback, and animating top or left instead of transform. Fix them by reserving the box in advance: width and height attributes, aspect-ratio, min-height on dynamic slots, size-adjust on the fallback font.
Gotcha: CLS keeps accruing for the whole page lifetime, so an infinite scroll feed or a route change that reflows content can wreck a score that looked perfect on first load. And it barely shows up in lab tests because Lighthouse never scrolls, never gets a slow ad, and never waits for the third-party chat widget.
Ask AI for it
Eliminate layout shift on this page. Add explicit width and height attributes (or aspect-ratio) to every img, video, iframe, and embed; reserve a fixed min-height for ad slots, banners, and any async-injected UI so nothing pushes content down; render cookie and promo bars as overlays or reserve their space in the initial HTML; use font-display: swap with a size-adjust and ascent-override tuned fallback so the swap does not reflow text; and animate only transform and opacity, never top, left, width, or height. Target CLS under 0.1 including after scrolling and client-side navigation.