INP

Interaction to Next Paint (INP) is a Core Web Vitals metric that measures a page’s overall responsiveness to user interactions. It tracks the latency from when a user interacts with the page (clicks, taps, or key presses) to when the browser paints the next frame reflecting that interaction. INP replaced First Input Delay (FID) as a Core Web Vital in March 2024 because it captures responsiveness across all interactions during a page visit, not just the first one. A good INP score is 200 milliseconds or less.

Why It Matters for SEO

INP is one of the three Core Web Vitals metrics that Google uses as a ranking signal. Unlike FID, which only measured the delay of the first interaction, INP evaluates every interaction and reports the worst one (with some statistical outlier filtering). This makes it a more comprehensive measure of how responsive a page actually feels to users throughout their visit.

Poor INP scores indicate that interactions feel sluggish — buttons that take too long to respond, form inputs that lag, and accordion menus that expand slowly. These issues directly increase bounce rate and reduce user satisfaction, compounding the negative SEO impact beyond the direct ranking signal.

How to Improve INP

The primary cause of poor INP is long JavaScript tasks that block the main thread. Break up long-running tasks using setTimeout, requestIdleCallback, or scheduler.yield() so the browser can process user interactions between task chunks. Reduce the total amount of JavaScript shipped to the browser by code-splitting, tree-shaking, and deferring non-critical scripts.

Minimize the rendering work triggered by interactions. Avoid forcing layout recalculations (layout thrashing) by batching DOM reads and writes. Use CSS content-visibility: auto for off-screen content to reduce rendering costs. Audit third-party scripts — analytics, chat widgets, and ad scripts are common culprits for main thread congestion.

For framework-heavy sites, consider techniques like selective hydration, islands architecture, or server-side rendering to reduce the client-side JavaScript burden. Profile interactions using Chrome DevTools Performance panel to identify exactly which tasks are causing delays.

Common Mistakes

• Only optimizing the first interaction: FID only measured the first click. INP measures all interactions, so a page with fast initial load but slow subsequent interactions will still score poorly.
• Ignoring event handler duration: INP includes three phases — input delay (waiting for the main thread), processing time (running the event handler), and presentation delay (rendering the result). All three must be optimized.
• Loading too many third-party scripts: Each third-party script competes for main thread time. Audit and remove scripts that provide marginal value, or load them in web workers where possible.
• Not testing on low-end devices: INP issues are most severe on mobile devices with slower processors. Test on representative mid-range Android devices, not just your development machine.
• Assuming server-side rendering fixes INP: SSR improves initial load but does not help with interaction responsiveness. If hydrated components attach heavy event listeners, INP will still suffer.

INP is the most challenging Core Web Vital to optimize because it requires auditing JavaScript execution across all user interactions, not just initial page load.