INP: definition, thresholds and replacement of FID

INP (Interaction to Next Paint) measures the latency of every user interaction with a page — clicks, taps, key presses — and keeps the worst latency observed during the entire session, with a tolerance to ignore a few outliers.

Unlike FID, which only captured the first interaction, INP gives a complete view of responsiveness throughout navigation. The official Google thresholds are:

• Good (green): under 200 ms
• Needs improvement (orange): between 200 ms and 500 ms
• Poor (red): beyond 500 ms

INP measures three distinct phases: input delay (time before the browser starts processing the event), processing time (duration of event handlers) and presentation delay (time before the next frame paints).

The main cause of poor INP is the execution of long JavaScript tasks on the main thread that block interaction processing.

INP is now the official responsiveness signal in Core Web Vitals since March 2024. A poor INP makes the interface feel slow or frozen, even if the page loaded quickly.

On JavaScript-heavy web applications (SPAs, dynamic e-commerce, SaaS tools), INP is often the hardest Core Web Vital to push into the green. A good INP correlates directly with better user retention and engagement rates.

1. 1Break up long JavaScript tasks using `scheduler.yield()` or `setTimeout()` to free the main thread.
2. 2Reduce initial JavaScript with code-splitting and lazy loading.
3. 3Optimise event handlers to be lightweight and delegate heavy processing to web workers.
4. 4Memoise components in React or Vue to avoid unnecessary re-renders (`React.memo`, `useMemo`).
5. 5Profile your interactions with Chrome DevTools (Performance tab) to identify the slowest ones.