Cumulative Layout Shift (CLS) Metric: Identifying and Eliminating Unwanted Page Shifts

Annoyed when ads shove the text you’re reading down the page? Frustrated when content jumps just before you click, causing you to miss your target?

These unwelcome occurrences are known as layout shifts. All shifts on a single page contribute to the Cumulative Layout Shift metric, or CLS for short.

Let’s delve deeper into this metric.

Understanding the CLS Metric#

The goal in optimizing CLS is to ensure maximum visual stability during page rendering and subsequent user interaction with the page. This aids users in consuming page content more seamlessly.

Technically speaking, the definition is a tad more complex: CLS calculates the sum of layout shifts within the worst five-second window during page usage.

This metric is part of Core Web Vitals, used by Google to measure the quality of web pages. Core Web Vitals also factor into search result rankings, among other things.

The CLS Value Limit is 0.1#

To keep your Cumulative Layout Shift in the desirable green zone, the metric value must be below 0.1. Achieve this, and you’re in good stead.

If your CLS is between 0.1 and 0.25, you're in the orange zone, and improvements are necessary.

Should user data reveal a value exceeding 0.25, Google deems your CLS unsatisfactory.

	Good	Needs Improvement	Poor
CLS	< 0.1	0.1 - 0.25	> 0.25

The Significance of a Good CLS Score#

Cumulative Layout Shift (CLS) can be crucial for your site:

• CLS impacts SEO and ad pricing due to its inclusion in Core Web Vitals.
• Optimizing CLS increased Yahoo! JAPAN News page views per session by 15%. More in the case study on Web.dev.
• A 10% conversion rate increase was achieved on Mail.ru through optimizing this metric, as detailed in the study.
• CLS also affects Lighthouse scores. In Lighthouse, from version 10, the CLS metric contributes 25% to the overall performance score (LPS), similar to the LCP metric.

Some of our clients observed increased traffic after optimizing CLS.

On a content website, we achieved "green Core Web Vitals" after optimization. The Google Page Experience update led to a significant traffic increase.

How is CLS Calculated Precisely?#

First, let’s discuss what constitutes a single layout shift.

Cumulative Layout Shift

1. Individual layout shifts are calculated from the total size of the impacted area (Impact Fraction) and the movement distance of the unstable element (Distance Fraction) on both X and Y axes.
2. In the example below, the size of the unstable element is roughly 90% of the viewport.
3. The element shifted by 4% of the total viewport height. The movement distance is thus 0.04.
4. In this example, the total impacted area is 0.9, and the movement distance is 0.04.
5. The layout shift in this case is 0.04 * 0.9 = 0.036.

However, there may be multiple elements on a page, hence the term Cumulative in the metric's name.

Introducing the “Session Window”#

It is important to understand that the Chrome UX Report calculates CLS from the entire user session on the page.

Currently, the overall CLS score is limited to the maximum CLS measured in a session window constrained to 5 seconds with a 1-second gap. It simply takes the worst five seconds:

CLS metric calculation. Only one, the worst window is taken. Here, Session Window 1.

1. Unwanted shifts (layout shifts), as described above, are always counted into session windows lasting a maximum of five seconds.
2. If a second passes without shifts, the window closes before five seconds.
3. Throughout the duration of a specific URL visit, only the worst window (the first in the illustration) is selected. This is reported as the CLS score for that page.

Calculating throughout individual sessions prevents unnecessarily high CLS values during visits where the user remains on a single URL for a long time.

More information about measuring CLS can be found on web.dev.

How CLS Actually Occurs#

In practice, unwanted shifts are most commonly caused by the following general issues:

1. Shifts caused by the incremental loading of elements within content. These are elements without predefined dimensions, such as images or JS components.
2. Poor animations and shifts of elements using CSS properties. Avoid CSS animations that do not support transforms.
3. Failing to complete a requested shift within 500 ms. If you can't redraw the content in time, at least create space for new content. This applies to things like AJAX pagination.

Beware of asynchronously loaded elements, such as images. They like to shift things around.

Measuring CLS#

Chrome UX Report#

Ideally, collect CLS data from almost all of your visitors using the Chrome UX Report. It returns the 75th percentile of CLS values for all page views on your domain. A more detailed view of the value distribution can be found in the histogram.

This data includes measurements from Chrome users on both desktop and mobile. It does not include measurements from, for example, Apple product users.

Chrome UX Report data is available in tools like our website speed test, PageSpeed Insights, or Google Search Console.

Chrome DevTools#

For developers and the advanced, measuring your site's CLS locally is an excellent option. Measure each page individually. Chrome is the ideal tool, with the Web Vitals extension enabling you to start measuring immediately.

Initially, measure the first CLS in the first viewport, then proceed to interactions like scrolling and clicking on web elements.

PageSpeed Insights or Lighthouse#

PageSpeed Insights or Lighthouse measure CLS on individual pages of your site in the first viewport. It’s a good starting point for fine-tuning basic layout elements, menu shifts, mobile headers, and ad banners around the site.

The downside is that it measures CLS only in the first viewport, whereas we aim to measure all shifts cumulatively.

Specific Recommendations to Avoid Layout Shifts#

From our web speed consultancy, we’ve identified several recurring issues:

Always Specify Dimensions for Images and Asynchronous Elements#

Ensure all images on the site have defined width and height attributes. Asynchronous elements like JS components or ads should use the CSS property aspect-ratio.

Do Not Embed Third-Party Components Without Placeholders#

Before initializing ad systems or social media plugins (Facebook, Instagram, TikTok), prepare space with a placeholder or again use the aspect-ratio property. Choose placeholder dimensions that reserve a similar area to the content generated by the plugin.

Leverage BFcache#

Allow the browser to use BFcache to reduce CLS on your site. This way, when navigating through browsing history, the browser doesn’t need to re-render the page and displays it from memory, thus avoiding all render-time shifts. This cache has been around for years, but Chrome began supporting it on both mobile and desktop in 2023.

Fine-Tune Custom Fonts#

Replacing system fonts with custom fonts often causes unwanted shifts.

Here are some recommendations:

• The fewer individual weights and variants, the better.
• Start downloading fonts as early as possible.
• Use preload to prioritize font downloading.
• Exclusively use the modern WOFF2 format.
• Ensure text readability before the external font is fully loaded using the font-display property.
• Align the external font with the placeholder system font using size-adjust.

Respond to Requested Shifts Within 500 ms#

If you redraw a section of the page via JavaScript after a click and the new content has different dimensions than the original, surrounding elements will shift. This shift must be completed within 500 ms.

This is relevant, for example, to AJAX pagination. If you cannot safely deliver new content within this time on slower devices, shift surrounding elements immediately after the click and insert the actual content into the prepared space later.

Place CSS in <head>#

Keep CSS styles in the header if possible. They will be processed right at the start of page loading and all at once. Adding additional CSS properties inside the HTML document can lead to further layout shifts due to the incremental processing of these styles.

Reserve Space for Icons#

If you use an IconFont or SVG sprite with many icons, this file may take a long time to download. Only after these bulky files are loaded do the icons appear on the web and can start shifting content. Always define icon dimensions before they load.

Animate Only With transform#

The CSS transform property allows for animating elements without causing layout shifts. Instead of changing height and width properties, use transform: scale(). To move elements, avoid changing the top, right, bottom, or left properties and use transform: translate() instead.

Bonus: Beware of Scrollbars#

If you measure a CLS of 1.00 right after page load and are at a loss for further optimizations, try overflow-y: scroll. Incremental processing of HTML and CSS files may cause the side scrollbar to toggle on and off.

Add this snippet to CSS styles, and it might save you a lot of frustration in finding additional CLS.

html { height: 100%; overflow-y: scroll; }

The CLS metric is part of our unified speed metric, PageSpeed.ONE score (SPS).

More on CLS optimization is available in a dedicated article.

We Can Help with Your CLS#

On the SIKO website, we managed to improve layout stability sevenfold. Website speed is crucial for SIKO, but the new JavaScript-based frontend exhibited significant issues with Core Web Vitals user experience metrics.