What is CLS by INP
CLS by INP explores how Cumulative Layout Shift (CLS) relates to Interaction to Next Paint (INP), which measures how long it takes for a page to respond after user input.
This lens reveals whether unstable layouts are paired with delayed responsiveness — both of which can lead to poor user experience and frustration.
Healthy CLS by INP sample
When CLS and INP are both green, it means:
The page is stable and responsive.
Interactions don’t cause layout shifts.
Content isn’t injected or repositioned post-click.
This is the performance sweet spot — nothing distracts or surprises users during interaction.
Unhealthy CLS by INP sample
If poor INP aligns with high CLS:
It may indicate layout reflows caused by interactive components (like modals, accordions, sliders).
JS-heavy experiences may delay interactions and introduce instability when content shifts after input.
Even if INP is fast but CLS is high, users may still perceive jank or flicker when they interact.
Resolving unhealthy CLS by INP
Go-to action plan to resolve an unhealthy CLS by INP:
Ask Uxi to analyze your CLS by INP values and suggest improvements
Use Filters to isolate layouts where interaction causes shifts.
Simulate CLS of the suspected lens to see if fixing it will resolve the CLS by INP. If yes, this is where the resolution focus should be.
Use an automated CLS optimization tool like Navigation AI to improve your CLS by INP 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.