What is Cumulative Layout Shift (CLS)?

Cumulative Layout Shift (CLS), explained

web.dev defines CLS as the largest burst of layout shift scores for every unexpected layout shift during the whole life of a page. Shifts are grouped into session windows: a window continues while shifts happen less than one second apart, up to a maximum of five seconds, and the worst window is your CLS. Each shift's score combines how much of the viewport moved and how far it moved.

The thresholds are 0.1 or less for good and more than 0.25 for poor, at the 75th percentile of page loads on mobile and desktop. Shifts that happen within 500 milliseconds of a user interaction, like a click that opens a menu, are excluded, because users expect the page to change when they act.

The causes are well known. Images and videos without width and height attributes, so the browser doesn't reserve space before they load. Ads, embeds and iframes that resize after loading. Web fonts that render larger or smaller than the fallback font. Content injected above existing content, like cookie banners or promo bars pushed in at the top. Animations that change top or height instead of using CSS transform.

Fixes mostly mean reserving space. Set dimensions or an aspect-ratio on every image and embed. Give dynamic slots a minimum height. Overlay banners instead of inserting them. Use transform for animations. Match fallback fonts to web fonts with size adjustments. Frameworks help: Next.js's image component requires dimensions for exactly this reason.

Why it matters for founders

Layout shift makes people click the wrong thing, which is infuriating on a pricing or signup page. It's also usually the easiest Core Web Vital to fix.

Example

A cookie banner slides in at the top and pushes your hero down 80 pixels after load. You make it a fixed overlay at the bottom of the screen, and CLS drops from 0.3 to near zero.

Common mistakes

• Images and embeds without dimensions.
• Banners inserted above content after load.
• Animating layout properties instead of transforms.
• Web fonts that reflow text when they swap in.