Cumulative Layout Shift (CLS): What It Is & How to Improve Your Score

What Is CLS?

Cumulative Layout Shift (CLS) is a stable Core Web Vital metric. It’s an important, user-centric metric for measuring visual stability because it helps quantify how often users experience unexpected layout shifts. A low CLS helps ensure that the page is stable, predictable, and enjoyable to use.

Unexpected layout shifts can disrupt the user experience in many ways, from causing users to lose their place while reading if text suddenly moves, to making them click the wrong link or button. In more serious cases, layout shifts can directly interfere with checkout flows, form submissions, or navigation.

Why CLS Matters

CLS matters because users expect a page to remain stable while it loads. When visible elements jump around, the page feels unreliable. A user may be about to tap “Cancel” and accidentally confirm an order instead, or begin reading a paragraph only to have it shift downward because an image, ad, or widget loaded late.

Unexpected movement of page content usually happens when resources load asynchronously or DOM elements are dynamically added before existing content. Common causes include images or videos without reserved dimensions, fonts that render differently than the fallback font, and third-party embeds or ads that resize themselves after initial paint.

What Is a Good CLS Score?

To provide a good user experience, sites should strive for a CLS score of 0.1 or less. Scores above 0.25 are generally considered poor, while values between 0.1 and 0.25 need improvement.

To make sure performance is good for most users, CLS is typically evaluated at the 75th percentile of page loads, segmented across mobile and desktop devices.

Common Causes of Layout Shifts

The most common layout shift issues come from content that appears late or resizes after the initial render. This often includes:

• Images and videos without explicit width and height
• Ads, embeds, or iframes injected after the page renders
• Late-loading banners, cookie notices, or promotional bars
• Web fonts that swap to a noticeably different size
• DOM updates that push visible content downward
• Animations that change layout properties instead of transforms

Why CLS Often Looks Fine in Development

CLS issues often appear worse in production than they do in development. Personalized or third-party content may behave differently outside a local environment, images may already be cached for the developer but not for real users, and local API responses are often much faster than production requests.

This means a page that feels stable on a dev machine can still produce unexpected layout shifts for real visitors on mobile devices, slower networks, or uncached sessions.

Layout Shifts in Detail

A layout shift occurs any time a visible element changes its position from one rendered frame to the next. The CLS metric looks at the largest burst of unexpected layout shifts that happen during the lifecycle of a page.

A burst of layout shifts is grouped into what is often called a session window. This is a sequence of one or more layout shifts occurring in rapid succession, with less than one second between shifts and a maximum total window duration of five seconds. CLS is based on the session window with the highest cumulative score.

Layout Shift Score

To calculate the layout shift score, the browser looks at both how much of the viewport is affected and how far unstable elements moved. The basic formula is:

This score is calculated for individual shifts, and CLS reflects the most significant burst of those unexpected shifts.

Impact Fraction

The impact fraction measures how much of the viewport area is affected by unstable elements between two frames. If an element moves, both its old visible area and its new visible area contribute to the total impact.

For example, if an element occupies half the viewport and then moves downward so that the combined area covered before and after movement equals 75% of the viewport, the impact fraction is 0.75.

Distance Fraction

The distance fraction measures how far the unstable element moved relative to the viewport’s largest dimension. If an element shifts downward by 25% of the viewport height, the distance fraction is 0.25.

Using the earlier example, if the impact fraction is 0.75 and the distance fraction is 0.25, the layout shift score is:

Expected Versus Unexpected Layout Shifts

Not all layout shifts are bad. Many modern interfaces change dynamically, and some movement is acceptable when the user expects it. CLS is specifically concerned with unexpected shifts that interrupt the experience.

User-Initiated Layout Shifts

Layout shifts triggered directly by a user action, such as clicking a button or expanding a section, are generally acceptable as long as the relationship between the action and the result is clear. If a user taps a button and content expands immediately in response, that shift usually feels intentional.

However, if the action triggers a slow network request and the content suddenly appears much later without reserved space, that delayed shift can still feel disruptive. In these situations, it is often better to reserve the space immediately or show a loading placeholder.

Animations and Transitions

Animations can improve UX when done intentionally, but abrupt movement often harms usability. The safest approach is to animate using CSS transforms rather than changing layout-affecting properties like top, left, height, or width.

Safer animation approach:

/* Better: does not trigger layout recalculation */
.card {
  transform: translateY(8px);
}

/* Better for scaling effects */
.modal {
  transform: scale(0.98);
}

Using transforms helps avoid layout shifts because the browser can move or scale the element visually without reflowing the surrounding layout.

How to Measure CLS

CLS can be measured in both lab and field environments. Lab tools are useful during development, but field data is essential because real users often experience layout shifts that synthetic testing misses.

Field Tools

Field tools are valuable because they show what real visitors actually experience. Common sources include:

• Chrome User Experience Report (CrUX)
• PageSpeed Insights
• Google Search Console Core Web Vitals report
• The web-vitals JavaScript library

Lab Tools

Lab tools are useful for local debugging and controlled tests, but they may under-report CLS because they usually focus on initial load and not the full real-world session. Common tools include:

• Chrome DevTools
• Lighthouse
• PageSpeed Insights
• WebPageTest

Measure CLS in JavaScript

You can observe layout shift entries in JavaScript using the Layout Instability API. This is useful for debugging what is actually shifting on the page.

new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntries()) {
    console.log('Layout shift:', entry);
  }
}).observe({ type: 'layout-shift', buffered: true });

For more complete reporting, especially across page lifecycle events, many developers use the web-vitals package:

import { onCLS } from 'web-vitals';

// Measure and report CLS
onCLS(console.log);

This is often the most practical way to measure CLS accurately in production applications.

How to Improve CLS

Improving CLS usually comes down to reserving space before content loads and avoiding unexpected changes to layout-affecting properties. The goal is to make the page predictable from the first render onward.

Practical CLS Fixes for Developers

Here are some of the most effective ways to reduce layout shift:

• Always set width and height attributes on images and videos
• Reserve space for ads, embeds, banners, and widgets
• Avoid inserting new content above existing visible content
• Use skeletons or placeholders when content loads asynchronously
• Use font-display carefully and choose fallback fonts with similar metrics
• Animate with transform instead of layout properties

<img
  src="hero.jpg"
  width="1200"
  height="800"
  alt="Hero image">

Reserving image dimensions is one of the simplest and highest-impact fixes because it gives the browser enough information to allocate layout space before the asset loads.

.promo-banner-placeholder {
  min-height: 64px;
}

Placeholder space like this can prevent announcement bars, recommendation widgets, and asynchronously loaded sections from pushing content downward after the initial render.

Impact

SEO and Conversion Impact of CLS

CLS is not just a developer metric. Poor visual stability can hurt SEO, engagement, and revenue. Since CLS is one of Google’s Core Web Vitals, it is part of the broader page experience picture that affects site quality.

More importantly, layout instability can directly disrupt conversion-critical experiences. A shifting page can cause accidental clicks, interfere with forms, and make product or checkout pages feel unreliable. Even when the layout shift is brief, it reduces trust and creates friction.

This is why CLS fixes often improve more than just Lighthouse scores. They also make sites feel more polished, usable, and conversion-friendly.

Conclusion — What Is CLS?

Cumulative Layout Shift measures how stable a page remains while it loads and updates. A low CLS score means users can interact with the page confidently without unexpected movement disrupting their experience.

Understanding how layout shifts are calculated, how to measure them, and how to fix their common causes is essential for improving Core Web Vitals and building better web experiences. In practice, the best CLS improvements usually come from reserving space early, managing asynchronous content carefully, and avoiding layout-affecting animations or DOM changes that surprise the user.