Skip to main content

INP breakdown

INP breakdown without noise

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


What is INP breakdown

INP breakdown lens breaks down Interaction to Next Paint (INP) into its core components, helping you identify exactly where interaction delays are occurring in the user experience.

INP measures how responsive your site feels when users first interact — for example, by tapping a button, clicking a link, or typing into a field.


Healthy INP breakdown sample


Should you worry

A healthy INP breakdown view shows all green — meaning your site is responsive at each step of the user journey.

Component

Ideal Time

Notes

Presentation delay

≤ 50 ms

Time from readiness to visual feedback (e.g., a button visually responds).

Input delay

≤ 50 ms

Time between user action and event handler execution. Avoid main-thread blocking.

Processing time

≤ 100 ms

Time to run code, update UI, and render changes. Keep logic efficient and lightweight.

Unhealthy INP breakdown sample

In this example, the primary delay comes from Processing time, which clocks in at 88ms — a strong indicator that event handlers are too heavy or blocking the UI update.

Input delay is also slow at 70ms, suggesting some main-thread blocking or slow JS parsing. Presentation delay is acceptable at 55ms, meaning visual feedback happens quickly once the logic completes.

Even though the UI looks ready, responsiveness suffers because of what happens after the interaction — exactly what this lens helps uncover.

Resolving unhealthy INP breakdown

Go-to action plan to resolve an unhealthy INP breakdown:

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

  2. Use Filters across INP lenses (e.g., INP by device, cookie name, user spending power) to find the worst offenders.

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

  4. Use an automated INP optimization tool like INProve to improve your INP breakdown 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?