.svg)
.svg)
Cumulative Layout Shift (CLS) Explained
Optimize Visual Stability with Cumulative Layout Shifts & Fix All CLS Issues
Cumulative Layout Shift (CLS) is a web performance metric that measures the cumulative change in the visual position of elements on a page. You might also hear it referred to as layout shift.
CLS is often used as a secondary measure for Site Speed and User Experience - but does not directly impact either of those dimensions. Instead, it’s more of an informational metric that can help you identify potential issues, especially if your site has a lot of images or other type-heavy content.
Cumulative layout Shift is one of the three Core Web Vitals that Google introduced and is now a major ranking factor that affects your web pages' SERP rankings.
This blog post explains the CLS Core Web Vitals metric in detail, how it can help measure your website’s user experience, and how you can optimize your web pages to provide fast-loading web pages.
Table of Contents
6.
7.
8.
9.
10.
What Is Cumulative Layout Shift (CLS)?
Cumulative Layout Shift or CLS is a web performance metric that measures the cumulative change in the visual position of elements on a page. When a page loads, the page layout is displayed in the browser, and each element has its respective position on the page. If a page has a lot of images or other type-heavy content, the layout jump will be more.
Cumulative Layout Shift (CLS) is the total amount of visual change that has occurred since the page loaded.
A certain amount of layout change is inevitable and beneficial, e.g., when a user adds a product to their shopping cart, the items in their basket are shifted down, and the “Add to Cart” button is moved to a new location.
However, layout changes can harm the user experience if it happens too frequently or is more significant than necessary.
CLS is one of the Core Web Vitals metrics. Make sure you optimize your web pages for First Input Delay (FID) and Largest Contentful Paint (LCP) as well.
What Causes Cumulative Layout Shifts?
Page shifts occur when the content loads at varying speeds, causing the layout to move and changing what the user looks at. The more visual change on a page since loading, the higher the cumulative layout shift.
The following example demonstrates what occurs when an ad banner is loaded after the remainder of the webpage. The content gets pushed down, and the user experience suffers.
CLS can be caused by advertisements loading slowly, images of unknown size suddenly appearing, or dynamically introduced DOM elements:
1. Unexpected Image & Video Sizes:
Images and videos with no dimensions are typical causes of cumulative layout shift. If you don't give the width and height size properties, the browser doesn't know how much space to allot while loading these items. The available space will most likely be insufficient. Consequently, after these items are fully loaded, they will take up more space than planned, causing the existing content to move down.
2. No Dimensions for Ads, Embeds, and Iframes:
Ads, embeds, and iframes without dimensions can cause cumulative layout shifts. They are dynamic elements that take up space on the page, pushing down the other elements that were initially there. Again, not reserving enough space causes these dynamic parts to push down the existing material. As a result, new layout changes will occur on the page.
3. Web Fonts Causing FOUT or FOIT:
Web fonts can cause a user to have an unpleasant experience while viewing a page. Depending on how slowly the fonts load, users might face two issues; Flash of Unstyled Text (FOUT) or Flash of invisible text (FOIT). In the FOUT issue, the text on the page appears with a not-so-good style while the custom font is loading. Once the custom font is ready, it will replace the fallback font and could cause a layout shift. For FOIT, the user cannot see any text until the custom font is loaded, and the content could cause a layout shift.
4. Waiting for a Network Response Before Updating DOM:
In case of a slow response, the page might take time to load, and the user might take an action that may result in cumulative layout shifts. For example, if a network response takes 5-10 seconds, the user may click on a button. It might cause unanticipated layout shifts as the event (clicking on the button) will not be handled until the network response arrives.
5. Dynamically Injected Content:
Except for user interaction, never add material to existing content. It guarantees that a cumulative layout shift is anticipated. When trying to load a site, you may have encountered layout adjustments owing to a UI that appears at the top or bottom of the page. This happens with banners and forms that modify the website's layout, much like an ad.
The higher the cumulative layout shift on your pages, the more likely it is that something on your website is not rendering correctly.
Expected vs. Unexpected Cumulative Layout Shift
Not all cumulative layout shifts are bad. In reality, many dynamic web applications regularly modify the starting position of components on the page.
1. User Initiated Layout Shift
A layout change is only harmful if the user is not anticipating it. Layout changes that occur in reaction to user activities (clicking a link, hitting a button, entering a search box, and so on) are typically accepted as long as the shift happens near enough to the event that the user understands the relationship.
For example, suppose a user interaction initiates a network request that may take some time to complete. In that case, making some space and displaying a loading indication immediately is essential to avoid an unpleasant layout shift after completing the request. If the user is unaware that something is loading or has no idea when the resource will be available, they may attempt to click something else while waiting—something that may move out from under them.
Layout shifts within 500 milliseconds of user input will be marked with the hadRecentInput indicator, allowing them to be removed from computations.
2. Animations & Transitions
When done correctly, animations and transitions are an excellent method to refresh material on the website without shocking the user. A negative user experience is nearly always created by content that switches abruptly and unexpectedly on the page. Yet, material that goes from one location to the next gently and organically may assist the user in better comprehending what's going on and leads them between state changes.
Maintain prefers-reduced-motion browser settings, as certain site visitors may face negative impacts or focus concerns due to animation.
The CSS transform feature enables you to animate components without causing layout changes:
Use transform: scale() instead of modifying the height and width attributes.
To reposition elements, avoid modifying the top, right, bottom, or left attributes and instead use transform: translate().
How Does Cumulative Layout Shift (CLS) Impact SEO?
CLS is a Core Web Vitals metric making it an essential ranking factor for Google. As a result, your CLS scores impact your web pages’ SERP rankings and SEO traffic generation.
If the cumulative layout shift is high, it could negatively affect the user experience.
Cumulative Layout Shift like other core web vitals metrics ensures that your visitors' experience is smooth on any device. CLS can impact SEO in a few ways.
First, it can help to ensure that your pages are rendered in a way that is visually consistent and easy to navigate, regardless of the device or screen size being used. This can be especially important for mobile users, who may be using a smaller screen to view your content. By having a good Cumulative Layout Shift score, you can ensure that your users won't become frustrated with your website, won't accidentally click a link and go to another page, and won't make a purchase by mistake. Bad CLS scores can cause elements on a page to become hidden or inaccessible to search engine crawlers, leading to a decrease in organic traffic.
For example, if a page has a lot of content that scrolls and the cumulative layout shift are high, it could be more difficult for users to read. This could lead to poor user engagement and, ultimately, a drop in search rankings. Thus, unexpected page layout shifts hurt the user experience.
Second, CLS can help to improve your site's overall user experience, which can in turn lead to higher engagement and conversion rates. You can achieve all your SEO goals with a good user experience: rankings, traffic, conversions, and revenue. Finally, good Cumulative Layout Shift scores can also indicate that your site is well-optimized for search engines, as it can be an indicator of a high level of technical SEO optimization.
A low Cumulative Layout Shift (CLS) helps ensure that the page is delightful by quantifying how often users experience unexpected layout shifts—a user-centric metric that tracks visual stability.
Cumulative Layout Shift (CLS) Advantages
The advantages of the CLS Core Web Vitals metric are as follows:
1. It is easy to measure, and multiple tools can help you track this metric, including Google’s own PageSpeed Insights and GTMetrix tools.
2. It’s easy to understand and can be explained to non-technical stakeholders. CLS can also be used to monitor progress over time.
3. It’s useful for designers and developers - Designers can use the metric to minimize the amount of layout change on their pages. Likewise, developers can use it to find issues with page loading speed.
4. It can help identify potential issues - The metric can help identify potential problems, including page loading speed, navigation, and general usability.
Cumulative Layout Shift (CLS) Disadvantages
The disadvantages of the CLS metric are as follows:
1. CLS is a secondary metric to measure your page’s loading speed. It’s not used as a metric to measure your page’s loading speed directly, but instead how much the page's layout changes as it’s loading. CLS only affects your page’s loading speed when the page is loading. This means that the metric does not consider the time it takes for a user to click a link to open a page.
2. It’s specific to a particular browser - The metric is browser-specific, so it’s essential to understand how it’s calculated for each browser.
What Is A Good CLS Core Web Vitals Score?
Cumulative layout shift works by measuring the elements on each page and calculating their individual offsets (how far they are from where they are supposed to be). It then takes all of those respective offsets and adds them together to calculate the cumulative offset. The smaller this value, the better and faster a page will load.
According to Google, websites should aim to have a Cumulative Layout Shift of less than 0.1 for 75% of page loads.
How Google Calculates Cumulative Layout Shift (CLS)?
Google's CLS (Cumulative Layout Shift) score measures the number of unexpected layout shifts to a page during the lifetime of the page. It is calculated by summing the individual layout shift scores for every unexpected layout shift on the page.
Each layout shift is assigned a score out of 1, taking into account the size of the visible area moved and the distance moved. The higher the score, the more significant the impact of the shift.
The Cumulative Layout Shift score is calculated by combining two measurements – Impact Fraction and Distance Fraction.
The impact fraction quantifies how much space an unstable element occupies in the viewport. When visible items change suddenly to another location, the impact fraction computes the entire area of the shift:
Impact fraction = Impact region / Viewport area
The distance fraction represents the greatest distance unstable components move during unexpected layout shifts. The distance fraction is calculated as follows:
Distance fraction = Maximum move distance / Viewport area
The final Cumulative Layout Shift score is obtained by multiplying the Impact Fraction by the Distance Fraction. For example, if an element occupies 50% of the viewport and then drops down by another 25%, the Impact Fraction is 0.75, and the Distance Fraction is 0.25.
The Cumulative Layout Shift or CLS score is 0.75 X 0.25 = 0.1875.
Tools to Measure Cumulative Layout Shift (CLS)
There are several tools that you can use to measure the CLS metric.
1. Google’s PageSpeed Insights (PSI)
PSI can help you track the metrics and identify issues that could be impacting your page’s loading speed, such as large images. This can help you improve your page’s layout and loading speed.
2. GTMetrix
GTMetrix is another tool to help you track the metrics and identify potential issues. You can also use it to check your page loading speed and find ways to improve it.
3. Webpagetest
Webpagetest is a powerful tool that can help you test your page loading speed, including the amount of layout change. This can help you identify issues and make changes to your web pages.
Inspecting Cumulative Layout Shift
To optimize for CLS, determine the specific items generating layout shifts.
Chrome's DevTools can assist you in this regard.
Right-click anywhere on the page in the Google Chrome browser and select "Inspect."
On the right, you'll see the DevTools panel:
Go to the "Lighthouse" tab and choose "Analyze page load."
It will create a Lighthouse website performance report.
If there were any page layout changes, you would notice them in the report's "DIAGNOSTICS" section.
Expand the item now. You'll be able to observe which elements were generating layout changes. And their unique impact on your CLS score.
Keep an eye out for the larger CLS contributions. Don't be concerned if you encounter an element with a CLS contribution of 0.001, for example, because it will not negatively impact the user experience.
Only if all components lead to a Google CLS score of more than 0.10 do you have a severe CLS problem.
If you want to go further and find out when those adjustments in the chronology occurred while the page was loading, you'll need to look at the original trace.
Click "See Original Trace" on the Lighthouse report to do so.
It will take you to the "Performance" tab.
Examine the "Experience" track or the layout shifts (LS) note in the "Web Vitals" track to determine when the shifts occurred.
How to Optimize for Cumulative Layout Shift (CLS)?
1. Defining Dimensions for Images and Videos:
You can improve CLS score using the correct width and height attributes for your images and videos. To ensure images are responsive and load correctly, the srcset attribute must define a set of images of the same aspect ratio.
<img width="500" height="500" src="example-500.jpg" srcset="example-500.jpg 500w, example-1000.jpg 1000, example-1500.jpg 1500w" alt="Example of an image.">
It helps browsers load the right amount of space for the images. Furthermore, modern browsers can also set the default aspect ratio based on the image or video’s attributes. To help browsers predict the various aspect ratios, use CSS aspect ratio boxes such as:
img {aspect-ratio:attr(width)/attr(height);}
With this technique, you can ensure that your web page loads faster and looks better.
2. Manage Dynamic Content:
Managing dynamic content regarding Cumulative Layout Shift (CLS) is essential. It is recommended to avoid displaying new content unless triggered by user interaction, as CLS counts only the layout shift when users are not interacting with the page.
3. Optimize Space & Size for Ads:
Paid ads can be a significant source of layout shift, detrimental to user experience. Employing a few best practices when working with ads is essential to avoid this. First, assign fixed dimensions to the ads to reserve enough space to load them.
You should also reserve the biggest possible ad space based on historical data. Keep all spaces reserved for ads not yet displayed, and place non-sticky ads in the middle of the page. Following this best practice can help you optimize your web page for the CLS score.
4. Manage Space for Embeds and Iframes:
The guidelines for managing embeds and iframes are similar to those for managing advertisements. You should, in particular, plan for ample room for such features. Again, historical data can be beneficial in determining how much space to reserve. A placeholder or fallback is an appropriate approach to deal with the uncertain embed size.
5. Preload Fonts:
Preloading fonts is an excellent practice to improve CLS score. Preloading fonts instructs the browser to load the fonts as a top-priority resource. The browser will load the fonts quickly while displaying the page. As a result, the typefaces will most likely be included in the first contentful paint when the page's primary content is fully loaded and shown. There will be no cumulative layout shift in this situation.
You may apply the rel=preload attribute to the following web fonts:
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>
6. Use CSS Transform Property for Animation:
Take care of animations as the final best practice to maintain visual stability. You can utilize the CSS property transform, which does not affect the layout. You will handle the "Avoid non-composited animations" PageSpeed guideline.
Offer Better User Experience & Good CLS Scores With Quattr
The current process of optimizing web pages for CLS only allows you to optimize the scores for one web page at a time. This can be a challenge if you have a website with thousands of web pages. Furthermore, existing tools do not allow you to optimize and track your CLS across your entire website.
The Quattr platform addresses the shortcomings of the current process and helps you optimize your site to improve overall page experience and CLS Scores. For example, you can use the Quattr platform to view CLS scores for each page of your website all at once and know if your scores are Good, Needs Improvement, or Poor. Quattr also lets you compare all Core Web Vital scores against your competitors in one view.
Quattr understands the need to provide the best user experience; hence, you can track your accessibility and page performance updates within the platform. With Quattr, you get a list of prioritized recommendations and user experience improvements you can make across your entire site.
This list is ranked based on what key pages you should focus on and aligns optimization efforts with business metrics like clicks and conversions so that you can measure the benefits of your actions.
Continue to Optimize Cumulative Layout Shift (CLS)
Cumulative Layout Shift (CLS) is a web performance metric that measures the cumulative change in the visual position of elements on a page. The metric is browser-specific, which means that it’s essential to understand how it’s calculated for each browser.
The metric can help identify potential issues, including page loading speed, navigation, and general usability. You can use the information you get from tracking the metric to improve your web pages.
While the current optimization tools only allow you to track and optimize CLS scores per web page, Quattr can help scale and automate your optimization efforts.
Scale your CLS & Core Web Vitals Optimization Efforts with Quattr
Get StartedCumulative Layout Shift (CLS) FAQs
What is CLS?
Cumulative Layout Shift (CLS) is a metric defined by Google's Core Web Vital & measures the number of unexpected layout shifts on a page. It measures the total amount of shifted layout from when the page starts loading until the user interacts with it.
What is CLS Scoring Metrics?
The CLS scoring metrics range from 0.0 to 1.0, with 0.1 being the minimum threshold for good performance. Scores below 0.1 are considered good, 0.1 to 0.25 needs improvement, and above 0.25 is considered poor performance.
How to Improve CLS score?
Improving the CLS score requires addressing render-blocking resources, avoiding unexpected DOM manipulations, using font display: optional for font loading, and adding height and width attributes to images. Other things to consider are reducing the number of ads, optimizing web fonts, improving server response times, and using an animation library.
How to Fix Cumulative Layout Shifts on Mobile?
To fix CLS on mobile, optimize page loading time, reduce server response times, compress images, and remove render-blocking resources. Additionally, preload fonts and defer scripts, avoid unexpected DOM manipulations, use font display: optional for font loading and add height and width attributes to images. Finally, reduce the number of ads, optimize web fonts, and use an animation library.
About The Author
About Quattr
Quattr is an innovative and fast-growing venture-backed company based in Palo Alto, California USA. We are a Delaware corporation that has raised over $7M in venture capital. Quattr's AI-first platform evaluates like search engines to find opportunities across content, experience, and discoverability. A team of growth concierge analyze your data and recommends the top improvements to make for faster organic traffic growth. Growth-driven brands trust Quattr and are seeing sustained traffic growth.
