What is INP? Complete Guide to Interaction to Next Paint

What is Interaction to Next Paint (INP)?

Interaction to Next Paint (INP) is one of Google's three Core Web Vitals metrics, replacing First Input Delay (FID) in March 2024. INP measures the latency of all user interactions throughout a page's lifecycle, not just the first one.

An interaction includes clicks, taps, and keyboard inputs. INP measures the time from when the user initiates the interaction until the browser presents the next frame showing visual feedback.

Unlike FID which only measured input delay, INP captures the full interaction: input delay + processing time + presentation delay. This gives a more complete picture of how responsive your site feels to users.

• INP measures responsiveness across ALL interactions, not just the first
• Good INP: under 200ms | Needs improvement: 200-500ms | Poor: over 500ms
• INP replaced FID as a Core Web Vital in March 2024
• Includes: input delay + processing time + presentation delay

INP vs FID: What changed and why

First Input Delay (FID) only measured the delay before the browser could begin processing the first interaction. This missed two critical issues: slow event handlers and pages that were fast initially but became sluggish over time.

INP addresses both limitations. It measures the complete interaction cycle and considers all interactions throughout the page's lifetime, selecting the worst one (with some outlier exclusion) as the reported value.

The shift to INP means sites that passed FID might fail INP. A page could have zero input delay (passing FID) but take 500ms to process a click handler (failing INP). This is why INP is a more demanding and more accurate metric.

Why INP matters for SEO and user experience

INP directly correlates with user satisfaction. When users click a button and nothing happens for 300ms, they often click again, leading to double submissions, confusion, and frustration.

As a Core Web Vital, INP is now a Google ranking factor. Poor INP can negatively impact your search visibility, especially in competitive niches where small ranking differences matter.

Mobile users are particularly sensitive to INP issues. Lower-powered devices and slower JavaScript execution mean mobile INP is typically 2-3x worse than desktop. With mobile-first indexing, this directly affects your rankings.

• INP is a direct Google ranking factor since March 2024
• Poor responsiveness increases bounce rates and reduces conversions
• Mobile INP is typically much worse than desktop due to slower CPUs
• Users perceive delays over 100ms as sluggish; over 300ms as broken

Common causes of poor INP

Long JavaScript tasks are the primary cause of poor INP. When JavaScript runs for more than 50ms, it blocks the main thread, preventing the browser from responding to user input or painting visual updates.

Heavy event handlers that do too much work in response to clicks, scrolls, or key presses directly increase INP. Complex calculations, DOM manipulation, or synchronous API calls in handlers are common culprits.

Third-party scripts often cause INP problems because they run on your main thread but you don't control their code. Analytics, chat widgets, and ad scripts frequently block interactivity.

• Long JavaScript tasks (>50ms) blocking the main thread
• Heavy event handlers doing too much synchronous work
• Third-party scripts (analytics, ads, chat widgets)
• Excessive DOM size causing slow style/layout recalculation
• Synchronous network requests in event handlers
• Hydration storms in JavaScript frameworks

How to measure and debug INP

Chrome DevTools Performance panel is essential for debugging INP. Record a user interaction, then look for 'Long Tasks' (highlighted in red) that block the main thread during the interaction.

The web-vitals JavaScript library can measure INP in the field and send it to your analytics. This shows real-world INP across your actual users, not just lab conditions.

Use MakeWebsite.fast to monitor INP trends over time. Compare your INP before and after deployments to catch regressions early.

• Chrome DevTools: Performance panel with interaction overlay
• web-vitals library: Field measurement for real users
• Lighthouse: Lab-based INP estimation
• Chrome User Experience Report: Real-world INP data at scale

How to improve INP: Optimization techniques

Break up long tasks using techniques like yielding to the main thread. Use setTimeout, requestIdleCallback, or the scheduler.yield() API to split work into smaller chunks that don't block interactions.

Optimize event handlers to do minimal synchronous work. Move heavy computation to Web Workers, defer non-critical updates with requestAnimationFrame, and avoid layout thrashing.

Reduce JavaScript bundle size and execution time. Code splitting, tree shaking, and lazy loading ensure you only load the code needed for the current interaction.

• Break long tasks with yield points (setTimeout, scheduler.yield)
• Move heavy computation to Web Workers
• Use requestAnimationFrame for visual updates
• Defer non-critical work with requestIdleCallback
• Lazy load JavaScript not needed for initial interactions
• Virtualize long lists to reduce DOM size

Framework-specific INP optimization

React applications should use useTransition for non-urgent updates and useDeferredValue to deprioritize expensive renders. React 18's concurrent features are specifically designed to improve INP.

Next.js and other SSR frameworks can improve INP through partial hydration and server components, which reduce the amount of JavaScript that needs to run on the client.

Vue and Svelte applications benefit from their more efficient reactivity systems, but still need attention to computed property complexity and watcher chains that can cause long tasks.

INP optimization checklist

Work through this checklist systematically to improve INP. Start by measuring your current INP in both lab and field, then address the highest-impact issues first.

Remember that INP considers all interactions throughout the page's lifetime. A page might have good initial INP but degrade over time as state accumulates or memory leaks develop.

• Measure current INP with Chrome DevTools and field data
• Identify long tasks using Performance panel flame charts
• Break tasks over 50ms into smaller yielding chunks
• Audit third-party scripts and remove/defer non-essential ones
• Use React concurrent features (useTransition, useDeferredValue)
• Move heavy computation to Web Workers
• Implement virtualization for long lists
• Lazy load JavaScript for below-the-fold interactions
• Monitor INP in production with RUM tools