Skip to main content

CLS by on-page errors

CLS by on-page errors without noise

Written by Vasil Dachev


What is CLS by on-page errors

CLS by on-page errors shows how Cumulative Layout Shift (CLS) varies depending on whether a page encountered any errors during load — and what kind of errors occurred.

These may include:

  • JavaScript execution errors

  • Broken image or font loads

  • CSS failures

  • Resource 404s or permission denials

  • Other unknown runtime issues

Even a single error can delay rendering, block layout paints, or break critical components — especially when the LCP element depends on the failed asset.

Healthy CLS by on-page errors sample

In a healthy setup:

  • The “No errors” category dominates, with fast (green) LCP values

  • Other error categories (if present) show low volume and no meaningful performance impact

  • Even when small errors happen, critical content still paints quickly thanks to resilient design

This indicates that your site:

  • Loads reliably without missing resources

  • Gracefully handles fallback cases

  • Doesn’t let minor errors cascade into UX problems

Unhealthy CLS by on-page errors sample
​

When LCP slows down on error-prone pages, it usually means:

  • The LCP element (often a large image or text block) is failing to render on time due to a broken resource

  • JavaScript hydration or layout logic is interrupted by runtime exceptions

  • Fonts or stylesheets are missing, leading to FOUT/FOIT or delayed layout rendering

  • There's no fallback in place, so missing assets block visual completion

You may notice:

  • Delayed or invisible hero content

  • Layout jumping after late font/style loads

  • Poor user experience with flashing, broken, or unstyled elements

Resolving unhealthy CLS by on-page errors

Go-to action plan to resolve an unhealthy CLS by on-page errors:

  1. Ask Uxi to analyze your CLS by on-page errors values and suggest improvements
    ​

  2. Use Filters to isolate sessions with specific error codes or types (e.g., JS vs image vs font).
    ​

  3. Simulate CLS of the suspected insight to see if fixing it will resolve the CLS by on-page errors. 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 on-page errors 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?