Interaction to Next Paint (INP)
A metric that assesses a page's overall responsiveness to user interactions.
Detailed Explanation
INP replaced First Input Delay (FID) as a Core Web Vital in 2024. It measures the time it takes for the browser to render the next frame after a user interacts (clicks, taps, or key presses) throughout the entire lifespan of the page. A good INP is below 200ms. High INP is usually caused by heavy JavaScript execution on the main thread.
Quick Summary
INP measures the worst-case lag between a user interaction and the next visual update, across the page's whole lifetime. It's stricter than the old FID metric, it catches every interaction, not just the first.
Key Takeaways
- Target: under 200ms at the 75th percentile. Anything over 500ms is poor.
- Includes input delay + processing time + presentation delay.
- Heavy JS handlers on the main thread are the #1 cause, long tasks (>50ms) block the next paint.
- Replaced FID in 2024; FID only measured the first interaction, while INP samples them all.
- Mobile devices and low-end Android hit INP problems far harder than desktops.
When to use it
- Diagnosing "my site feels laggy when typing or scrolling" complaints.
- Performance budgets for SPA route changes and form submissions.
- Profiling React/Vue render bottlenecks via long-task tracking.
- Validating that web worker or `requestIdleCallback` offloading actually moved work off the main thread.
Common Mistakes
- Heavy synchronous work in event handlers (filtering large lists, complex calculations on each keystroke).
- Excess re-renders in React from state in the wrong place or missing memoization.
- Third-party analytics or A/B testing scripts adding 100+ms to every click.
- Long hydration tasks in SSR frameworks blocking interactions during the first seconds.
Interaction to Next Paint (INP), Frequently Asked
What's the difference between INP and FID?
FID only measured the *first* interaction and only the input delay portion. INP measures every interaction across the page's lifetime and includes the full pipeline (delay + processing + paint). INP is much harder to pass.
How do I find what's blocking the main thread?
Chrome DevTools → Performance, record an interaction, look for "long tasks" (highlighted red) on the main thread. Break them up with `requestIdleCallback`, web workers, or by deferring non-essential work.