Skip to main content

INP by CLS

INP by CLS without noise

Vasil Dachev avatar
Written by Vasil Dachev
Updated over 2 weeks ago


What is INP by CLS

INP by CLS shows how Interaction to Next Paint (INP) varies based on Cumulative Layout Shift (CLS) — revealing whether layout instability is affecting how users interact with your site.

CLS measures unexpected layout shifts during loading. INP measures how quickly the site responds to interactions. When CLS is high, it can cause frustration, misplaced taps, and delays in perceived interactivity. This lens uncovers how that instability influences responsiveness.


Healthy INP by CLS sample


Should you worry

A healthy INP by CLS chart shows:

  • Low CLS sessions align with fast INP.

  • Users can interact confidently — nothing’s jumping around, and responses are quick.

  • Layouts are visually stable and responsive, leading to a smoother experience.

This is the ideal: no content jank, no tap regrets, and snappy interaction.

Unhealthy INP by CLS sample

Trouble appears when:

  • High CLS, slow INP: The layout shifts around and interactions are sluggish. This can frustrate users twice: once when the UI moves, and again when clicks don’t register quickly.

  • High CLS, fast INP: Interactions are quick technically, but if elements shift mid-tap or post-render, the experience still feels broken. Think: buttons that move just before they’re clicked.

  • Low CLS, slow INP: The layout’s stable, but interactions lag — this suggests performance issues aren’t visual, but tied to scripting or post-load execution.

This lens helps you catch cases where visual instability affects interaction reliability.

Resolving unhealthy INP by CLS

Go-to action plan to resolve an unhealthy INP by CLS:

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

  2. Use Filters to zero in on layouts or components that visually shift and cause delays.

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

  4. Use an automated INP optimization tool like INProve to improve your INP by CLS values.

  5. Once you’ve improved INP, 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?