Cumulative Layout Shift(CLS)

Long definition

CLS quantifies visual instability — elements jumping around the page unexpectedly, making you click the wrong thing or lose your place. It's the one Core Web Vital that doesn't care about speed at all; a slow page can have perfect CLS if nothing moves.

A single layout shift contributes impact_fraction × distance_fraction to the total. impact_fraction is the union of the element's old and new positions as a fraction of the viewport; distance_fraction is how far it moved, normalized by viewport size. Shifts that happen within 500 ms of a user input are excluded (they're presumed intentional).

CLS uses session windows: shifts within 1 second of each other, up to a 5 second cap, are grouped into one window. The page's CLS is the maximum-scoring window. This stops long pages from accumulating an unfair total over a multi-minute visit.

The classic causes, in order of how often they bite:

1. Images without width/height attributes or CSS aspect-ratio — browser doesn't reserve space; content reflows when image loads.
2. Ads, embeds, iframes that inject after initial paint with no reserved container.
3. Web fonts loading and reflowing text (mitigate with font-display: optional or matched fallback metrics via size-adjust).
4. Late-inserted DOM (banners, cookie notices, "subscribe" prompts).

Common misconceptions

• "CLS only matters on mobile." CLS is measured the same way on desktop. Desktop shifts often come from asynchronously loaded ads or chat widgets.
• "Setting width/height is enough." You need either HTML attributes (<img width="800" height="600">) OR CSS aspect-ratio. Without one, the browser can't reserve space before the image loads.
• "CLS resets on SPA route changes." It does — INP and CLS are reset on soft navigations. But content that shifts within a route still counts.
• "A cookie banner at the top of the viewport doesn't shift anything — everything below just moves down." Exactly, that's the problem. Fix: reserve the banner space with a placeholder div, or render it below the fold initially.