What Is Cumulative Layout Shift, and Why Is It Important?

Your website visitors’ experience depends on your site’s layout and design quality. But if the formatting suddenly shifts off-screen, your frustrated users may go elsewhere for their information. Fortunately, the Cumulative Layout Shift (CLS) metric, which is part of Core Web Vitals, tracks these events to help you stay on top of any website layout issues.

In this blog post, we’ll answer the common question of what is Cumulative Layout Shift, and explain how this metric affects your site’s search engine rankings and user engagement.

Key Takeaways

• Cumulative Layout Shift (CLS) is a metric introduced by Google that measures page stability and user interaction quality.
• A low CLS score affects search engine ranking, while an optimized score can result in a higher ranking.
• Common causes of layout shifts are poorly sized containers, bad code, late-loading images or ads, gaps between elements, lack of font size declarations for text blocks, and more.
• To prevent and fix layout shifts, avoid inserting new content above existing content, set size attributes for video and image elements, reduce layout shifts caused by ads and embeds, use common fonts instead of custom fonts, and reduce the amount of dynamic content.

Cumulative Layout Shift Explained

Cumulative Layout Shift (CLS) refers to an issue in web development where elements of a page move unexpectedly while the page is loading, causing a poor user experience. As one of Google’s Core Web Vitals that greatly affects user experience, CLS should be minimized as much as possible to improve your rankings.

CLS looks at all the web page’s elements, such as text, buttons, fonts, and forms, that move unexpectedly while content loads or after the initial page load. The sudden movements from unstable elements result in layout shifts.

Cumulative Layout Shift and Core Web Vitals

Core Web Vitals is a set of metrics by Google that provide insight into a website’s performance and user experience. These metrics measure loading time, interactivity speed, and visual stability. The CLS score is an important component of Core Web Vitals. For satisfactory Core Web Vital scores, consider how your site’s text, images, and video interact when creating your website. This way, you’ll create optimized pages without major loading delays and reduce the chances of layout shifts from an unstable element or two.

This approach will save you valuable time since adjustments won’t be needed to fix layout issues later. Your website will have reduced loading times with a layout developed to perform more efficiently, contributing to positive Core Web Vitals. However, if you have an existing website with issues, you can use Core Web Vitals to make improvements that will help you get a better CLS score, like responsive images, proper image dimensions, and knowing how much space is needed for each container.

Unexpected vs. Expected Layout Shifts

An unexpected layout shift occurs without any warning or anticipation from the user. These layout shifts occur from an unstable element that disrupts the page’s loading process. Unexpected layout shifts distract your users away from the page. As a result, it’s vital that you eliminate them from your web pages.

However, not all layout shifts are bad. Expected layout shifts refer to intentional changes that a user anticipates when they take an action. For example, new content is displayed when a user clicks on the tab menu, resulting in a layout change. Another form of expected layout shift occurs while loading a page, and the elements move up or down as images are rendered.

Why Is Cumulative Layout Shift Important?

Cumulative Layout Shift is an important metric that measures the quality of user interaction on a website. This metric measures how often users experience unexpected layout shifts when loading web pages and interacting with content.

The CLS score also affects the ranking factor, making this metric essential for businesses aiming for maximum search engine optimization. A low score indicates the site has many issues with layout shifting, which negatively impacts search engine ranking. Conversely, a high layout shift score indicates that the site has little to no issues and will have a higher ranking.

Why Cumulative Layout Shifts Occur

CLS can have a major impact on usability, accessibility, and the effectiveness of any website or application. An important factor to consider when evaluating Cumulative Layout Shift is the aspect ratio. This is another way of stating how elements should be “stretched” to fit their respective areas on the page. The same aspect ratio should be used throughout the website’s design and content.

Several additional causes can lead to Cumulative Layout Shift, including the following:

• Poorly executed JavaScript code: When JavaScript code is written incorrectly or not properly optimized, it can cause layout changes and unexpected elements movements. This can be especially problematic if the code is not tested thoroughly before deployment.
• Inaccurate font loading: If fonts or other resources take too long to load or fail altogether, it can cause layout changes that disrupt the user experience.
• Dynamic content loading: Content that is dynamically loaded onto a page without warning can cause layouts to shift as new visible elements are added.
• Ads and third-party scripts: Ads and third-party scripts tend to run on a “best effort” basis, which means they sometimes block content from loading immediately and instead cause it to load later, leading to layout shifts when the blocked content finally loads into view.
• Web font optimization issues: Fonts that are not optimized for performance or lack support for different screen sizes can increase CLS due to inconsistent rendering across devices.
• Poorly sized images or advertising assets: If an image is not given width and height attributes, it can cause unstable elements on the page to move around when the image loads.
• Gaps between elements: Forcing containments of elements using margins instead of padding causes large gaps. This will potentially push down nearby elements when missing contained values load.
• User input: User input by clicking on something that pushes the content down the screen.

Making sure pages render properly requires developers and designers to be aware of how their code affects page layout. Through careful planning and testing, CLS should be avoided whenever possible in order to provide users with an enjoyable experience when visiting websites or using applications.

How to Find Your Cumulative Layout Shift Score

Now that you understand the importance of CLS, let’s delve into finding your website’s CLS score. To do this, Google provides several online tools to measure your website’s CLS score. Each offers insights into your website’s performance, focusing on CLS and providing data on other Core Web Vitals, such as Largest Contentful Paint (FCP) and First Input Delay.

Google PageSpeed Insights

PageSpeed Insights is a notable tool because of its simplicity and ease of use. To find your CLS score using PageSpeed Insights, simply input your page URL and click on “Analyze.” This tool will generate a comprehensive report displaying your CLS score for mobile and desktop devices under the “Lab Data” and “Field Data” sections. Other useful information regarding your website’s performance will also be available, offering actionable recommendations to optimize your site.

Google Search Console

Another exceptional tool provided by Google is Search Console. The report generated will classify your website’s URLs into “Good,” “Needs Improvement,” and “Poor” based on their CLS scores and other user experience metrics. You can then analyze each URL individually, identify issues, and implement necessary improvements.

Chrome DevTools’ Lighthouse

For those who prefer an open-source tool, Google Lighthouse provides a more in-depth analysis and recommendations to improve your website performance. Running Lighthouse generates an extensive performance report, including your website’s CLS score under the “Performance” category. It also provides actionable advice for optimizing your page’s layout stability and numerous other performance issues.

What Is an Average or Good CLS Score?

The Cumulative Layout Shift Score threshold ranges from a low of under 0.1 to a high of over 4.0. An optimal Cumulative Layout Shift Score is less than 0.1. A score of over 4.0 indicates the website has layout shift issues. The lower the CLS score is, the less time a layout shift occurs. For an optimal user experience, your website’s score should be 0.1 or less. 

Impact and distance fractions are two metrics used to determine the Cumulative Layout Shift score. Impact fraction measures the total area of unexpected layout shifts relative to the viewport size. Distance fraction is how far elements move during these layout shifts. Collectively, they quantify how much an end user’s experience is affected.

How to Prevent and Fix Cumulative Layout Shifts

The following guidelines can help prevent and fix Cumulative Layout Shift:

Avoid Inserting New Content Above Existing Content

Prevent layout shifts from new content by organizing your page layout before you make edits. Use headings only where necessary to navigate web pages and documents. Verify that media such as photos and videos don’t overlap with written material. Check that extra inserted items don’t move the media too high within text blocks.

Set Size Attributes for Video and Image Elements

By specifying height and width attributes for images and videos, you’re telling your web browser the maximum space it can allocate. The image size is determined by the pixel dimension and file size.

Reduce Layout Shifts Caused by Ads, Embeds, and iFrames

Don’t rely on advertisements and embeds (links, images, videos, gifs) to generate revenue. These can lead to unexpected layout shifts that can harm your user’s experience.

Avoid Custom Fonts

Custom fonts can cause flashing text or shifting layouts as pages load. These issues are caused by the different ways browsers and operating systems render the font files. To prevent these issues, pay careful attention to the types of fonts you’re using and ensure they are compatible across all devices.

Prevent Invisible Text Flash

In web design, the flash of invisible text (FOIT) is a visual glitch that occurs when web fonts fail to load properly. This causes text to disappear or be invisible momentarily.

You can use various strategies and tactics to prevent this issue from occurring. This includes adding the font-display property in your CSS code to control how fast the font will be visible while loading. This ensures that visitors won’t be left with blank spaces due to FOIT. You can also serve web fonts from local files instead of external services reduces latency and speeds up page load time, lessening the potential for FOIT issues.

Reduce the Amount of Dynamic Content

Dynamic content such as CTA buttons, banners, widgets, and related articles don’t always know the size or load size when the page loads. Rendering these objects often contributes to lower CLS scores.

Wrapping Up

Understanding your website’s Cumulative Layout Shift (CLS) score is crucial in enhancing user experience and maintaining a strong search ranking. By using tools such as Google PageSpeed Insights, Google Search Console, and Lighthouse, you can easily access your site’s CLS score and make informed decisions on optimizing layout stability.

Now that we’ve answered the question of what is Cumulative Layout Shift, you should keep in mind that it’s only part of the equation. It’s crucial that you continually monitor and evaluate your site’s overall performance, including other Core Web Vitals, to ensure the best user experience for your visitors. In doing so, you will build a seamless, stable, and enjoyable user experience, leading to higher user satisfaction and ultimately, better search ranking results.