CLS (Cumulative Layout Shift)

What is CLS?

Cumulative Layout Shift (CLS) measures the total amount of unexpected visual movement (layout shifts) that occurs during a page's lifecycle. A layout shift happens when a visible element changes position on the page without user interaction — for example, when an ad loads and pushes the text content down, or when a font swap causes text to reflow. CLS quantifies how much content moves and how far it moves, producing a score where lower is better.

Google's thresholds: CLS under 0.1 is "good," 0.1-0.25 "needs improvement," and over 0.25 is "poor." CLS is calculated using "session windows" — groups of layout shifts that occur within 1-second windows, with the worst session window determining the final CLS score.

Why It Matters for Publishers

CLS is the Core Web Vital most directly impacted by advertising. Ads are one of the biggest causes of layout shifts on the web because they load asynchronously — after the page content has already rendered — and inject elements of varying sizes into the page. When an ad loads and takes up space, everything below it shifts downward. When an ad loads in a container that doesn't match the ad's actual size, the container resizes, causing a shift.

Poor CLS is also one of the most frustrating user experiences. Imagine reading an article and suddenly the text jumps because an ad loaded above your reading position. Or clicking a link and missing because a late-loading ad shifted the page. These experiences drive users away and increase bounce rates.

Tips for Optimization

• Reserve space for all ad units: Set explicit width and height on every ad container using CSS min-height. Even if you don't know the exact ad size, reserving a minimum space prevents the worst layout shifts.
• Use CSS aspect-ratio: For responsive ad containers, use the CSS aspect-ratio property to maintain proportional space while the ad loads, preventing shifts.
• Avoid dynamically injected ads above content: Ads that inject into the page above the user's current scroll position cause the most noticeable and frustrating layout shifts.
• Use sticky ads to avoid shifts: Sticky ads that overlay content rather than pushing it don't cause layout shifts because they don't change the position of other elements in the document flow.
• Collapse empty ad slots gracefully: If an ad fails to load, don't suddenly collapse the reserved space (that's also a layout shift). Either leave the space reserved or use an animation/transition that doesn't count as a layout shift.