Cumulative Layout Shift

How the score works

CLS multiplies two fractions for every unexpected shift: layout shift score = impact fraction * distance fraction. The impact fraction is how much of the viewport the moving elements touched between frames; the distance fraction is how far they traveled relative to the viewport’s largest dimension. Google then sums the shifts inside the worst “session window” (shifts less than 1 second apart, capped at a 5 second total) and reports that number.

Say a cookie banner drops in after render and shoves an article down 30% of the screen while affecting half the viewport. That single shift can blow past the 0.1 threshold, so a reader tapping a link ends up hitting the wrong element.

The usual culprits are predictable: images and video without width and height, ads and embeds with no reserved space, late-loading web fonts that swap and reflow, and content injected above what the user is already reading. Fixes are just as concrete. Set explicit dimensions or aspect-ratio on media, reserve space with min-height for ad slots, use font-display to control font swaps, and animate with transform instead of properties like top or left, since transform animations do not count toward CLS.

Thresholds, measured on real Chrome users at the 75th percentile: 0.1 or less is good, 0.1 to 0.25 needs improvement, above 0.25 is poor.