INP (Interaction to Next Paint)
Core Web Vital measuring responsiveness to user interactions.
What is INP (Interaction to Next Paint)?
Interaction to Next Paint (INP) measures the time from when a user interacts with a page (click, tap, key press) to when the browser can display the visual response. It replaced First Input Delay (FID) as a Core Web Vital in March 2024.
Unlike FID which only measured the first interaction, INP measures all interactions throughout the page lifecycle and reports the worst one, providing a more complete picture of responsiveness.
Why INP (Interaction to Next Paint) matters
Poor INP means laggy, unresponsive pages. Users expect immediate feedback when they click buttons or type. Slow INP frustrates users and can cause them to click repeatedly or leave. It's a Core Web Vital ranking factor.
How to implement
Reduce JavaScript execution time
Break up long tasks (over 50ms)
Use web workers for heavy computation
Optimize event handlers
Yield to the main thread regularly
Remove unnecessary JavaScript
Code example
// Break up long tasks with scheduler.yield()
async function processLargeArray(items) {
for (const item of items) {
processItem(item);
// Yield to main thread periodically
if (shouldYield()) {
await scheduler.yield();
}
}
}
// Use requestIdleCallback for non-urgent work
requestIdleCallback(() => {
// Low-priority background work
});Common mistakes to avoid
- Long-running JavaScript blocking the main thread
- Heavy third-party scripts
- Synchronous operations that could be async
- Not testing actual user interactions
Examples
Good INP: Under 200ms
Needs improvement: 200-500ms
Poor INP: Over 500ms
Frequently asked questions
FID measured only the first interaction. INP measures all interactions and reports the worst, giving a complete picture of page responsiveness.
Under 200ms is good, 200-500ms needs improvement, over 500ms is poor. Most interactions should feel instant (under 100ms).