What is Cumulative Layout Shift (CLS)?

Cumulative Layout Shift (CLS) measures how much visible content moves unexpectedly while a page is open. Each unexpected shift gets a score from how much of the screen moved and how far; CLS is the largest burst of shifts during the visit. A good CLS is 0.1 or less; over 0.25 is poor. It is the visual stability metric of the Core Web Vitals.

What causes layout shifts?

• Images, videos and iframes without width and height, so the browser cannot reserve their space.
• Ads, cookie banners and embeds that load late and push content down.
• Web fonts that swap in at a different size from the fallback font.
• Content injected above what the reader is already looking at.

Shifts within half a second of a user’s tap or keypress don’t count, because the user expects the page to change.

How do you fix CLS?

• Always set width and height (or a CSS aspect-ratio) on images and video.
• Reserve fixed space for ad slots and embeds, even before they load.
• Show banners as overlays, not by pushing the page down.
• Match fallback font metrics to your web font, and preload key fonts.
• Animate with transform rather than properties that change layout, such as top or height.

<img src="/chart.png" width="800" height="450" alt="Monthly clicks chart">

Example

A reader goes to tap “Read more” and an ad loads above it, pushing the button down so they tap the ad instead. That is the experience CLS measures. Giving the ad slot a fixed height removes the shift.

Related: LCP, INP.