What is CLS by navigation method
CLS by navigation method shows Cumulative Layout Shift (CLS) based on how users enter a page — either through Hard navigation or Soft navigation. This lens helps you identify if layout shifts happen more frequently depending on how a user gets to the page.
Only navigation methods that occurred during the selected time range will be shown.
Navigation method | Description |
Hard navigation | A full page load triggered by entering the site or refreshing the browser tab. |
Soft navigation | A partial load caused by in-site transitions (e.g., via JavaScript routers). |
Hard navigations can cause layout shifts due to resources loading in unpredictable order. Soft navigations might seem smoother but can also introduce shifts during client-side hydration or dynamic content injection.
Healthy CLS by navigation method sample
In a healthy chart, both Hard and Soft navigations show low CLS values (green). Some difference is expected:
Hard navigations might have minor shifts due to loading from scratch.
Soft navigations can be smooth — unless the client-side transitions or animations are unstable.
As long as both methods avoid visible layout jumps, you're in a good place.
Unhealthy CLS by navigation method sample
If Soft navigation shows high CLS, it often points to layout instability during hydration or dynamic rendering. Common issues include:
Components jumping into place after client-side rendering completes.
Lazy-loaded content without size reservations.
Font swaps or late style injections.
When Hard navigation has poor CLS, it’s usually due to missing dimensions on images, late-loading ads, or content jumping after the page starts rendering.
Resolving unhealthy CLS by navigation method
Go-to action plan to resolve an unhealthy CLS by navigation method:
Ask Uxi to analyze your CLS by navigation method values and suggest improvements
Use Filters to isolate sessions with high CLS on either method and cross-check with layout type or device.
Simulate CLS of the suspected lens to see if fixing it will resolve the CLS by navigation method. If yes, this is where the resolution focus should be.
Use an automated CLS optimization tool like Navigation AI to improve your CLS by navigation method 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.