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:
- Catch what you can in development (using recommended tools).
- Use analytics to monitor which interactions are causing delays in production (e.g., using the web-vitals attribution build).
Automation?
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: https://github.com/GoogleChrome/lighthouse/blob/main/docs/user-flows.md
I haven’t personally tried it yet, but this seems like the future for catching INP regressions during development.
Disclaimer
You cannot predict when, where, or how people will interact with your page.
Ideally, measure your long tasks in development + monitor your production data.
Recommended Tools
- The Web Vitals Chrome extension is an easy option for quick measurements.
- The Performance panel in DevTools is more advanced, but also more useful for troubleshooting specific issues.
- web-vitals Attribution Build is a great way to monitor long tasks in production, and get insight into exactly which interactions are causing delays for your real users.
- Lighthouse User Flows is an interesting way to automate tests for specific interactions.
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 web.dev Custom Metrics.