Skip to main content

CLS distribution

CLS distribution without noise

Teodor Tsvetkov avatar
Written by Teodor Tsvetkov
Updated over 3 weeks ago


What is CLS distribution

The CLS distribution lens breaks down your number of pageviews into 0.5s intervals along the ​Cumulative Layout Shift (CLS) timeline. It’s an efficient way to see whether most views are stable, need improvement, or are highly unstable in terms of visual stability during loading.

CLS is one of the key metrics in the Core Web Vitals and represents how much visible content shifts unexpectedly on the page.



Healthy CLS distribution sample


Should you worry

A healthy CLS distribution looks like a steeply declining bar chart — most pageviews should be concentrated at the far left near 0 CLS, with very few as CLS increases. In the screenshot, nearly all pageviews fall within the green (good) zone, and the P75 (75th percentile) marker is well under the 0.1 CLS threshold. This indicates excellent visual stability for the majority of users. There are no significant spikes in the yellow or red zones, meaning layout shifts are rare and well-managed.

Watch the P75 (75th percentile) marker too. If it is not within the green (good) zone, your CLS needs improvement. The further to the left it is in the green area, the better — ideally under 0.1 CLS.

Unhealthy CLS distribution sample

In the example below, the CLS distribution reveals a growing number of users experiencing higher layout instability after the 0.15 mark — a clear sign of performance issues negatively impacting user experience.

Resolving unhealthy CLS distribution

Go-to action plan to resolve an unhealthy CLS distribution:

  1. Ask Uxi to analyze your CLS distribution and suggest improvements.

  2. Use Filters to to isolate segments with high CLS values, then look across other CLS lenses to find which pages or user experiences are causing the worst layout shifts.

  3. Simulate CLS of the suspected lens to see if fixing it will resolve the CLS distribution. If yes, this is where the resolution focus should be.

  4. Use an automated CLS optimization tool like Navigation AI to improve your CLS distribution.

  5. 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.

Did this answer your question?