Cumulative Layout Shift (CLS)
What is Cumulative Layout Shift?
Cumulative Layout Shift (CLS) is a Core Web Vitals metric that measures visual stability: how much visible content moves unexpectedly while a page loads and is used. It is a unitless score where good is 0.1 or less and poor is above 0.25, at the 75th percentile of visits.
Each unexpected shift is scored by how much of the viewport moved (impact fraction) multiplied by how far it moved (distance fraction). Shifts that happen close together are grouped into a session window, and CLS reports the window with the largest total. Shifts within half a second of a click, tap or key press are not counted, because people expect the page to change when they act.
Typical causes are images and videos without dimensions, ads and embeds that load into empty space, banners or cookie notices pushed in above content, and web fonts that swap in at a different size.
Why Cumulative Layout Shift matters for SEO
Layout shifts make people lose their place or tap the wrong thing, such as an ad that appears where a button was. As a Core Web Vital, CLS is part of the page experience signals Google’s ranking systems use. It is often the easiest of the three to fix.
How to fix Cumulative Layout Shift
- Set width and height attributes (or a CSS aspect-ratio) on every image, video and iframe, so the browser reserves space before it loads.
- Reserve space for ads, embeds and dynamic widgets with a fixed minimum height.
- Do not insert banners, notices or content above existing content after the page has started rendering; overlay them or place them below.
- Animate with transform and opacity instead of properties that change layout, such as top or height.
- Load web fonts carefully: preload key fonts and use matching fallback metrics so text does not jump when the font swaps.
- Find the shifting elements with the Layout Shift regions option in Chrome DevTools or the diagnostics in PageSpeed Insights.
Cumulative Layout Shift example
<img src="/img/product.webp" width="800" height="600" alt="Blue trail shoe, side view">
<style>
img { max-width: 100%; height: auto; }
</style>Cumulative Layout Shift FAQ
What is a good CLS score?
0.1 or less for at least 75% of visits. Between 0.1 and 0.25 needs improvement, and above 0.25 is poor.
Why is my CLS worse in field data than in Lighthouse?
Lighthouse only measures shifts during the initial load. Real visitors scroll and interact, which can trigger later shifts, such as ads loading or content expanding, that a lab test never sees.
Related SEO terms
Core Web Vitals are Google’s three metrics for real-world page experience: Largest Contentful Paint, Interaction to Next Paint and Cumulative Layout Shift.
Page speed is how quickly a page loads, shows its content and responds to input. Google measures it mainly through Core Web Vitals.
Lazy loading delays loading images, iframes or other content until they are about to scroll into view, which speeds up the first load of a page.
Lighthouse is Google’s open-source tool that tests a page in a lab and scores its performance, accessibility, best practices and SEO.
Image SEO is optimising images so they load fast, are understood by search engines and can rank in Google Images and image results.