Performance
Cumulative Layout Shift
Also called CLS.
Cumulative Layout Shift is a score for how much visible content unexpectedly moved while the page was open. It is unitless: each shift is impact fraction times distance fraction, grouped into session windows, and the worst window is reported.
How it is measured
Chrome records layout-shift entries through the Layout Instability API. Shifts within 500 ms of a user input do not count. Shifts group into windows of up to 5 seconds with gaps under 1 second, and the largest window becomes the page's CLS.
Good is 0.1 or lower at the 75th percentile, poor is above 0.25. Lab tools only see shifts that happen during their scripted load, so late ads and consent banners often show up only in field data.
Worked example
A news article loads with no reserved space for the top banner ad. The ad arrives at 1,800 ms and pushes the headline down 250 px on a 800 px tall viewport: impact 0.55, distance 0.31, a shift of about 0.17 on its own. A cookie bar adds another 0.05. Lighthouse shows CLS 0.02 because it never saw the ad, while field p75 is 0.24.
Setting `min-height` on the ad slot and giving the cookie bar a fixed overlay position brings field CLS down to 0.03.
How it differs
Cumulative Layout Shift measures stability. Core Web Vitals is the group it belongs to, alongside LCP and INP. Page speed describes how fast things appear, while CLS describes whether they stay put. A page can be fast and still score badly if everything jumps after load.
Common errors
Images and iframes without width and height. Injecting banners above existing content. Web fonts that swap with different metrics. Animating with top and left instead of transform. Testing only the initial viewport in a lab run. Forgetting that a SPA route change can add shifts that Lighthouse does not see.
In practice
Record the field CLS for your top templates and look for the shift sources in DevTools with the Layout Shift Regions overlay. Reserve space for ads, embeds, and banners, set image dimensions, and use `font-display` with a size-adjusted fallback.