What Is Cumulative Layout Shift (CLS) and How To Improve It

Cumulative Layout Shift (CLS) is a metric used in web performance that measures the visual stability of a webpage. Specifically, it quantifies how much the visible elements of a webpage shift unexpectedly during its lifecycle. Introduced by Google as part of its Core Web Vitals initiative, CLS aims to ensure a smooth and predictable user experience by penalizing pages that have significant layout shifts.

These unexpected shifts can be frustrating for users, often leading to misclicks or a general sense of instability. For example, imagine reading an article online when suddenly an image loads above the text, causing the paragraph you’re reading to move down. This disruption can degrade the user experience, making CLS a crucial aspect to monitor and optimize.

How CLS is Measured

CLS is calculated based on the sum of all individual layout shift scores for every unexpected layout shift that occurs during the lifespan of the page. The score of each shift is determined by the impact fraction (the size of the unstable element relative to the viewport) and the distance fraction (how far the unstable element has moved relative to the viewport).

The formula for calculating the layout shift score is:

CLS=∑impact fraction×distance fraction\text{CLS} = \sum \text{impact fraction} \times \text{distance fraction}CLS=∑impact fraction×distance fraction

A lower CLS score indicates a more stable page, whereas a higher score suggests more frequent or more significant layout shifts. According to Google’s guidelines:

A good CLS score is 0.1 or less.
A score between 0.1 and 0.25 needs improvement.
A score above 0.25 is considered poor.

Common Causes of Poor CLS

Images Without Dimensions: When images don’t have explicit width and height attributes, the browser cannot allocate space for them before they load. This often results in a layout shift once the image is fully rendered.
Ads, Embeds, and Iframes Without Dimensions: Similar to images, ads, embeds, and iframes without defined dimensions can cause sudden shifts when they load.
Dynamically Injected Content: Content added to the page dynamically, such as through JavaScript, can push existing content around if not handled properly.
Web Fonts Causing FOUT/FOIT: Flash of Unstyled Text (FOUT) or Flash of Invisible Text (FOIT) occurs when web fonts load, causing text to re-render, which can lead to layout shifts.
Actions Waiting for a Network Response: Elements that load based on user interaction (like dropdowns) and then shift the layout once the data is fetched can contribute to a higher CLS score.

Improving CLS

Set Explicit Size for Media: Always define width and height for images, videos, and other media. This allows the browser to allocate the appropriate amount of space while the media is loading, preventing unexpected shifts.

html

Reserve Space for Ads and Embeds: Allocate space for ads, iframes, and embeds in the layout using CSS. This ensures that even if they load asynchronously, they do not cause shifts.

css

.ad-slot {

width: 300px;

height: 250px;

}

Optimize Font Loading: Use the font-display CSS property to control how web fonts are loaded and rendered. font-display: swap; can prevent invisible text issues by using fallback fonts until the web font is fully loaded.

css

@font-face {

font-family: ‘MyFont’;

src: url(‘myfont.woff2’) format(‘woff2’);

font-display: swap;

}

Preload Key Resources: Preload fonts and other critical resources to ensure they load as quickly as possible, reducing the chance of layout shifts caused by late-loading assets.

html

Minimize Layout Shifts from Dynamic Content: Avoid inserting content above existing content unless necessary. If you must, use animations or transitions to create a smoother experience. For instance, use a placeholder of the same size as the content being loaded.
Avoid Layout Shifts from Network Responses: Ensure that the space required for content that depends on network responses is pre-allocated. This is particularly important for features like dropdowns or modals.
Implement Lazy Loading Carefully: While lazy loading images can improve performance, improperly implemented lazy loading can increase CLS. Ensure that lazy-loaded elements have reserved space.

html

Copy code

Tools to Measure and Monitor CLS

Lighthouse: Google’s Lighthouse tool provides detailed insights into various performance metrics, including CLS. It can be run via Chrome DevTools or as a standalone tool.
Web Vitals Chrome Extension: This extension offers real-time feedback on Core Web Vitals metrics, including CLS, directly in the browser.
Google Search Console: The Core Web Vitals report in Google Search Console provides an overview of how your site performs on key metrics, including CLS, based on real-world data from the Chrome User Experience Report.
PageSpeed Insights: This tool gives a detailed breakdown of your site’s performance, including CLS, and offers specific suggestions for improvement.
Chrome DevTools: The Performance panel in Chrome DevTools allows you to view layout shift events and understand their causes in detail.

Conclusion

Cumulative Layout Shift is a crucial metric for ensuring a stable and predictable user experience on the web. By understanding the common causes of layout shifts and implementing best practices to mitigate them, web developers can significantly enhance the user experience. This not only improves user satisfaction but also aligns with Google’s ranking factors, potentially boosting visibility and traffic.

Ensuring a low CLS score requires attention to detail in how elements are sized and loaded on the page. By predefining dimensions for images, ads, and embeds, optimizing font loading, preloading key resources, and carefully managing dynamic content, you can create a more stable and enjoyable experience for your users. Regularly monitoring CLS using available tools will help maintain and improve site performance over time.