Skip to main content

CLS by scroll behavior

CLS by scroll behavior without noise

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


What is CLS by scroll behavior

CLS by scroll behavior shows how Cumulative Layout Shift (CLS) varies based on the scroll state of the page:

  • Non-scrollable: The page doesn’t require scrolling

  • Scrollable: The page has scrollable content, but wasn’t actively scrolled

  • Scrolled: The user returned to the page and the browser restored their previous scroll position

This lens helps you spot layout instability introduced when restoring scroll positions — a common issue in SPAs and back-forward navigations.

Healthy CLS by scroll behavior sample

A healthy scroll behavior lens looks like this:

  • All three scroll states show low CLS

  • Restoring scroll positions doesn’t cause layout jumps

  • Dynamic or long pages still remain visually stable when re-entered

This signals that your content, ads, fonts, and late-loading elements are handled gracefully — regardless of where the user lands.

Unhealthy CLS by scroll behavior sample

Common symptoms of an unhealthy pattern:

  • Higher CLS on Scrolled views — indicating layout jumps during back/forward navigations

  • Late-rendered content (e.g. banners, sticky headers, or injected ads) appearing after scroll is restored

  • Non-scrollable pages with CLS issues may indicate instability even on simple views — often caused by fonts, carousels, or DOM reordering

These shifts can confuse returning users, break their flow, or reduce trust on important transactional pages.

Resolving unhealthy CLS by scroll behavior

Go-to action plan to resolve an unhealthy CLS by scroll behavior:

  1. Ask Uxi to analyze your CLS by scroll behavior values and suggest improvements

  2. Use Filters to isolate high-CLS scroll types, then cross-check against devices, route types, or async content loading.

  3. Simulate CLS of the suspected lens to see if fixing it will resolve the CLS by scroll behavior. 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 scroll behavior 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?