Cumulative Layout Shift (CLS)

Every time a visible element changes position between frames without a recent user input, the browser records a layout shift score = impact fraction × distance fraction. Impact fraction is the share of the viewport covered by the unstable elements (before and after positions combined); distance fraction is the largest distance moved divided by the viewport’s largest dimension.

Shifts are grouped into session windows: bursts separated by less than one second, capped at five seconds each. The page’s CLS is the score of the worst window, not the sum over the whole visit. That change (made in 2021) stopped long-lived single-page apps from being punished just for staying open.

• Images and videos without dimensions. Add width and height attributes (the browser derives the aspect ratio) or CSS aspect-ratio.
• Ads, embeds and iframes. Reserve the slot with min-height matching the most common creative size; don’t collapse the slot if no ad fills.
• Late banners (cookie consent, app promos, “free shipping” bars) inserted above content. Overlay them, or put them at the bottom.
• Web fonts swapping in with different metrics. Use size-adjust, ascent-override and friends on the fallback @font-face, or font-display: optional.
• Animations using top/left/height. Animate transform instead; transforms don’t count as layout shifts.

Lighthouse only sees shifts during the initial load, without scrolling or clicking. Real users scroll into lazy-loaded embeds and infinite feeds, so field CLS is often higher. If your lab CLS is 0 but the field says 0.2, look at what happens after load: scroll-triggered content, sticky headers that change height, and carousels.