What is CLS breakdown
The CLS breakdown breaks down Cumulative Layout Shift (CLS) into its key contributing factors, helping you identify exactly where and why layout instability occurs during the page load experience.
CLS is a key metric from the Core Web Vitals and measures unexpected visual shifts that impact user experience.
Healthy CLS breakdown sample
Unhealthy CLS breakdown sample
In this example, the CLS breakdown clearly indicates unhealthy visual instability across multiple sources:
Scroll-related layout shifts are the leading issue, contributing a high 0.147. This suggests elements are moving unexpectedly during user interaction, possibly due to lazy-loaded components, dynamically injected banners, or sticky headers resizing mid-scroll.
Other sources contribute 0.129, which is also significantly above acceptable levels. These may include unpredictable UI shifts from injected DOM elements, client-side script updates, or delayed animations.
Pageload-related shifts are at 0.02, within healthy range, and not the primary concern.
Style-based shifts are not reported, which rules out issues from late-loaded styles or font swaps in this case.
Together, Scroll and Other categories alone add up to 0.276, far beyond the recommended CLS threshold of 0.1. This kind of instability can result in poor user experience and negatively affect conversion rates.
The biggest red flag is the scroll-induced instability, which should be the first area of investigation and optimization.
Resolving unhealthy CLS breakdown
Go-to action plan to resolve an unhealthy CLS breakdown:
Ask Uxi to analyze your CLS breakdown values and suggest improvements
If the Time to First Byte is high, please go to Experience → Time to First Byte tab and drill down to its widget breakdowns and look for poor performers
Simulate CLS of the suspected breakdown to see if fixing it will resolve the CLS breakdown. If yes, this is where the resolution focus should be.
Use an automated CLS optimization tool like Navigation AI to improve your CLS breakdown values
Once you’ve improved CLS, set an alert to be the first to know if it starts worsening again.
Try it yourself
Discover how your website performs with real user data.