Skip to main content

CLS by bounce type

CLS by bounce type without noise

Vasil Dachev avatar
Written by Vasil Dachev
Updated over a month ago


What is CLS by bounce type

CLS by bounce type hows how different kinds of bounces (soft and hard) correlate to Cumulative Layout Shift (CLS) on your pages.

This breakdown helps you understand whether visual instability — such as elements jumping or shifting — may be contributing to user drop-off. It reveals whether users who leave without interacting (hard bounce) or those who engage briefly before exiting (soft bounce) are more affected by layout instability.

Only bounce types that were active and measurable during the selected period are listed.


CLS is a Core Web Vital that measures how much your layout visually shifts during load—directly affecting user trust and experience.

Healthy CLS by bounce type sample

In a healthy scenario, both soft and hard bounces show low CLS values. That means your layout stays visually stable even if users choose to leave, and their decision isn’t influenced by jarring movements or unstable interfaces.

A healthy setup often includes:

  • Preallocated space for dynamic or loading content.

  • Deferred or lazy-loaded assets that don’t push visible elements.

  • A predictable layout from first render to full load.

If CLS values are green across all bounce types, you can confidently rule out layout instability as a factor behind early exits.

Unhealthy CLS by bounce type sample

When CLS is high for soft or hard bounces, it suggests that layout instability is contributing to user dissatisfaction or exit behavior:

  • Soft bounce: If users engage briefly before leaving, unstable layouts could be hurting continued engagement or trust.

  • Hard bounce: If users leave without interacting, high CLS can mean they were met with a disorienting experience right away—like text jumping, buttons shifting, or unexpected layout changes.

Common culprits include:

  • Ads, banners, or modals shifting visible content.

  • Fonts loading late and causing reflows.

  • Layouts dependent on JS or delayed resources.

If CLS shows yellow or red warnings for bounce types, you’re likely losing users due to visual disruption.

Resolving unhealthy CLS by bounce type

Go-to action plan to resolve an unhealthy CLS by bounce type:

  1. Ask Uxi to analyze your CLS by bounce type values and suggest improvements

  2. Use Filters to find specific pages or devices where CLS aligns with soft or hard bounces.

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

  4. Use an automated CLS optimization tool like Navigation AI to improve your CLS by bounce type values

  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?