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.
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.
The layout of a page can shift when content loads at different speeds, altering the view for the viewer. The more visual change that has occurred on a page since loading, the higher the cumulative layout shift. This could be due to:
Large images that are not optimally compressed can shift the page’s layout more than necessary. As a result, the page’s performance could be negatively affected if the layout change is significant. Large images that are not optimally compressed can shift the page's layout more than necessary.
Content that scrolls - Some content that requires excessive scrolling, such as extended text, menus, etc., can cause the page’s layout to shift as the user scrolls down the page. The cumulative layout shift could negatively affect the user experience if the content is important.
Website design - The design of the website can also have an impact on cumulative layout shift. For example, a website with a large banner image at the top of each page could cause the layout to shift excessively each time a page is loaded.
The higher the cumulative layout shift on your pages, the more likely it is that something on your website is not rendering correctly.
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.
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.
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.
The advantages of the CLS Core Web Vitals metric are as follows:
It is easy to measure, and multiple tools can help you track this metric, including Google’s own PageSpeed Insights and GTMetrix tools.
It’s easy to understand and can be explained to non-technical stakeholders. CLS can also be used to monitor progress over time.
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.
It can help identify potential issues - The metric can help identify potential problems, including page loading speed, navigation, and general usability.
The disadvantages of the CLS metric are as follows:
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.
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.
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.
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.
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.
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.
1. Reduce the number of large images on your pages to avoid impacting the layout shift. Large images can shift the layout more than necessary, causing the page to take longer to load. 2. Optimize image and video size by defining width and height. This will ensure that the layout shifts are reduced and optimized for speed. 3. Use CSS sprites to combine multiple images into one file. 4. Reduce the scrolling content on your pages to avoid impacting the layout shift. This could be menus, footers, etc. Make sure any vital content is above the fold. 5. Avoid design choices that increase layout shift, such as large banner images at the top of each page. Instead, make sure images and other design elements are in a suitable position. Also, preload or use font: display values and make sure the font is loaded before it is used.
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.
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.