Cumulative Layout Shift (CLS): Definition, Causes, Fixes

What is Cumulative Layout Shift (CLS)?

Cumulative Layout Shift (CLS) is a Core Web Vital that scores how much visible content moves around unexpectedly while a page is used. It is a unitless number: the largest burst of layout shifts during the visit. Google rates 0.1 or less as good and more than 0.25 as poor, judged at the 75th percentile of page loads, separately for mobile and desktop.

It captures the moment you reach for a button and the page jumps, so you tap an ad instead. CLS is one of three Core Web Vitals, next to LCP (loading) and INP (responsiveness). The LCP entry covers loading speed.

CLS thresholds

The thresholds are maintained on web.dev.

How CLS is calculated

Each unexpected shift gets a score: layout shift score = impact fraction x distance fraction.

• Impact fraction: the combined visible area of the unstable elements, before and after the shift, as a fraction of the viewport.
• Distance fraction: the greatest distance any unstable element moved, as a fraction of the viewport's largest dimension.

Shifts are grouped into session windows: bursts with less than 1 second between shifts and at most 5 seconds in total. CLS is the score of the worst window, not the sum of the whole visit. Shifts that happen within 500 milliseconds of a tap, click or key press are excluded, because the visitor caused them. Scrolling, dragging and pinch-zoom do not count as such input.

Example: a banner that pushes the article down

Suppose an image fills half of the viewport and a late-loading banner pushes it down by a quarter of the viewport height. The affected area before and after covers three quarters of the viewport (impact fraction 0.75) and the distance fraction is 0.25. The shift scores 0.75 x 0.25 = 0.1875, which on its own already falls in the needs-improvement range. The numbers are illustrative; real pages have many smaller shifts.

What causes layout shifts

How to fix CLS

Give every image and video its dimensions, so the space exists before the file arrives (see image size for the rest of the image checklist):

<!-- shifts the page when it loads -->
<img src="/img/banner.jpg" alt="Sale banner">

<!-- reserves the space up front -->
<img src="/img/banner.jpg" alt="Sale banner" width="1200" height="400">

• Reserve space for content that loads later, such as ads, embeds and cookie notices, with a fixed or minimum height.
• Do not insert new content above what the visitor is already reading, unless they asked for it.
• Use transform: translate() and transform: scale() for movement and size animations instead of changing top, height or width, as web.dev recommends.
• For content that appears after a click, show a loading indicator of a fixed size.

Common CLS mistakes

• Adding dimensions to the hero image but forgetting the logo, avatars and in-article images.
• Collapsing an ad slot when no ad fills it, so the content below jumps.
• Testing only the first screen, while shifts happen further down or later in the visit.
• Relying on a lab score alone, which usually stops soon after load, while real visitors see the whole visit.

How to measure CLS

Lighthouse and Chrome DevTools show shifts for a single controlled load, which helps you find the element. Field data from real visitors, such as the real user monitoring you collect yourself or the Chrome UX Report, covers the whole visit and decides the Core Web Vitals result. To log CLS with Google's web-vitals library:

import { onCLS } from 'web-vitals';

onCLS((metric) => {
  console.log('CLS:', metric.value);
});

CLS in testing and monitoring

LoadFocus page speed monitoring runs scheduled Lighthouse audits from 25 cloud regions and records Core Web Vitals including CLS, so a template change that starts shifting content shows up as a trend. The free Core Web Vitals checker shows the 75th-percentile CLS of real Chrome users for a URL. Step-by-step fixes for all three metrics are in our Core Web Vitals optimization guide. More reading: how to monitor Core Web Vitals with alerts and reports and 10 steps to a faster website.

FAQ: Cumulative Layout Shift

What is a good CLS score?

0.1 or less at the 75th percentile of page loads. Between 0.1 and 0.25 needs improvement, and over 0.25 is poor.

Does a shift after I click a button count?

Not if it happens within 500 milliseconds of the tap, click or key press, because the visitor caused it. Scrolling, dragging and pinch-zoom do not count as that kind of input.

Do I need width and height on every image?

On every image and video whose size is not otherwise fixed by your layout. They let the browser reserve the space before the file loads. A CSS aspect-ratio does the same job.

Why is my field CLS worse than my lab CLS?

A lab test usually covers only the load, while field data covers the whole visit, including late ads, banners and content that appears after scrolling. Real devices and connections also differ from the test setup.

How do I find the element that shifts?

Run Lighthouse and read its layout shift diagnostics, or record a trace in the Chrome DevTools Performance panel, which marks layout shifts and the elements involved.