What Is Interaction to Next Paint (INP) and Why Does It Matter?

Interaction to Next Paint, or INP, became an official Google Core Web Vital in March 2024, replacing First Input Delay (FID). While FID only measured the delay before the browser began processing your first interaction, INP measures the full responsiveness of a page across all interactions during a user’s entire visit.

In plain terms, INP tells you how quickly your page visually responds when a user clicks a button, taps a menu, or presses a key. A sluggish INP means your page feels unresponsive and frustrating. Google considers an INP of 200 milliseconds or less to be good.

How INP Is Measured

INP captures the time from when a user initiates an interaction — a click, tap, or keystroke — to when the browser has rendered the next frame in response. It records all qualifying interactions during a page session and reports the worst one (with a small allowance for outliers on pages with many interactions).

This is a significant change from FID, which only considered the very first interaction. A page could have a perfectly fine FID but terrible responsiveness throughout the rest of the session — INP catches that. If your site has forms, accordions, tabs, filters, or any interactive elements, all of those interactions count towards your INP score.

What Causes a Poor INP Score?

The primary culprit is JavaScript running on the browser’s main thread. When JavaScript is executing, the browser cannot respond to user interactions. If you have long tasks — JavaScript tasks that take more than 50 milliseconds — they create a window during which any user interaction will be delayed.

Heavy third-party scripts are a common cause: analytics libraries, marketing tags, chat widgets, social share buttons, and advertising scripts can all introduce long tasks. Even first-party JavaScript — complex React or Vue components, heavy form validation, or data-fetching logic — can block the main thread if not managed carefully.

INP can also be affected by large DOM sizes. When the document has thousands of elements, even a simple style recalculation or layout operation takes longer, increasing the time between interaction and the next paint.

How to Improve Your INP Score

Audit your JavaScript for long tasks using the Chrome DevTools Performance panel. Look for tasks that exceed 50 milliseconds and identify which scripts are responsible. Break long tasks into smaller pieces using techniques like `setTimeout` or `scheduler.yield()` to yield control back to the browser between chunks of work.

Remove or defer unnecessary third-party scripts. Load them with the `async` or `defer` attribute, or use a tag manager that lets you control when scripts fire. Every third-party script you remove is potential main-thread time returned to the browser for responding to user interactions.

Consider whether your JavaScript framework — if you’re using one — is contributing to the problem. Server-side rendering, partial hydration, and islands architecture are all strategies that reduce the amount of JavaScript the browser needs to execute on the client, directly improving INP.