Cumulative Layout Shift (CLS)

Cumulative Layout Shift (CLS) is a Core Web Vitals metric that measures how much the content of a page moves around unexpectedly while it loads and while people use it. If you have ever tried to tap a button and hit something else because the page jumped, you have experienced poor CLS.

Written by Paul Hoda, SEO consultant since 2005. Last updated 8 November 2026.

What is a good CLS score?

  • Good: 0.1 or less.
  • Needs improvement: between 0.1 and 0.25.
  • Poor: more than 0.25.

The score is not measured in seconds. It combines how much of the screen moves and how far it moves, grouped into short windows of activity. Only unexpected shifts count; movement caused by a user clicking something, such as opening an accordion, is excluded.

What causes layout shifts

  • Images and videos without width and height, so the browser does not reserve space until they load.
  • Ads, embeds and iframes that load late and push content down.
  • Cookie banners and notification bars inserted at the top of the page.
  • Web fonts that swap and change the size of text (a flash of unstyled or invisible text).
  • Content injected by JavaScript, such as related posts, reviews widgets or pop-ups.
  • Animations that change the size or position of elements instead of using transforms.
  • Sticky headers that change height after loading.

How to find the elements that shift

  • PageSpeed Insights lists the elements responsible for the largest layout shifts.
  • Chrome DevTools has a Performance panel and a “Layout Shift Regions” option that highlights moving areas.
  • The Web Vitals Chrome extension logs each shift as you browse.
  • The Core Web Vitals report in Google Search Console groups pages with the same issue.

How to fix CLS

  1. Set width and height attributes on all images and video elements, or use CSS aspect-ratio boxes.
  2. Reserve space for ads, embeds and widgets with fixed-size containers.
  3. Show banners as overlays at the bottom of the screen rather than pushing content down.
  4. Preload key fonts and use font-display: optional or matched fallback fonts to reduce text reflow.
  5. Avoid inserting content above existing content after the page has loaded.
  6. Use CSS transforms for animations instead of changing top, left, width or height.

I have written a step-by-step walkthrough of a real case in how to fix a CLS issue of more than 0.25 on mobile.

Why CLS matters beyond rankings

CLS is a modest ranking factor, but it has a big effect on usability. Layout shifts cause accidental clicks, frustrated visitors and abandoned forms. Fixing them improves conversions even when rankings do not change.

Mobile vs desktop CLS

Mobile layouts are narrower, so a banner or image that shifts slightly on desktop can push content much further on a phone. Always check mobile field data first. After fixing, allow up to 28 days for the improvement to appear in Search Console, and recheck whenever you add new plugins, ads or design features. See also Largest Contentful Paint (LCP) and Interaction to Next Paint (INP).

Further reading: web.dev’s guide to Cumulative Layout Shift.

Key Takeaways

  • CLS measures unexpected layout movement; aim for 0.1 or less.
  • Missing image dimensions, late ads and banners are common causes.
  • Reserve space for anything that loads late.
  • Use transforms for animations and load fonts carefully.
  • Check mobile first, where shifts are largest.

Related Terms

Want help putting this into practice? Get a free SEO check, or keep learning in the SEO Encyclopedia.