Measure And Optimize Cumulative Layout Shift (CLS)

Cumulative Layout Shift (CLS) is one of the three Core Web Vitals metrics that impact search result rankings in Google.

CLS is a measure of how user experience is impacted by unexpected layout shift. Layout shift is created when content moves around on the page after the initial load. Some layout shifts are considered expected and don't count toward the CLS metric. This includes shifts that follow a user interaction as well as CSS animations and transitions.

This article takes a closer look at what the CLS metric is, how you can measure it, and how it can be optimized.

What is Cumulative Layout Shift?

The Cumulative Layout Shift metric exists to measure visual stability because of its importance to user experience. For example, you may have experienced a website where the page loaded initially and then a header or advertisement was injected into the top of the page causing the rest of the page to shift downwards.

CLS is used to measure this kind of visual instability as it may interfere with user actions such as clicking buttons or just reading text. In its worst examples, visual instability of this kind can lead to incorrectly making a payment or submitting a form.

Cumulative Layout Shift Example

This filmstrip shows an example of page content shifting around after first being rendered. When the banner loads, the heading and article below it shift downward to make space for the banner.

For this page the CLS value is 0.13.

If you look closely there are actually two layout shifts on this page. The first one occurs after 2.5s when the web font loads, causing the title and description to re-render. After this, the description takes up a little less space, and the content below it shifts upward.

Changes to how Cumulative Layout Shift is defined

Different versions of Chrome measure CLS slightly differently. Google keeps track of changes to the CLS definition here.

How is CLS calculated?

Cumulative Layout Shift is the sum of individual layout shifts in a certain time window. The time window can cover up to 5 seconds.

Originally CLS measured total layout shift throughout the lifetime of the page. The new windowed definition was introduced in May 2021.

Each individual layout shift is scored based on two components:

• the impact fraction measures how much of the screen area is impacted
• the distance fraction measures how far an element has moved

The final score is calculated by multiplying the two numbers.

Example calculation

Take the example layout shift below:

• the main text takes up 50% the screen
• the ad takes up 20% of the screen

So the total impact fraction for the shift is 70%. The main text moves down by 20% of the screen – that's the distance fraction.

The final layout shift score is 70% * 20% = 0.14.

What is a good Cumulative Layout Shift score?

A score below 0.1 is considered good. Scores ranging from 0.1 to 0.25 are considered to need improvement and scores above 0.25 are considered poor.

Cumulative Layout Shift is one of the Core Web Vitals metrics that Google uses as a ranking signal.

How does Cumulative Layout Shift affect Lighthouse scores?

As of Version 10 (Feb 2023) Cumulative Layout Shift determines 25% percent of the overall Lighthouse Performance score.

The performance subscore for CLS is visible in DebugBear for example:

What causes unexpected layout shift?

Layout shifts during the initial page load usually happen when the initial page HTML has been returned by the server but additional resources like JavaScript and images are still loading. When these resources do load the page content changes and the existing page contents moves around, causing layout shift.

There are several common causes of Cumulative Layout Shift to be aware of:

Missing Single Page Application container height

Many Single Page Application's work by creating a page with simple initial content and then loading additional content to the page dynamically. This can cause layout shift as these inserted dynamic elements appear on the page with variable heights that cause visual instability.

You can prevent this particular kind of layout shift by setting a min-height to a particular height on the application container for example 900px on the root element of your application to prevent CLS of this kind for viewports up to that size.

Missing image width and height attributes

You can prevent some layout shifts if you know the size of the element that's being loaded. In that case, you can provide an empty placeholder with the appropriate height, and then fill in the contents later.

Setting the height and width value on images is considered a good practice to prevent CLS.

Web fonts

Web fonts can also cause layout shifts, as the size of rendered text changes once the fonts have loaded.

You can reduce these layout shifts by using setting the font-display CSS property to either optional or fallback. Both will hide the text for up to 100ms, completely preventing layout shifts if the web font loads quickly. If the font loads slowly the browser will use a system font initally.

font-display: fallback switches to the web font if it loads within 3s. font-display: optional never shows the web font if it takes more than 100ms to load.

Simon Hearne has written an article all about preventing layout shifts caused by web fonts.

Why is Cumulative Layout Shift different in field and lab data?

Lab data is in an isolated test environment while field data is collected from real users. Lighthouse lab data only tests layout shifts during the initial page load, while field data also counts layout shifts that users experience when scrolling down the page. This can lead to discrepancies and sometimes make Cumulative Layout Shift difficult to debug.

How to measure Cumulative Layout Shift

There are several tools which can help measure and diagnose Cumulative Layout Shift issues:

• Chrome DevTools has a layout shift highlight feature
• Lighthouse performance tests measure CLS
• DebugBear contains Cumulative Layout Shift measurements in the Overview tab
• The Layout Instability API programmatically detects layout shift with JavaScript

Layout Shifts in Chrome DevTools

Chrome DevTools can highlight layout shifts as part of its Animation tooling. First, click the three dots in the top right corner, then select More tools, and finally click Animations.

You can then enable highlighting for Layout Shift Regions.

Now, when content moves on the page, Chrome will show a blue highlight rectangle for the affected DOM nodes.

Cumulative Layout Shift in Lighthouse

You can find the CLS metric as one of the 6 key metrics at the top of each Lighthouse report.

The filmstrip below can help identify what's causing the layout shift.

There's also a more detailed "Avoid large layout shifts" audit, which breaks down different LayoutShift events as reported by Chrome.

Run a free website speed test with DebugBear

You can find the Cumulative Layout Shift metric in the page Overview tab of the DebugBear application, just below the filmstrip.

Run a test today with DebugBear to identify your CLS metric score.

The Web Vitals tab also contains a list of all layout shifts on the page and provides in-depth diagnostics to help you improve your Cumulative Layout Shift score.

Layout Instability API

You can use the Layout Instability to detect layout shifts inside your application, and calculate the Cumulative Layout Shift on the fly.

Here's how to use a PerformanceObserver to retrieve and monitor layout-shift entries:

var cumulativeLayoutShift = 0;

const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    // Don't count if the layout shift is a result of user interaction
    if (!entry.hadRecentInput) {
      cumulativeLayoutShift += entry.value;
    }
    console.log({ entry, cumulativeLayoutShift });
  });
});

// `buffered: true` to report layout shifts that have already happened on the page
observer.observe({ type: "layout-shift", buffered: true });

A layout-shift entry looks like this – each event is attributed to a set of DOM nodes.

Monitoring Cumulative Layout Shift over time

You can use DebugBear to measure Cumulative Layout Shift over time and optimize your CLS scores.

The Web Vitals tab shows both real-user data and the result of lab-based performance test. The ral user data comes from the Chrome User Experience Report (CrUX), which Google uses as a ranking signal.

You can also get a high-level view of page speed and Core Web Vitals on your website.