Managing Interaction to Next Paint (INP)

You need an interaction to measure INP—otherwise, there’s nothing to measure.

In general, I think recommendations for INP (like CLS) boil down to:

  1. Catch what you can in development (using recommended tools).
  2. Use analytics to monitor which interactions are causing delays in production (e.g., using the web-vitals attribution build).


While not bulletproof, this is where I think people are moving towards.

Lighthouse, for example, has been working on a “User Flows” feature for a long time:

I haven’t personally tried it yet, but this seems like the future for catching INP regressions during development.


You cannot predict when, where, or how people will interact with your page.

Ideally, measure your long tasks in development + monitor your production data.

Bonus: User Timing API

I’m personally a big fan of the User Timing API.

Adding performance.mark() and performance.measure() throughout my application code (Next.js, for example, adds some of these out of the box to measure hydration time).

If you haven’t already tried them out, I highly recommend adding your own performance marks and seeing how they show up in your performance profiles (and WebPageTest runs!). Super simple but extremely useful.

For more details, see Custom Metrics.