Essential Guide to Core Web Vitals: Part 3

Cumulative Layout Shift (CLS)

We’ve tackled LCP and INP, now let’s take a look at Cumulative Layout Shift (CLS). CLS quantifies the maximum unexpected layout shifts on a page by measuring the largest burst of these shifts, which are grouped into session windows based on proximity in time. Essentially, it assesses how much a page's visual elements move around unexpectedly during its lifespan. Layout shift is calculated using this formula:

layout shift score = impact fraction * distance fraction

impact fraction refers to the percentage of the viewport's area occupied by the combined visible areas of shifting elements before and after their movement

distance fraction refers to the largest distance any shifting element moved, expressed as a fraction of the viewport’s largest dimension

Let’s consider the image above, initially a component (with blue background) is positioned at the top of the viewport, but after some time or some minor user interactions on the page, it moved to the center (represented as red dotted lines) of the viewport. Let’s say it occupies 50% of the viewport and shifted below about 25%. Then, we can estimate the two factors:

Impact fraction = 75% = 0.75

Distance fraction = 25% = 0.25

Applying the formula, we’ll get a layout shift score of 0.1875. This CLS score is categorized as “Needs Improvement”. CLS score is categorized as Good (< 0.1), Needs Improvement (0.1 to 0.25), and Poor (> 0.25). For good user experience, websites should aim to have a CLS score of less than 0.1, as well as targeting 75th percentile of page loads across all devices. CLS can be measured using field and lab data. Some tools are CrUX, Lighthouse, PageSpeed Insights, WebPageTest, and even Chrome DevTools. Let’s check CrUX sample report data.

CrUX

Let’s say we have this graph below:

This horizontal bar graph represents the Cumulative Layout Shift (CLS) performance data from the last 10 months (May 2024 - Feb 2025). Each month's data is categorized into three levels: Good CLS (Green), Needs Improvement (Orange), and Poor CLS (Red), with their corresponding percentages. At the top, the Good CLS for the most recent month (Feb 2025) is 80.43% (green), representing the percentage of page loads where the CLS was less than 0.1, the desired range for passing Core Web Vitals. The 1.7% below the Good CLS, with the small green arrow pointing up, indicates an increase in the percentage with good CLS relative to the previous month. We can also see the percentage of Poor CLS (9.19%), indicating that approximately ~9% of users are experiencing significant and unexpected layout shifts. The Poor CLS percentage for February is relatively lower compared to January, as shown by the green arrow pointing down below the Poor CLS score. There's also the P75 CLS (0.05), which represents that 75% of users (the typical user experience, filtering out outliers) are experiencing a CLS of 0.05 when interacting with the page. This means that a typical user is experiencing a very good layout stability. The zero value below the P75 score (0.05) means that there was no change from the previous month. Google recommends that the P75 CLS should be 0.1 or less, which is currently being met. However, there are fluctuations in the data. Specifically the month of September 2024 where the Good CLS is only 35.94%. This requires investigation, but may have been resolved in the following months. The percentage of Good CLS has increased, and the percentage of poor CLS has decreased in the most recent data. This kind of positive trend is a good sign. Maintaining a good CLS of more than 80% is a good sign that most users experience a visually stable page.

In lab data, tools like Lighthouse can help identify layout shift issues. Now, let’s check some causes of CLS issues and see how to improve CLS score to make sure a website does not have unexpected layout shifts and provides a stable visual experience to users.

Images

Common causes include images without specified dimensions, dynamically injected content like ads and embeds, and font loading issues. To mitigate CLS from images, always include width and height attributes or use CSS aspect-ratio to reserve space before loading. This ensures the browser allocates the correct layout area, preventing content from shifting once the image appears. For responsive images, maintain consistent aspect ratios across srcset variations, and utilize the <picture> element with width and height attributes on <source> elements when necessary.

Ads/Embeds

Dynamically inserted content such as ads and embeds significantly contributes to CLS. To resolve this, reserve space for these elements using min-height or aspect-ratio CSS properties. When dealing with ads, consider historical data to estimate appropriate space or set the initial size to the smallest possible dimension, accepting minor shifts for larger content. Place late-loading content lower in the viewport to minimize its impact, and avoid inserting new content without user interaction unless absolutely necessary. For dynamic content updates, replace old content within fixed containers, use carousels, or implement "Load more" buttons to prevent unexpected shifts.

Fonts

Font loading can also cause layout shifts due to the Flash of Unstyled Text (FOUT) or Flash of Invisible Text (FOIT) effects. To minimize these shifts, use font-display: optional, ensure appropriate fallback fonts, and minimize size differences between fallback and web fonts using size-adjust and related APIs. Employ the Font Loading API and preload critical web fonts with <link rel=preload> to expedite loading and reduce shift instances. Finally, when using CSS animations, favor transform properties like translate, scale, and rotate over properties like top and left, which trigger re-layouts and contribute to CLS.

Conclusion

In summary, Cumulative Layout Shift (CLS) measures the unexpected movement of visual elements on a page, resulting in a negative impact on user experience. Achieving a low CLS score, ideally below 0.1, is crucial for a stable and positive user interaction. By addressing common causes like images without dimensions (width & height), dynamic content (ads/embeds), and font loading issues through proper coding practices, CLS will significantly improve and ensure a consistent and predictable user experience. We’ve tackled all three current stable metrics consisting of the core web vitals, LCP for measuring the loading performance of a page, INP for the interactivity, and CLS for quantifying visual stability. With these guides we can start our journey in making a better and performant website with better overall user experience.