RankpediaA plain-English encyclopedia of search

Cumulative Layout Shift

Tracks how much visible content moves unexpectedly while a page loads, harming user experience and the Core Web Vitals score.

If you have ever seen a page jump while an ad loads, you already know CLS is about real user frustration, not just a lab number.

Key points

  • Set explicit width and height on images and videos to reserve space before loading.
  • Reserve space for ads, embeds, and banners using fixed-size containers before content appears.
  • Use transform-based animations instead of properties that trigger layout reflows.
  • Check field data in Search Console, not just Lighthouse lab scores, to see user impact.
  • Lazy-load images and iframes only after reserving their dimensions in HTML or CSS.

A news site adds a sticky banner and CLS jumps from 0.05 to 0.25

A news site with a CLS of 0.05 added a sticky cookie banner that measured 80px tall. The banner appeared after the article body rendered, pushing text down by 80px. The largest shift score was 0.15, raising overall CLS to 0.25. Reserving 80px of space in the CSS fixed it, returning CLS to 0.03. Meanwhile, their largest contentful paint stayed stable, but the website speed test still flagged high CLS.

Three common causes of high CLS

  • Images without dimensions If you omit width and height attributes, the browser leaves no space until the image downloads, then reflows content below it.
  • Ads and dynamic content Third-party scripts often inject banners or embeds without reserving a fixed container, causing visible jumps when they appear and forcing the browser to reflow the entire layout.
  • Web fonts with mismatched metrics When a fallback font is larger or smaller than the final web font, text reflows as the font loads, shifting everything below it.

Three ways to fix CLS in practice

  • Set explicit dimensions Always add width and height attributes to images and videos, or use aspect-ratio in CSS to reserve space before assets load.
  • Reserve space for ads Wrap ad slots in a container with a fixed height and width so the browser can allocate room before the ad script runs.
  • Optimise font loading Use font-display: swap or preload key fonts so the fallback text is visible and stable while the web font downloads.

Common questions

How to improve cumulative layout shift?

Set explicit dimensions on all images and videos, reserve space for ads and embeds, and test with real user data rather than lab tools alone. This is core to website optimisation.

What is a good CLS score?

A good CLS score is 0.1 or less for at least 75% of page visits, according to Google's Core Web Vitals.

Does CLS affect SEO rankings?

Yes, CLS is a Core Web Vital and signal in the page experience ranking system, though it is one of many factors alongside largest contentful paint and interaction to next paint.

Sources

  1. web.dev: Cumulative Layout Shift (CLS) Official Google guide explaining how CLS is measured and scored.
  2. web.dev: Optimize Cumulative Layout Shift Practical advice for reducing CLS with code examples and best practices.
  3. Google Publisher Tag: Minimize layout shift Techniques specifically for ad slots to avoid shifting content.
↑