What is Cumulative Layout Shift (CLS)?

Glossary · Updated October 23, 2026 · Also called: layout shift

Definition Cumulative Layout Shift (CLS) is a Core Web Vitals metric that scores how much visible content moves unexpectedly during a page's life. Each shift scores the fraction of the viewport affected times the distance moved, and CLS is the largest burst of shifts. A score of 0.1 or less is good and above 0.25 is poor, at the 75th percentile of visits. Shifts within 500 ms of a tap or key press don't count.

How to fix it: Cumulative Layout Shift: How to Fix CLS on Mobile

How is CLS calculated?

Whenever a visible element changes its start position between two frames, the browser records a layout shift with a score:

layout shift score = impact fraction × distance fraction

The impact fraction is the share of the viewport covered by the unstable elements before and after the move; the distance fraction is how far they moved relative to the viewport's largest side. A banner pushing half the screen down by a quarter of its height scores about 0.5 × 0.25 = 0.125, already above "good".

Shifts are grouped into session windows: shifts less than 1 second apart, up to 5 seconds per window. CLS is the total of the worst window, so a long-lived page isn't punished for every small shift over hours. Shifts right after user input, such as an accordion opening on tap, are expected and excluded.

What causes layout shift?

• images and videos without width and height attributes;
• ads, embeds and iframes that load without reserved space;
• cookie banners or promo bars inserted above content;
• web fonts that swap in with different metrics;
• animations that change top, height or margin instead of transform.

Example

<!-- The browser reserves a 16:9 box before the image arrives -->
<img src="photo.jpg" width="1600" height="900" alt="…"
     style="max-width: 100%; height: auto">

/* Reserve space for a late-loading ad */
.ad-slot { min-height: 250px; }

On iPhone vs Android

The Layout Instability API that reports shifts exists only in Chromium browsers, and Google's field data comes from Chrome, so CLS can't be measured in Safari. The causes and fixes are the same on iPhone, so fixing what Chrome reports helps Safari users too.

How MobileCheck checks it

MobileCheck adds up the layout shifts during the page load on each Android (Chromium) device and flags CLS over 0.1, marking over 0.25 as poor. It's a lab value covering the load only; shifts that happen later while someone scrolls show up in field data.

Related terms

• Core Web Vitals (CWV)Core Web Vitals are Google's three user experience metrics: LCP (good ≤ 2.5 s), INP (≤ 200 ms) and CLS (≤ 0.1), at the 75th percentile of visits.
• Largest Contentful Paint (LCP)Largest Contentful Paint (LCP) is the time until the largest image or text block in the viewport appears. Good: 2.5 s or less; poor: over 4 s.
• Interaction to Next Paint (INP)Interaction to Next Paint (INP) measures how quickly a page responds to taps, clicks and key presses. Good: 200 ms or less; poor: over 500 ms.
• Lazy loadingLazy loading delays downloading images and iframes until they are about to scroll into view, set in HTML with loading="lazy".

Guides and tools

• Cumulative Layout Shift: How to Fix CLS on Mobile
• Sticky headers, cookie banners and pop-ups on mobile

Sources

1. web.dev: Cumulative Layout Shift (CLS)
2. web.dev: Optimize Cumulative Layout Shift

All 27 glossary terms, A to Z