Learn
INP Optimization Guide: Fix Interaction to Next Paint for Better Core Web Vitals
A practical guide to Interaction to Next Paint: what it measures, why it is harder to fix than load speed, and how to make real interactions respond faster.
Run a fresh DomainLens audit and use the report as your priority list.
What INP actually measures
Interaction to Next Paint (INP) measures responsiveness: how long the page takes to visually respond after a user clicks, taps, or presses a key. It watches every interaction over the life of the visit and reports close to the worst one, so a single janky menu or a slow "add to cart" button can define the score for the whole page.
The good threshold is 200 ms or less; above 500 ms is poor. Unlike LCP, which is mostly about how fast content arrives, INP is about what happens after the page is already on screen — which is why a page can load quickly and still feel broken when you start using it.
Why INP is harder to fix than load speed
Load metrics are dominated by network and server time, so caching and a faster host go a long way. INP is dominated by your own JavaScript running on the main thread. When a click fires, the browser cannot paint the response until the event handler, any framework re-render, and any other queued work have finished — so long tasks you never noticed on a fast laptop become visible stalls on a mid-range phone.
INP replaced First Input Delay in March 2024. FID only measured the delay before the first interaction started processing; INP measures the full time until the next frame is painted, for interactions throughout the visit. That makes it much stricter, and it is why sites that passed FID comfortably can still fail INP.
Where to find your worst interactions
Start with field data — INP is a real-user metric, and a lab tool cannot know which button your visitors actually struggle with.
- Chrome UX Report / Search Console: confirm INP is failing on real users, and note whether it is mobile, desktop, or specific templates.
- The Web Vitals extension or the browser Performance panel: reproduce the interaction and read the INP breakdown into input delay, processing time, and presentation delay.
- The Performance panel long-tasks track: record while you click the offending element, then look for the task over 50 ms that blocks the next paint.
- Framework devtools (React Profiler, Vue Devtools): find components that re-render far more than they need to on a single interaction.
How to make interactions respond faster
The goal is to give the browser a chance to paint before you do expensive work. Break the big task into a small, visible response now and the heavy work afterwards.
- Yield to the main thread: after updating what the user sees, defer non-urgent work with requestIdleCallback, setTimeout, or await scheduler.yield() so the browser can paint.
- Cut hydration cost: on React, Vue, Nuxt, or Next.js, ship less client JavaScript, and prefer server components or islands so fewer handlers attach on load.
- Tame third parties: analytics, chat widgets, tag managers, and ad scripts run on the same main thread — load them lazily and drop the ones that earn nothing.
- Debounce and memoize: stop expensive filtering, layout, and state updates from firing on every keystroke or scroll, and cache derived values.
Mistakes that keep INP in the red
- Optimising only the Lighthouse Total Blocking Time score and assuming field INP will follow — TBT is a load-time proxy, not the interactions users actually make.
- Testing on a fast desktop while your traffic is mid-range Android, where the same handler takes several times longer.
- Keeping every third-party tag because each one "looks small" — the cost is cumulative and lands on the interaction path.
- Fixing the average interaction instead of the worst one; INP is defined by the slow tail, not the median.
How to confirm INP actually improved
Field metrics move slowly because they aggregate 28 days of real visits, so do not expect the Search Console graph to jump the day you deploy. Validate in two layers: reproduce the specific interaction in the Performance panel and confirm the long task is gone, then watch the field data trend over the following weeks.
In DomainLens, treat INP as part of the same evidence trail as LCP, CLS, and page speed — the strongest fixes are the ones that make the live page genuinely faster to use, not just greener in a lab run.