What is INP? SEO Guide for Beginners

Interaction to Next Paint (INP) is a Core Web Vital metric that measures the latency of all click, tap, and keyboard interactions with a page throughout its entire lifecycle. It replaced First Input Delay (FID) as a Core Web Vital on March 12, 2024, becoming Google's official responsiveness metric. Per web.dev, a good INP score is 200 milliseconds or less, a value above 200ms and at or below 500ms needs improvement, and anything above 500 milliseconds is rated as poor.

Why INP Matters for SEO

INP directly measures how responsive your website feels to users. When someone clicks a button, taps a menu, or types in a form field, INP tracks how long it takes for the browser to visually respond. If your page takes half a second to acknowledge a user's click, it feels broken, even if it technically works.

The old metric, FID, only measured the delay of the first interaction. A page could have a great FID score because the first click was fast, but every subsequent interaction could be sluggish. INP fixes this by tracking every interaction and reporting the worst one. According to web.dev, on pages with many interactions INP ignores one highest interaction for every 50 interactions so a single rare outlier does not skew the score. This gives a much more accurate picture of real-world responsiveness.

Google made INP a Core Web Vital because responsiveness directly impacts user satisfaction and conversion rates. Research consistently shows that pages with slower interaction responses have higher bounce rates and lower conversion rates. For e-commerce sites, every extra 100ms of interaction delay can measurably reduce revenue.

How INP Works

INP tracks three phases of every user interaction, named by web.dev as the input delay (time from the user action to the moment the event handlers begin running), the processing duration (how long all the event callbacks take to run), and the presentation delay (time from when the callbacks finish until the browser paints the next frame). The sum of these three phases equals the interaction latency.

The metric observes every click, tap, and keyboard interaction throughout the page session. At the end of the session, INP reports the worst interaction latency, with an adjustment for pages with many interactions. As web.dev describes it, the metric ignores one highest interaction for every 50 interactions so a single anomaly does not penalize an otherwise responsive page. Note that the 75th percentile figure you see in field tools applies to a separate step. CrUX and similar tools take each page's INP value and report the 75th percentile across all real page views, which is different from how a single page picks its worst interaction.

The most common causes of poor INP are long-running JavaScript tasks that block the main thread, excessive DOM size that slows down rendering, and heavy event handlers that perform too much work synchronously. Third-party scripts like analytics, ads, and chat widgets are frequent offenders because they compete for main thread time with your own code.

How to Improve INP on Your Site

1. Break up long JavaScript tasks - The browser cannot respond to user input while a long JavaScript task is running. Use requestAnimationFrame, setTimeout, or the scheduler.yield() API to break long tasks into smaller chunks that let the browser process interactions between them.

2. Reduce JavaScript bundle size - Less JavaScript means less parsing, compiling, and execution time. Audit your bundles with tools like Lighthouse or webpack-bundle-analyzer. Remove unused libraries, replace heavy dependencies with lighter alternatives, and use dynamic imports for non-critical code.

3. Minimize DOM size - A large DOM (over 1,500 nodes) makes rendering updates slow because the browser has to recalculate layout and paint for more elements. Simplify your HTML structure, virtualize long lists, and remove unnecessary wrapper elements.

Common Mistakes to Avoid

• Running expensive operations in click handlers: If clicking a button triggers a complex calculation, API call, or large DOM update synchronously, the visual feedback will be delayed. Provide immediate visual feedback (like a loading spinner) first, then run the heavy work.

Key Takeaways

• INP measures how quickly your page responds to every user interaction, not just the first one. Google considers 200ms or less a good score, above 200ms to 500ms needs improvement, and above 500ms is poor.
• It replaced FID as a Core Web Vital on March 12, 2024, providing a more comprehensive view of responsiveness.
• Break up long JavaScript tasks, reduce bundle sizes, and minimize DOM complexity for the biggest INP improvements.
• Profile your page with Chrome DevTools to identify exactly which interactions are slow and which scripts are causing the delays.

In Practice

Imagine a product filter button that swaps a large list of items when clicked. The original handler does all the work synchronously, so the browser cannot paint anything until the whole swap finishes, producing an interaction latency well over 500ms.

Before, with a blocking handler:

button.addEventListener("click", () => {
  doExpensiveContentSwap(); // long task blocks the next paint
});

After, yielding to the main thread with the Scheduler interface so the browser can paint immediate feedback first:

button.addEventListener("click", async () => {
  // Provide immediate feedback so the user knows the click was received.
  showSpinner();

  // Yield to the main thread, then continue as a prioritized task.
  await scheduler.yield();

  doExpensiveContentSwap();
});

Here scheduler.yield() is the Scheduler interface method described by MDN. It returns a promise, hands control back to the main thread so the spinner can paint, then resumes the heavy work afterward. Because the visual response now happens within the input-delay and presentation phases instead of waiting on a long processing duration, the measured interaction latency drops back under the 200ms good threshold. Where scheduler.yield() is not available, setTimeout() can be used as a fallback to push the heavy work into a new task.

Related Terms

• What is Core Web Vitals? The full set of responsiveness, loading, and stability metrics that INP belongs to.
• What is Largest Contentful Paint (LCP)? The loading Core Web Vital measured alongside INP.
• What is Cumulative Layout Shift (CLS)? The visual-stability Core Web Vital that completes the trio with INP and LCP.
• What is First Input Delay (FID)? The legacy responsiveness metric that INP replaced.
• What is Technical SEO? The broader discipline that covers page-experience signals like INP.

Sources

• INP (Interaction to Next Paint), web.dev (checked 2026-05-30)
• Optimize INP, web.dev (checked 2026-05-30)
• Interaction to Next Paint becomes a Core Web Vital on March 12, web.dev (checked 2026-05-30)
• Introducing INP to Core Web Vitals, Google Search Central (checked 2026-05-30)
• Scheduler: yield() method, MDN (checked 2026-05-30)