What is INP (Interaction to Next Paint) and how to optimize it?

Last reviewed: 2025-10-26

Web Performance Core Web Vitals Performance Metrics

TL;DR — INP (Interaction to Next Paint) is the Core Web Vital metric that measures how quickly a webpage reacts to user interactions like taps, clicks, and key presses. A good INP is under 200 ms. It replaced FID (First Input Delay) in March 2024 and is now Google’s official responsiveness signal for rankings. Optimizing INP improves both UX and SEO.

Understanding INP

Interaction to Next Paint (INP) tracks the latency between a user action and the next frame the browser paints after the event has been processed. Unlike FID, which only measured the first input, INP observes most interactions during a session and reports the worst observed delay. It reflects real user responsiveness, not just initial load speed.

Typical examples of high INP include:

Clicking a button that triggers heavy JavaScript processing.
Expanding menus rendered by complex frameworks.
Typing in a form while background tasks block the main thread.

How INP is measured

The browser captures timestamps for three phases:

Input delay - time before the event handler starts.
Processing delay - time spent running JS logic.
Presentation delay - time until the next paint appears.

The sum of these phases gives the INP value. Field data from Chrome UX Report (CrUX) is aggregated in Search Console and PageSpeed Insights.

Benchmarks

Category	INP Score	User Experience
Good	≤ 200 ms	Highly responsive
Needs Improvement	200-500 ms	Slight lag
Poor	> 500 ms	Noticeably sluggish

Practical ways to optimize INP

Eliminate long tasks — Split scripts that block the main thread for more than 50 ms using requestIdleCallback() or micro-tasks.
Reduce JavaScript execution — Bundle less, lazy-load non-critical code, and prefer server-rendered HTML for static content.
Minimize reflows and repaints — Use CSS transforms instead of layout-changing properties, pre-size images, and avoid layout thrash.
Defer analytics and observers — Load them after the first paint using async or defer.
Use web-workers for background computations.
Test on real devices — Use Chrome DevTools, Web Vitals extension, or GA4’s new “INP field data” metric.

Why INP matters for SEO

Since 2024, Google has included INP within Core Web Vitals ranking signals. Sites that maintain consistent sub-200 ms responsiveness are prioritized for better UX scores, leading to higher engagement and conversion rates. Improving INP complements fast LCP and stable CLS to achieve a perfect PageSpeed score.

Core Web Vitals 2025 playbook

Treat 2025 as the year you institutionalize INP optimization alongside LCP and CLS. Start by auditing interaction latency in your analytics stack—GA4’s new reports highlight the precise UI states that regress. Pair those insights with synthetic testing on mid-range Android hardware, where JavaScript bundling and main-thread blocking surface fastest. If you ship frequent releases, document a responsiveness budget in your CI pipeline and fail builds when interaction tasks exceed 200 ms. Finally, socialize that INP is the lasting FID replacement so product teams understand why polishing tiny interactions now prevents missed conversion targets later.

Tooling that accelerates fixes

Modern frameworks offer concrete affordances for faster web performance. React 19’s transitions, Astro’s Islands architecture, and Qwik’s resumability all help keep handlers light. Complement framework features with @shopify/hydrogen’s event timing utilities or the open-source web-vitals library to capture real-user timing in production. Feed this telemetry into observability platforms like Sentry Performance or Datadog RUM so you can alert on regressions instantly instead of waiting for ranking drops. The combination of proactive tooling and continuous measurement turns INP from a one-off tuning session into a sustainable performance practice.

Summary

INP represents the next generation of web interactivity metrics — practical, user-centric, and long-term. By reducing JavaScript bloat, scheduling work efficiently, and testing real user interactions, developers can ensure every click feels instantaneous.

Sources are listed above and validated as of October 2025.