Cumulative Layout Shift (CLS): Causes and Fixes

Cumulative Layout Shift measures how much visible content moves unexpectedly while a page is in use. Google’s guidance is that pages should maintain a CLS of 0.1 or less at the 75th percentile of page loads (web.dev on Web Vitals). Unlike load-time metrics, CLS keeps counting for the whole life of the page, so a banner that slides in after ten seconds or an ad that expands on scroll is scored by the same formula as an image that loads without reserved space. The fixes for the causes below share one idea: reserve the space before the content arrives.

How CLS is calculated

web.dev defines CLS as “a measure of the largest burst of layout shift scores for every unexpected layout shift that occurs during the entire lifecycle of a page” (web.dev on CLS). Key details:

• Each shift gets a score: impact fraction (how much of the viewport the moving elements affect) multiplied by distance fraction (how far they move, relative to the viewport’s largest dimension).
• Session windows: shifts that happen in rapid succession, less than one second apart and within a five-second maximum window, are grouped. CLS is the score of the worst window.
• Expected shifts are excluded: shifts within 500 milliseconds of a user input are flagged as having recent input and do not count. Scrolling, dragging and pinch-zoom are not counted as recent input.
• Iframes count toward the parent. The Chrome UX Report methodology notes that iframes are not reported separately but contribute to the metrics of the top-level page (CrUX methodology).

The causes

web.dev’s CLS optimization guide lists the most common causes of a poor CLS as images without dimensions; ads, embeds and iframes without dimensions; dynamically injected content without dimensions; and web fonts (optimizing CLS). It also describes post-load shifts from lazy-loaded content without reserved space and from content that shifts when the pointer hovers over it.

A root-cause checklist

Work through this list on each template that fails CLS in field data.

Images and video

• [ ] Every <img> and <video> has width and height attributes, or a CSS aspect-ratio.
• [ ] Responsive images keep the attributes; CSS sets height: auto so the ratio is preserved.

Visual example:

Before: [ heading ]
        [ paragraph text starts here ]      <- reader starts reading
        ... image loads ...
        [ heading ]
        [ IMAGE 600x400 ]
        [ paragraph text starts here ]      <- text jumps down 400px

After:  [ heading ]
        [ reserved 600x400 box ]
        [ paragraph text starts here ]      <- nothing moves when the image arrives

Ads, embeds and iframes

• [ ] Ad slots have a reserved minimum height based on the most likely ad size.
• [ ] Empty ad slots keep their space or collapse only below the viewport.
• [ ] Embedded videos, maps and social posts sit inside containers with fixed dimensions or aspect ratio.

Injected UI

• [ ] Cookie banners, promotional bars and notices overlay content or appear in space reserved from the start, rather than pushing content down.
• [ ] Content loaded after the first render (recommendations, reviews, “related articles”) renders into reserved space or below the viewport.
• [ ] Lazy-loaded sections have placeholders of the final size.

Fonts

• [ ] Fallback fonts are matched to web fonts in size, or font-display: optional is used, so swapping fonts does not reflow text. web.dev notes font swapping can cause layout shifts when the web font and fallback take up different amounts of space.

Animations and interaction

• [ ] Animations use transform and opacity rather than properties that trigger layout. web.dev’s animation guide says to avoid animating properties that trigger layout or paint unless absolutely necessary (web.dev animations guide).
• [ ] Hover effects do not change element sizes.

Measuring CLS

• Field data (Search Console Core Web Vitals report, PageSpeed Insights, CrUX) is the measure that matters, because shifts can happen after load during real use.
• Lab tools catch load-time shifts. In Chrome DevTools, the Performance panel marks layout shifts and highlights the shifted elements.
• Real-user monitoring with the web-vitals library’s attribution build reports which element shifted.

Lab CLS can understate field CLS if the shifts happen after the lab test ends or after user scrolling.

Three layout shift sources on a news template

A hypothetical news article template has a field CLS of 0.28 on mobile.

• DevTools trace on load: the hero image has no dimensions (shift of the headline and first paragraph); a cookie banner inserts at the top and pushes content down.
• Field attribution: a large share of shifts comes from an ad slot in the middle of the article that expands from 0 to 250 pixels after the reader has scrolled past it.
• Fixes: add width and height to the hero image; convert the cookie banner to a bottom overlay; reserve 250 pixels for the mid-article ad slot.
• Expected result: the three main shift sources removed.
• Confirm: check that lab CLS on load is near zero, then recheck field CLS for the template after the 28-day window.
• Still open: remaining shifts from third-party embeds may need their own containers.

CLS and search

Core Web Vitals are used by Google’s ranking systems, and Google’s page experience documentation states that good scores do not guarantee top rankings (Google on page experience). CLS has a more direct cost: users clicking the wrong button because a banner pushed it, or losing their place in an article. Fix it for them.