Cumulative Layout Shift: What It Is and How to Measure It
In today's digital world, website performance and speed is not just a luxury, it's a necessity. Google recognized this many years ago and introduced the so-called Core Web Vitals as early as 2021 - a series of metrics that measure the speed and user-friendliness of a website. These metrics have become a crucial factor in how websites rank in Google search results and therefore have a significant impact on website visibility and success.
The Core Web Vitals are a collection of four specific factors that are critical to the overall user experience: Largest Contentful Paint (LCP), First Input Delay (FID), Cumulative Layout Shift (CLS), and Interaction to Next Paint (INP).
Cumulative layout shift is a measure of how much a page on your site shifts unexpectedly during a user's visit. This is measured by the Layout Instability API, a standardized performance testing API .
To understand the meaning of cumulative layout shift, it is important to explain layout shift in general.
A layout shift occurs when content on your site "moves" or "shifts" unexpectedly.
Or, technically speaking, when an element visible in the viewport changes its starting position between two frames.
A common example: you're about to read a block of text... but then suddenly an ad appears that loads too late, pushing the text content down.
Here's another sample image from Google that illustrates this process:
If you've surfed the web, you've probably come across layout shifts, even if you don't know them by that name.
There may be multiple separate layout shifts in a single visit. The Cumulative Layout Shift metric therefore aims to capture the whole picture by measuring the total number of unexpected layout shifts on a page*.
*The exact measurement has gotten a bit more technical after some changes made by Google, but that's still the basic idea. If you are interested in the exact details, you can read about it here .
Why did Google introduce the Core Web Vitals?
Google introduced the Core Web Vitals in 2021 to improve user experience on the web and provide clear guidelines for publishers. The metrics are intended to help developers better focus on improving the UX of a website. Multiple studies show that better core web vitals can improve user retention and business metrics.
The launch of the Core Web Vitals was a significant step in Google's quest to make the web a more user-friendly place. By providing these metrics, Google has given website owners and online publishers a clear understanding of what they need to improve to provide a better user experience for site visitors.
Why is Cumulative Layout Shift bad?
The main reason Cumulative Layout Shift is bad is that it creates a bad user experience on your site .
At best, it's mildly annoying for your visitors. In the worst case, it can lead to visitors taking actions they don't want.
For example, imagine a visitor wants to click Cancel, but accidentally clicks Confirm because a layout shift moved the buttons' position when they clicked.
Aside from hurting your visitors' experience, poor cumulative layout shift values can also hurt your site's search engine rankings .
Since the Google Page Experience Update (which completed in August 2021), Google has been using Core Web Vitals as one of its SEO ranking factors. Because cumulative layout shift is part of the Core Web Vitals, it can affect your site's search performance .
If you fix all cumulative layout shift issues on your site, it will be better for both human visitors and search engines.
So what could be the cause of the cumulative layout shift? We'll get to that next..
What causes the cumulative layout shift?
Here's a quick rundown of the most common causes of layout shifts:
- The dimensions for images, iframes, videos or other embeds have not been set.
- Problems loading custom fonts that may cause text to be invisible or resize when custom fonts are loaded.
- Showing responsive ads (e.g. AdSense ) of different sizes (and not reserving space for these ads).
- Dynamic content insertion with plugins (cookie consent forms, lead generation forms, etc.).
- Using animations without the CSS property Transform.
Later in this post, we'll go into more detail about these issues and show you how to fix them.
How to measure CLS
It's relatively easy to find out if your site has significant layout shifts. First, we recommend that you visit your site from different devices and ask other people to do the same. You can observe whether the layout remains consistent when the pages are loaded. You will likely find that the CLS experience can be very different. It not only depends on how well optimized your website is, but also what device you are using. This is why PageSpeed Insights is the best tool for measuring your site's CLS. PageSpeed Insights links directly to Google's Core Web Vitals, so you can see right away how your CLS score affects how Google sees your site.
This service allows you to enter a URL and get an overall rating of performance based on data collected by Google over the last 28 days. Several metrics are considered in this assessment, including CLS, FCP, and LCP.
For this test, we chose a website with no recognizable CLS. PageSpeed Insights confirmed our suspicions as it returned positive results with a strong CLS score. Note that PageSpeed Insights offers a percentage breakdown for each value. In this case, 91% of users experienced no layout shift when loading the test website. For the rest of the visitors, however, there was a certain shift in the layout. That's to be expected when we are talking about CLS and the rest of the Core Web Vitals. User experience varies drastically depending on what device they visit the site from, internet connection, and many other factors. There is virtually no way to ensure that a user will never experience CLS, but you can certainly take steps to optimize that this percentage is as low as possible. In addition to field data, PageSpeed Insights also offers so-called lab data. These are performance metrics based on a single test and not data collected over time (which is considered field data).
In our test, we received a CLS score of zero, meaning there was no layout shift. For this one special test. Now let's compare that to another site that didn't get as high a CLS rating.
To meet Google's standards, your CLS should be below 0.10. Anything above that means there are significant, noticeable shifts in layout, resulting in a poor user experience.
How to identify the causes of layout shifts
If you want to find out what elements are causing layout shifts on your site, you can use Chrome Dev Tools to do so. If you open the tools (CTRL-SHIFT-I) and switch to the Performance tab, you can record performance tests while navigating the web.
After you stop recording, Chrome Dev Tools will display a timeline of load times, unique requests, and core web vitals. From this timeline, you can select individual layout shift events listed under Experience. This way you can see which elements they correspond to.
Once you know which elements are causing layout shifts, you can take steps to fix the problem. We'll talk about that in the next section. If you want to monitor your site's Core Web Vitals, we recommend setting up a Google Search Console account. Through Search Console, you can monitor performance metrics and core web vitals, which is hugely beneficial for search engine optimization (SEO). We think it's in your best interest to monitor Search Console regularly, but it never hurts to have a specific metric to track.
How to optimize your CLS score
Broadly speaking, there are two big culprits when it comes to high CLS scores: media files and ads. If you e.g. For example, uploading a high-resolution image file but not specifying the height and width can affect the layout of your page. In terms of site performance, it's best to use images that already have the exact dimensions you will be displaying. That way, the browser doesn't have to expend processing power (and time) to adjust the size accordingly. However, this is not always possible. If this is not possible, you should set width and height attributes for each image you display. That way, the user's browser knows exactly where the image fits and doesn't have to rearrange the layout at the last second. This is what these attributes look like in HTML:
If you're using WordPress, some image optimization plugins can automatically resize files on upload, which sets the required width and height attributes. When it comes to responsive images, you can rely on CSS instead of manually declaring width and height. With CSS, you can use the max-width attribute to tell browsers what percentage of the viewport the image should take up:
In this example, we're telling the browser to scale the image so that it takes up 90% of the user's viewport. At the same time, we set the height attribute to auto so that the browser calculates the ideal height based on the new width of the image and its aspect ratio.
The same principles apply to ads as to images. Typically you work with iframes, and sometimes ad networks use dynamically sized elements. This can mess up the layout of your pages. Instead of letting the ad networks decide how big the ads should be on your site, you can reserve areas for them. This means that you declare width and height attributes for ad areas and set fallbacks in case they don't load, so the empty space doesn't cause a layout shift. You can use the same type of CSS and inline styling for any ad container, so it stays fixed in place regardless of the ads you serve.
Frequently Asked Questions about Cumulative Layout Shift (CLS)
CLS can be a bit more complicated to understand than the LCP and FCP metrics. That's why we're addressing some frequently asked questions about CLS below to make sure you don't miss any important information.
In theory, you can have a very fast website that still gets a relatively poor CLS rating. As with other Core Web Vitals, the CLS score does not necessarily directly correlate to overall site performance. Your website can be blazing fast, but when it loads, it unfolds like an accordion. Even then, big layout changes will definitely have a negative impact on the site's UX. Google thinks this is incredibly important. This is why Google weights this data point so heavily.
Many users pay more attention to FCP and LCP ratings than CLS. That's because these two metrics are more easily associated with a website's performance. Although FCP is also a user-centric metric, CLS is more difficult to measure across a large population of users. All three metrics form the Google Core Web Vitals. That means if you ignore any of them, you run the risk of being ranked lower in the relevant search results. Ensuring that your site is optimized for a low CLS score usually has only positive impacts on site performance, such as LCP and FCP. If the image with the largest content disappears from the screen as soon as the user sees it, how useful is the fast loading time?
Judging by the numbers, Google considers anything below 0.10 to be a good CLS score. However, if you take the right measures, a CLS value of 0 is not impossible, in fact it is relatively normal for well-optimized websites. However, keep in mind that even for sites that regularly get 0 scores, a small percentage of users may face shifts. You have no control over this and you can only ensure that most of your users have a CLS value of 0.
Conclusion
There are many factors that contribute to good UX on your website. Ideally, it should load quickly. It should be easy to use. The position of the layout should not shift as elements appear. Drastic layout shifts lead to frustration and missed clicks. This leads to a higher bounce rate. And that's not good for any website. CLS is one of the Core Web Vitals that Google uses to measure the overall UX of your website. And users are the reason you have a website in the first place. Your experience is 1st priority. A low CLS score (less than 0.10) means your site loads smoothly and every aspect of the layout appears in the right place from the start.