Interaction to Next Paint (INP)

INP Interaction to Next Paint

Glossary

Interaction to Next Paint (INP) is one of Google’s three Core Web Vitals and measures a web page’s responsiveness across the entire session. Unlike its predecessor First Input Delay (FID), which only considered the first user interaction, INP looks at all interactions – clicks, taps, keyboard input, and takes the slowest (with a small tolerance) as the measured value. INP has been the official responsiveness signal within the Core Web Vitals since March 2024 and is thus a direct ranking factor.

What exactly does INP measure?

INP measures the time from a user interaction to the next paint, i.e. until the browser puts a visible reaction (hover state, button animation, newly rendered content) on the screen. Three phases are captured:

  1. Input delay: the waiting time until the browser reaches the event listener (main thread blocked)
  2. Processing time: the runtime of the JavaScript event handler
  3. Presentation delay: the time for layout, paint and compositing

From all interactions in a session, the slowest typical one is taken (technically: the 98th percentile with many interactions, the slowest value with few).

Thresholds

ValueRating
≤ 200 msgood (green)
200 – 500 msneeds improvement (orange)
> 500 mspoor (red)

INP too is reported at the 75th percentile of real user traffic.

Typical causes of poor INP

  1. Long tasks on the main thread: functions running longer than 50 ms block further interactions
  2. Heavy JavaScript event handlers: complex state updates, DOM reflows, large JSON parsing calls
  3. A poor framework setup: unnecessary re-renders in React/Vue, missing virtualisation of large lists
  4. Third-party scripts: ad tags, trackers and A/B testing tools that execute their own code paths after every click
  5. Layout thrashing: DOM reads and writes alternate, forcing the browser into sync layouts
  6. Synchronous storage access: localStorage writes block the main thread

How is INP optimised?

  • Break up long tasks: await scheduler.yield() or setTimeout(..., 0) between tasks so the browser can render in between
  • Slim down event handlers: do only the essentials in the handler, offload everything else to a requestIdleCallback or a web worker
  • Debouncing / throttling for expensive operations (e.g. search suggestions on every keystroke)
  • Batch DOM updates, e.g. synchronise with requestAnimationFrame
  • Audit third-party scripts: every tracking library eats interactivity
  • Modern framework tooling: React 18+ concurrent mode, Vue 3 Suspense, virtualised lists
  • CSS-only solutions instead of JS where possible (:hover, :focus-visible, details elements)

INP vs. FID

INP replaced First Input Delay (FID) as a Core Web Vital in March 2024. FID had two weaknesses: it only considered the first interaction and measured only the input delay, not the total latency. INP is considerably more meaningful, but also considerably harder to achieve, because every click on a page is measured.

Tools for measuring

Frequently asked questions about INP

Why is INP suddenly worse than FID? Because INP measures more. FID often showed 0–50 ms because the first input delay was extremely small. INP considers the entire session and all phases of an interaction – values around 300–500 ms are suddenly common.

What helps fastest against poor INP? First measure: identify long tasks (the DevTools performance panel). Third-party scripts or your own event handlers are frequently behind it, and both can be relieved in a targeted way.

Does INP also apply to the initial loading phase? No, INP only measures interactions after loading. For the loading phase, LCP is the fitting signal.

Conclusion

INP is the most demanding of the three Core Web Vitals, and at the same time the one where optimisation shows most directly in the usage experience: every faster reaction feels “less janky”. We’re happy to analyse INP as part of a technical SEO audit and relieve the main thread in a targeted way – get in touch for a no-obligation consultation.

← Back to glossary
HOME › GLOSSARY › INTERACTION-TO-NEXT-PAINT