Interaction to Next Paint (INP): The Core Web Vital That Replaced FID
In March 2024, Google officially replaced First Input Delay (FID) with Interaction to Next Paint (INP) as one of its three Core Web Vitals. If your website's performance report suddenly looks different, this is why. INP is a much stricter and more realistic measure of how responsive your site feels, and plenty of sites that passed FID comfortably are now finding they have work to do.
What Does INP Measure?
FID only measured the delay before the browser started handling a visitor's first interaction. It didn't measure how long that interaction actually took to process, and it ignored every interaction after the first one.
INP looks at the whole visit. Every click, tap and key press is measured from the moment the visitor interacts until the browser paints the next frame on screen. That includes:
- Input delay: how long the interaction waits because the main thread is busy with something else.
- Processing time: how long your event handlers take to run.
- Presentation delay: how long the browser takes to calculate layout and paint the result.
The final INP value is close to the slowest interaction during the visit, so a single sluggish menu or filter can drag the whole score down.
What Is a Good INP Score?
Google uses the following thresholds, measured at the 75th percentile of real visits:
| INP | Rating |
|---|---|
| 200ms or less | Good |
| 200ms – 500ms | Needs improvement |
| Over 500ms | Poor |
Because it is based on real user data, INP reflects your visitors' actual devices. A site that feels instant on a new laptop can still score poorly if most visitors use mid-range phones.
How to Check Your INP
- PageSpeed Insights shows real-world INP for your URL and origin, when enough data is available.
- Google Search Console has a Core Web Vitals report that groups affected pages together.
- Chrome DevTools lets you record interactions in the Performance panel and see exactly which scripts are running.
- The web-vitals JavaScript library can report INP from your own visitors to your analytics.
Common Causes of Poor INP
Long JavaScript Tasks
The browser can only do one thing at a time on the main thread. Any task that runs for longer than 50ms blocks interactions until it finishes. Large frameworks hydrating the page, heavy analytics bundles and complex calculations in event handlers are all common culprits.
Too Many Third-Party Scripts
Chat widgets, tag managers, social embeds and ad scripts all compete for the main thread. Each one may look harmless in isolation, but together they can make every interaction feel slow.
Expensive Layout and Rendering
Very large pages with thousands of DOM elements take longer to update. Code that reads layout values (like offsetHeight) and then immediately changes styles in a loop can force the browser to recalculate layout over and over.
Practical Ways to Improve INP
Break Up Long Tasks
Split heavy work into smaller chunks and give the browser a chance to respond in between. A simple pattern is to update the UI first, then defer the rest:
button.addEventListener('click', async () => {
showLoadingState()
// Let the browser paint before doing the heavy work
await new Promise((resolve) => setTimeout(resolve, 0))
runExpensiveFiltering()
})
Audit Third-Party Scripts
Remove anything you no longer use, load non-essential scripts after the page becomes interactive, and consider lighter alternatives for heavy widgets.
Debounce Expensive Input Handlers
Search boxes and filters that recalculate on every key press can be debounced, so the work only runs once the visitor pauses typing.
Keep the DOM Lean
Paginate or virtualise long lists, avoid deeply nested markup, and use CSS content-visibility: auto for long pages so off-screen content isn't rendered until needed.
Ship Less JavaScript
The most reliable fix is simply sending less code to the browser. Modern frameworks like Next.js can render much of the page on the server, so visitors download and run far less JavaScript.
Why It Matters
Core Web Vitals form part of Google's page experience signals, but the bigger win is for your visitors. A responsive site feels trustworthy and professional, and visitors who aren't left waiting after every tap are far more likely to stay, browse and get in touch.
If your site is struggling with INP or other Core Web Vitals, a website performance optimisation review is a great place to start.