In March 2024, Interaction to Next Paint (INP) replaced First Input Delay (FID) as a Core Web Vital. A lot of React apps that had perfect FID scores suddenly showed up as “needs improvement” or “poor”.
That wasn’t a coincidence. FID only measured the delay before your first event handler started. INP measures the whole interaction, from the click until the next frame is actually painted, across the entire visit. React apps that do a lot of rendering work after each click were finally getting measured honestly.
Here’s how I find the slow interaction, figure out which part of it is slow, and fix it.
What INP actually measures
INP looks at clicks, taps, and key presses (not scrolling or hovering). For each one, it measures how long until the browser paints the next frame. Your INP score is roughly the slowest interaction during the page visit. For pages with lots of interactions, a few extreme outliers are ignored, so one freak hiccup won’t define your score.
| Rating | INP |
|---|---|
| Good | 200 ms or less |
| Needs improvement | 200-500 ms |
| Poor | Over 500 ms |
Like the other Core Web Vitals, it’s assessed at the 75th... premium content.
