INP (Interaction to Next Paint)

Key Definition

Interaction to Next Paint (INP) is a Core Web Vitals metric that measures how quickly a page visually responds to user interactions such as clicks, taps, and keyboard input. INP tracks every interaction during a user's visit and reports the slowest one (approximately the 98th percentile) as the page's INP score. A good INP is 200 milliseconds or less — meaning the page updates visually within 200ms of every interaction. INP replaced First Input Delay (FID) as a Core Web Vital in March 2024 and provides a more comprehensive measure of real-world responsiveness.

Why It Matters for AI SEO

INP affects AI SEO through two indirect but important pathways.

First, as a Google ranking signal, INP directly influences your position in traditional search results. Many AI retrieval systems — including Google Gemini's AI Mode and Perplexity — use web search results as a starting point for finding sources. Pages that rank higher in Google due to good Core Web Vitals scores have more opportunities to be retrieved and cited by AI models.

Second, poor INP is a strong indicator of excessive JavaScript execution on a page. Heavy JavaScript frameworks, unoptimized event handlers, and long-running scripts that cause poor INP also create problems for AI crawlers. Most AI crawlers do not execute JavaScript at all — so a page with poor INP due to JavaScript-heavy architecture likely also has content that AI crawlers cannot access without server-side rendering. Fixing INP often involves reducing JavaScript complexity, which can improve AI crawler access as a side effect.

How It Works

INP measures the full lifecycle of a user interaction in three phases:

Input delay: The time between the user's action (e.g., clicking a button) and the browser beginning to process the event handler. This delay occurs when the browser's main thread is busy with other JavaScript tasks. Long-running scripts, heavy third-party code, and synchronous operations block the main thread and increase input delay.

Processing time: The time spent executing the event handler code itself — the JavaScript function that responds to the click. Complex business logic, DOM manipulations, and network requests within event handlers increase processing time.

Presentation delay: The time between the event handler completing and the browser painting the visual update on screen. Layout recalculations, style computations, and compositing work contribute to presentation delay.

INP tracks all three phases for every interaction during a page session. The final INP score is based on the worst interaction (98th percentile for pages with many interactions). This is more demanding than the old FID metric, which only measured the input delay of the very first interaction.

A page that feels fast on initial load but becomes sluggish as the user scrolls, clicks filters, or opens menus will have a poor INP — even if its FID was perfect. INP captures the responsiveness of the entire user experience, not just the first impression.

Practical Implications

• Reduce main thread blocking. The most common cause of poor INP is long-running JavaScript tasks that block the browser's main thread. Break large tasks into smaller chunks using requestIdleCallback, setTimeout, or the Scheduler API so the browser can respond to user input between chunks.
• Optimize event handlers. Review click and input event handlers for unnecessary complexity. Move heavy computations to Web Workers, defer non-essential DOM updates, and avoid synchronous network requests within event handlers.
• Minimize third-party script impact. Analytics, ad networks, chat widgets, and A/B testing scripts all execute on the main thread and can block user interactions. Audit third-party scripts for their impact on INP and defer or lazy-load those that are not essential for initial page functionality.
• Reduce DOM size. Pages with thousands of DOM nodes require more time for layout and paint operations after each interaction. Simplify page structure and use virtualization for long lists to reduce the rendering overhead that contributes to presentation delay.
• Use the Long Animation Frames API. Chrome's Long Animation Frames API identifies exactly which scripts and functions are blocking the main thread during interactions. Use this diagnostic tool to pinpoint the root cause of poor INP rather than guessing.
• Consider the AI crawler connection. If poor INP stems from a JavaScript-heavy architecture (React, Vue, Angular with client-side rendering), the same architecture likely prevents AI crawlers from accessing your content. Addressing INP through reduced JavaScript dependency and server-side rendering simultaneously improves both user experience and AI crawler access.