Cumulative Layout Shift: What Is It, How To Measure CLS and Improve the Score

High Cumulative Layout Shift scores can result in a frustrating user experience, as well as decreased visibility in search engine rankings. 

To provide users with the best possible experience, Google’s ranking factors aren’t focused just on the content or authority of the site but also on its loading speed. Google’s ranking system now includes Core Web Vitals, with CLS as a crucial component, to favor performant pages. 

You can lower your CLS by using a consistent layout and sizing for important elements, and ensuring that images and videos have proper aspect ratios.

Let’s dive in.

What is Cumulative Layout Shift (CLS), and why is it important?

Cumulative Layout Shift (CLS) is a web performance metric that calculates the visual stability of a given web page. It’s calculated by measuring all layout shift scores during the entire lifespan of a page and choosing the largest group of layout shifts within a single session window.

CLS became a ranking factor in June 2021 when Google’s Page Experience Update started rolling out. That means your CLS score (together with Largest Contentful Paint and First Input Delay metrics) now affects your SEO. While it’s likely to be a minor ranking factor, your CLS score (along with the other Core Web Vitals) may reflect on the traffic you get from Google and other search engines.

Moreover, CLS correlates with user behavior metrics. Bounce rate may not impact Google’s rankings, but controlling it is vital for keeping visitors on your site and preventing them from switching to competitors.

For your users, the negative effects of multiple layout shifts span from mild annoyance to even accidentally purchasing the wrong product. It can result in bad reviews for the company and discourage users from returning to the site, as well as repel new clients.

Better user experience with well-optimized CLS

On the other hand, sites that pay attention to their CLS score can win more of Google’s trust. They are also remembered by users as more modern, elegant, and refraining from distracting customers with intrusive advertisements.

A well-optimized CLS provides users with a stable layout, and it’s easier to engage with a predictable environment. On a website without confusing shifts, the user finds the desired content faster, increasing the chance that they will order your product or service before they lose patience with the site.

Common causes for high Cumulative Layout Shift

CLS score is impacted by every content that lacks a designated space on your page, causing it to load unexpectedly and displace other content, leading to user confusion.

According to Google, the most common causes of high CLS are:

• Images without dimensions provided in the source code, 
• Dynamic ads, embeds, and iframes without dimensions, 
• Dynamically injected content, 
• Web fonts causing FOIT/FOUT (Flash of Invisible Text and Flash of Unstyled Text),
• Actions waiting for a network response before updating the DOM.

What’s a good CLS score?

The lower your score, the more stable your layout is. Official CLS thresholds used by Google’s performance measuring tools are as follows:

• Good – CLS below 0.1,
• Needs improvement – CLS between 0.1 and 0.25,
• Poor – CLS above 0.25. 

To receive a “good” CLS threshold, Google recommends that you keep your CLS score under 0.1 for 75% of all page views.

How CLS is calculated

CLS compares two rendered frames to calculate how much the elements of a page have moved and the fraction of the viewport that was affected by the layout shift.

There are two factors that go into CLS: impact fraction and distance fraction.

Impact Fraction

To calculate the impact fraction, you need to calculate the impact region first. 

The impact region defines the area affected by the layout shift. Google compares the original frame with the frame after a layout shift and identifies all affected page elements, thus defining the impact region.

The impact region is usually a rectangle, but if you have multiple layout shifts – both horizontal and vertical – it can be a more complex shape. 

Now let’s talk about the impact fraction. 

To define the impact fraction, you divide the impact region by the area of the viewport (part of the page visible on the screen without scrolling down):

area of impact region / area of viewport = impact fraction

Distance fraction

You first need to calculate the move distance. 

Move distance defines the distance between a given element’s position before and after the layout shift. It pretty much answers the question: how far did the element move? 

Once you’ve calculated the move distance, you can calculate the distance fraction by dividing the max move distance by the viewport height:

max move distance / viewport height = distance fraction

Calculating the layout shift for a single frame

The next step is to calculate the layout shift scores. Here you multiply the impact fraction by the distance fraction to get the layout shift score for a single animation frame:

impact fraction x distance fraction = layout shift score for a single animation frame

Calculating Cumulative Layout Shift

Google’s researchers decided to implement a mechanism for grouping layout shifts in session windows.

Session windows are essentially time frames within the lifecycle of your page, inside of which layout shifts are summarized.

When a layout shift happens on your page, a session window is opened. It can last for a maximum of 5 seconds but will close sooner if no consecutive layout shifts occur within 1 second from the initial shift.

Layout shifts are then summarized within session windows. Your final CLS score for a given page is the score of the session window with the greatest total score – other session windows don’t influence your CLS.

To give you an example:

• Your page starts rendering.
• After 1s, a layout shift of 0.1 occurs.
• 0.5s later, another shift of 0.2 occurs.
• Two seconds later, a shift of 0.25 occurs, and then the page is closed.

The two initial layout shifts occurred within the same session window, so we added the scores together.

The third layout shift occurred after 2 seconds, so it belongs in a separate session window. The previous session window closed one second after the second layout shift.

So in this scenario, your page’s final CLS score would be 0.1 + 0.2 = 0.3! The third layout shift doesn’t influence the final score.

Other things you should know about CLS

Before we delve into measuring and enhancing CLS on your site, it’s crucial to have a comprehensive understanding of CLS. That involves understanding three more key points.

Intentional layout changes

CLS ignores all layout shifts that appear within half a second from any user input. It’s called the input exclusion window. This means that CLS measurement stops for 500ms after every user interaction with the site. So, if the layout change is intentional and caused by the user, it won’t affect your CLS.

Generating layout shifts

Usually, layout shifts happen while loading the page – but they can occur later as well and will contribute to your CLS score if they happen outside of the input exclusion window.

How to measure Cumulative Layout Shift?

Since CLS can be measured both in a lab and during real-user interactions, you can and should look at both your CLS lab score and your CLS Real User Data.

Measuring CLS using Lab Data

Lab Data means using tools to simulate the user’s experience. It’s exactly like lab testing – almost real, but in a controlled environment, and the results only account for a small range of possible situations.

You can access your CLS lab data via the performance tools mentioned below.

• Lighthouse,
• Webpagetest,
• Chrome DevTools,
• Chrome Web Vitals extension.

Measuring CLS using Real User Data

Real User Data is data based on real user interactions. Gathered by Google and other third parties, it allows you to see the bigger picture. You can compare Real User Data with your lab results. For Google, the main source of Real User Data is Chrome User Experience Report, also known as CrUX.  

CrUX data can be accessed via: 

• Google’s BigQuery,
• Google Data Studio,
• PageSpeed Insights,
• CrUX API,
• Google Search Console (Core Web Vitals report).

JavaScript API

An alternative source of CLS based on Real User Data is the JavaScript API – and if you have some coding experience, there are some fun things to do with it, e.g., measuring CLS by the minute. 

How to find the element causing a poor CLS score

You can identify page elements contributing to your higher CLS score by using the tools we’ve discussed above. The easiest way to do this is by opening the Core Web Vitals report in your Google Search Console. 

Click the “Open Report” button to see the list of URLs harming your web performance. CLS is among the three potential issues in the report.

Now, you can investigate each of the revealed URLs running a Lighthouse audit. Chrome DevTools may help you see the shifting element highlighted on your page. 

How to fix Cumulative Layout Shift issues?

Let’s enhance your website’s user experience and search engine rankings by fixing CLS issues. We’ll cover methods such as optimizing image loading, reserving space, and reducing unexpected layout changes.

Tips on how to avoid large layout shifts

It’s more advantageous to take preventive measures than to treat the problem later. CLS issues can be remedied, but let’s first consider some simple techniques for avoiding them altogether.

Exclude your hero image from lazy loading

With lazy loading, you can optimize the loading of your pages and reduce the burden at startup. Yet, the hero image may not be a good candidate for lazy loading, especially if it appears prominently above the fold, as this technique may not be the best solution for such elements.

Use CSS for animations

Animations can cause layout shifts, but not all of them will count toward your CLS score. Google ignores CSS transform changes – so if your animation uses the CSS transform property, it won’t affect your CLS.

Use a CDN

A content Delivery Network is a group of geographically dispersed servers that cash content and cooperate to reduce the time it takes to respond to a user request. Slow server response times can lead to layout shifts, so investing in CDN may help you prevent high CLS on your pages.

Harcode your menu and header

Hardcoding the header and menu elements can result in a more consistent and stable layout of your page since the position and appearance of the header and menu will always be the same.

Use font:display values and link rel=preload

If your site is using externally hosted fonts, they might be the main cause of FOIT (Flashes Of the Invisible Text) and FOUT (Flashes Of the Unstyled Text). 

When the browser downloads the fonts from an external server, it often displays blank space until the custom font loads. After downloading and displaying the font, the layout usually moves. It’s called FOIT (Flashes Of the Invisible Text). 

Another scenario occurs when the browser displays one of the system fonts until the custom one is downloaded. We call that FOUT (Flashes of The Unstyled Text). Since the system font may differ from the custom one, it may take up a different amount of space. Because of that, the layout of your site might move significantly after your custom font loads. 

To avoid this, you can use font:display values such as auto, swap, block, fallback, and optional. For an even better result, you can also preload font files using <link rel=preload> for key fonts – this way, they will be downloaded as a priority asset.

Include width and height elements for videos and images

In the old days of the Internet, web developers used to include width and height elements everywhere on the site. It looked like this:

<img src=”example.jpg” width=”800″ height=”300″ alt=”Example Image”>

This became less popular when responsive web design took over. Due to this new approach, developers started using CSS to resize images. 

Good for them, but not so much for the users affected by CLS. 

With this method, space is allocated only after the browser starts downloading the image. After all the images are displayed, the layout moves, causing unnecessary shifts.

A much better solution for resizing images is using an aspect ratio. It is the ratio of width to height (e.g., 16:9). 

Using the aspect ratio allows the browser to calculate the space needed to display the image – and this way reduces the risk of layout shift. 

If you’re dealing with responsive images, you can use the srcset attribute. It allows you to set up several photo sizes and the browser to display the best possible size. 

Use min-height and min-width CSS properties

You can use min-height and min-width CSS properties to set the minimum height and minimum width of an element, respectively. They prevent an element from being smaller than the specified size, regardless of the amount of content it contains.

The size can be specified in any length unit, such as pixels, or percentage, for example, like that:

div {

  min-height: 300px;

  min-width: 400px;

}

This solution is suitable for elements that don’t need a responsive size but a fixed height or width instead.

Implement dynamically injected content correctly

Dynamically injected content should never appear above content that’s already loaded. The only exception to this rule is when the change is caused by user interaction. As I mentioned before, such content won’t affect CLS if it’s loaded within 500ms after the interaction.

If you’re looking for more resources on optimizing your CLS, Google published a very informative guide to optimizing CLS – I strongly recommend it. 

Dedicate space for ads

Does your website display third-party advertisements? The most common practice on websites is to dynamically add that content to the webpage either during or after loading. As the rest of the page continues to load, non-ad content may become visible to the user.

If there is not enough space reserved for the incoming ads, they may displace the visible non-ad content upon arriva,l which, as you already know, contributes to a high cumulative layout shift score. Here’s how you can fix it:

• Use CSS <div> tag to reserve an appropriate amount of space for static ads,
• If your ad slots accept multiple sizes, reserve space for the largest or smallest size to be served. Alternatively, determine the most probable size to be served using historical fill data from Google Ad Manager reports.

There are certain types of advertisements that cannot be protected from layout shifts. Fluid ad slots adapt their size automatically to the content they receive, offering greater creative freedom to advertisement creators. If you must use fluid ad slots, ensure they load as soon as possible among all page elements and position them below the fold.

Utilize animation to provide context around page changes

Effective animations and transitions can improve the user experience by updating content on the page smoothly without causing any surprises.

Content that moves abruptly and unpredictably almost always results in a poor user experience, but content that moves gradually and naturally from one position to another can aid the user in comprehending changes.

Remember to use CSS for your animations, as Google will ignore them while calculating your CLS score. 

Cumulative Layout Shift FAQ

I hope I managed to prove to you that optimizing CLS is a common concern for website owners, and fortunately, there are many ways to improve it. To complete our guide, let’s answer some common questions about the CLS topic.

What is an expected and unexpected layout shift?

The lowest possible CLS score shouldn’t be your primary goal when creating a website. A good website values stability without boredom and engages the user’s attention through its element movements. That’s why in SEO, we distinguish between expected and unexpected layout shifts.

An expected layout shift happens whenever it is preceded by user interaction. It takes place when the user’s conscious action is the cause of a change in the position of an element, for example, when the user decides to expand a table of contents and push down other content. 

Expected layout shifts should occur within 500ms of a user’s click, and if they meet this requirement, they are excluded from CLS score calculations.

Based on the opposite, unexpected layout shifts occur without user intervention, surprising the user and interfering with their ability to engage with the content.

Does lazy loading affect cumulative layout shift?

Yes, lazy loading may sometimes worsen your CLS score. The goal of this technique is to minimize the wait time for the user to see the page by not loading all resources at once. An illustration may be less important than an article’s title, so it can be loaded after the user reads the title.

As you probably already guessed, if the developer doesn’t allocate enough space for that illustration when it appears, it will push the article’s text down, causing a layout shift.

When relying on lazy loading, it’s necessary to ensure that the CSS attributes indicating the sizes of the elements yet to be loaded are in the right position. It could be beneficial to turn off lazy loading for specific components, such as the hero image that sits above the text.

Is the CLS score calculated only for content above the fold?

No. The initial load’s content above the fold alone does not determine the score. The calculation of the CLS score will consider any layout shifts as the user scrolls through the page.

How to prevent CLS during the development stage?

If you want to limit future layout shifts already at the site building-stage, follow these rules:

• Use CDN to avoid increasing server response time,
• Harcode your main header and menu to gain better control of their position,
• Use the font-display CSS property to prevent the flash of invisible text and layout shifts caused by web font loading,
• Use width and height CSS attributes on images and video elements to reserve space for their appearance,
• Utilize relevant CSS attributes to reserve space for ads and other dynamic content,
• Provide context around page changes with animations.

Wrapping up

Cumulative Layout Shift measures the visual stability of a website, focusing on any unexpected changes in the layout that occur during loading. High CLS scores can lead to a poor user experience and negatively affect search engine rankings, conversion rates, and bounce rates.

To calculate CLS, you multiply the impact fraction (the portion of the viewport that an element moved) by the distance fraction (the amount of movement in relation to the viewport) for every shift in a session window.

Specify your media sizes, reserve space for ads, and avoid late-loaded content to improve your CLS.