What is Interaction to Next Paint (INP)?

Interaction to Next Paint is the responsiveness metric that replaced First Input Delay in the Core Web Vitals. It measures how long a page takes to visibly react after a user input, across the whole session, not only the first tap. For storefronts dense with filters, variant pickers and add-to-cart buttons, INP exposes the real cost of client-side JavaScript.

Definition

INP samples every discrete interaction, such as click, tap and keypress, and records the time from input to the next paint. The reported score is roughly the worst interaction in the session, or the 98th percentile on long pages, expressed in milliseconds. Google considers up to 200 ms good and over 500 ms poor. INP is dominated by long tasks on the main thread, expensive event handlers, layout thrashing, and hydration work performed by React, Vue or Svelte after server rendering. Heavy third-party scripts loaded via a content-management-system-cms tag are a frequent contributor.

Why it matters

INP captures what shoppers actually feel: sluggish filters on a PLP, a delayed quantity stepper or a slow mega-menu. Poor INP cascades into bounce rate and abandoned carts, and it is harder to fix than LCP because it is driven by application architecture rather than asset delivery. For composable-commerce stacks, INP is the single best indicator of hydration cost and bundle quality. As a Vital, it also feeds search-engine-optimization-seo via the page-experience signal.

Use cases

Engineers on Next.js, Remix or Nuxt mitigate INP by splitting React bundles per route via code-splitting, deferring non-critical first-party-JS and moving heavy work off the main thread with Web Workers. Adopting React Server Components or Islands Architecture in Astro removes hydration from large parts of the page, which often halves INP on category pages. Edge Rendering on Vercel Edge, Cloudflare Workers or Netlify Edge keeps the cache-layer close to users but the real wins come from less interactive JS in the client. Teams instrument INP per route through the web-vitals library and gate releases on INP budgets.

Related

Explore Performance and Core Web Vitals · Composable Headless Frontend.