CodeParkMeasure a production build under realistic conditions, and collect data from real users. INP (Interaction to Next Paint) measures how fast the page responds to user input.
Lab tests on a fast laptop with a development build do not represent real users. So:
- Measure a production build.
- Use CPU throttling in Chrome DevTools to simulate slower devices.
- Collect field data, meaning data from real user sessions.
INP is a Core Web Vital, one of Google's main user-experience metrics. It measures how long the page takes to show visual feedback after clicks, taps and key presses. It looks across the whole visit and reports one of the slowest interactions. Under 200 ms is good. Over 500 ms is poor.
The web-vitals library reports INP, LCP (Largest Contentful Paint) and CLS (Cumulative Layout Shift) from real users. It uses functions like onINP, and you send the results to your analytics.
In React, poor INP usually comes from long renders on input. Fixes include transitions, which mark updates as non-urgent, deferring or splitting work, and virtualization.
- Development builds and fast machines mislead, so use a production build with throttling.
- Collect field data from real users.
- INP is the delay from an interaction to the next paint. Under 200 ms is good.
- The
web-vitalslibrary offersonINP,onLCPandonCLS. - Long renders on input hurt INP.