What is Cumulative Layout Shift (CLS)?
Cumulative Layout Shift — CLS — measures how much stuff jumps around on the page after it starts loading. You've felt this: you go to tap a button, an ad loads above it, the whole page slides down, and you tap the wrong thing. That's a layout shift, and CLS is the quantification of it.
Unlike LCP (measured in milliseconds) and INP (also milliseconds), CLS is a dimensionless score — literally a number that grows from 0 upward as the page shifts during the user's session window.
Thresholds
- Good: 0.1 or less
- Needs improvement: 0.1 to 0.25
- Poor: over 0.25
A score of 0 means nothing moved during load. A score of 0.5 means half the viewport area shifted — which is visually chaotic.
How it's calculated
CLS = impact fraction × distance fraction for each unexpected shift, summed across session windows.
- Impact fraction — what portion of the viewport the shifted element covered, before and after the shift
- Distance fraction — how far the element moved, as a portion of the viewport
The total is clamped per session window (5 seconds of activity, up to 1 second between shifts). The reported CLS is the worst window during the page visit.
User-initiated shifts don't count — if the user clicks "Load more" and content appears, that's expected and Chrome excludes it for 500ms after any input.
Common causes
Images and iframes without dimensions. The browser reserves zero height until the resource loads, then pushes everything below it down.
Web fonts that swap mid-render. Text in a fallback font has different metrics than the final font. When the custom font loads, every affected line shifts.
Ads, embeds, and widgets that inject content. Ad networks are the biggest offender — ads often load after 1–2 seconds and shove content around.
Late-arriving content from JavaScript. "Cookie banner loads after 800ms and pushes content down."
CSS animations that change layout. height: auto transitions, dynamically inserted elements, etc.
Fixes
Always specify width and height on <img>, <video>, <iframe>. Even if you use responsive CSS. The aspect ratio tells the browser to reserve space before the resource loads.
Reserve space for ads. Give every ad container a fixed min-height matching the ad unit. If it loads smaller, you have a small empty space — far better than a layout shift.
Use font-display: optional or preload critical fonts. optional tells the browser to use the fallback if the web font doesn't arrive within 100ms. preload gives the browser a head start so swap happens before LCP.
Size embeds with aspect-ratio boxes. For YouTube, Twitter, Instagram embeds — wrap them in a padding-top: 56.25% aspect-ratio container so the space is reserved.
For cookie banners, popups, and banners — render them at the top/bottom (not in the middle of content), or use position: fixed so they don't push anything.
Transition transform and opacity, not height or width. Animations on layout properties cause shifts; animations on compositor properties don't.
Debug workflow
- Open PageSpeed Insights for the page
- Scroll to the "Cumulative Layout Shift" diagnostic
- It will show the specific elements that shifted and by how much
- Apply the fix to the worst offender, re-run
Nine times out of ten it's one image without dimensions or one ad container without reserved space.
By Paulo de Vries · Published