Skip to content
2.3Advanced8 min

INP Optimization: Measuring and Improving Interactivity

Lucas Blochberger
Definition

Interaction to Next Paint (INP) measures responsiveness to user interactions across the entire page visit. The threshold is ≤200ms. Less than 25 percent of websites keep task duration below the recommended 50ms threshold.

Key Takeaways

  • INP measures responsiveness across all interactions of a visit; good is <= 200 ms at the 75th percentile. It replaced FID in March 2024.
  • Field data (CrUX, PageSpeed, web-vitals, RUM) is authoritative. Lab data serves only for debugging, with Total Blocking Time as a proxy.
  • The overloaded main thread is the primary cause. Mobile sites have 2,366 ms in Long Tasks and 1,208 ms TBT, roughly 18 times higher than on desktop.
  • On mobile, only 74% of websites maintain good INP versus 97% on desktop. Mobile requires its own, stricter JavaScript budget.
  • Break up long tasks (scheduler.yield, postTask, setTimeout, isInputPending), remove unused JS (44% of delivered bytes on mobile), and throttle event handlers.
  • Next.js Server Components, streaming, and selective hydration reduce hydration costs. Economic Times improved from ~1,000 ms to 257 ms INP this way.
  • Consent and tracking scripts often block the first interaction. Delayed, consent-based, or offloaded loading protects INP in a GDPR-compliant manner.

INP is the most demanding Core Web Vital for JavaScript-heavy websites, and Next.js 15 offers the best architectural solution.

The Problem

Input Delay at the 90th percentile dominates INP failures. Long main-thread tasks block event processing before handlers execute. Fewer than 25 percent of websites keep task duration under 50ms. Third-party scripts (analytics, chat widgets, A/B testing, tag managers) are the primary culprits.

Server Components as a Solution

Next.js 15 App Router with React Server Components offers a structural advantage: server-side rendered components send zero client-side JavaScript. Vercel demonstrated this impressively: nextjs.org reduced Total Blocking Time from 430ms to 80ms with selective hydration.

Practical Optimization

Break Up Long Tasks: Use `setTimeout`, `requestIdleCallback`, or `scheduler.yield()` to free up the main thread.Third-Party Scripts: Load only what is necessary, use defer/async, leverage Web Workers for heavy computations.Event Handlers: Avoid expensive DOM operations, use virtual scrolling for long lists.

Data & Statistics

INP has been a stable Core Web Vital since 12 March 2024 and replaces First Input Delay; threshold 200 ms at the 75th percentile

web.dev (Google Chrome Team) - 'Interaction to Next Paint is officially a Core Web Vital' (2024)

INP < 200 ms, LCP < 2.5 s, CLS < 0.1 as good thresholds; Core Web Vitals are aligned with Google's core ranking systems

Google Search Central - 'Understanding Core Web Vitals and Google search results' (2025)

74% of mobile vs. 97% of desktop websites with good INP (<= 200 ms) in 2024

HTTP Archive - Web Almanac 2024, Performance-Kapitel (2024)

Median Total Blocking Time: mobile 1,208 ms vs. desktop 67 ms (approx. 18x higher)

HTTP Archive - Web Almanac 2024, JavaScript-Kapitel (2024)

Median time in Long Tasks: 2,366 ms mobile vs. 329 ms desktop; 14 vs. 3 Long Tasks at median

HTTP Archive - Web Almanac 2024, JavaScript-Kapitel (2024)

558 KB median JS delivery mobile; approx. 206 KB of it unused (44% of delivered bytes)

HTTP Archive - Web Almanac 2024, JavaScript-Kapitel (2024)

INP of search page improved by 72%, +7% revenue through debouncing and local state management

web.dev (Google) - Case study 'How redBus improved their website's INP' (2024)

TBT 3,260 ms -> 120 ms; INP ~1,000 ms -> 257 ms; -50% bounce rate; +43% page views; migration to Next.js

web.dev (Google) - Case study 'Economic Times quest for fixing INP' (2023)

Consistently negative correlation between INP and conversion rate across four e-commerce sites; effect partly already at INP = 100 ms

SpeedCurve - 'Does Interaction to Next Paint actually correlate to user behavior?' (Cliff Crocker) (2023)

Austria: 57.6% desktop vs. 42.4% mobile (May 2026)

StatCounter Global Stats - Desktop vs Mobile Market Share Austria (2026)

Austria: 8.69 million internet users (95.3% penetration, October 2025); 99.5% of mobile connections broadband (3G/4G/5G)

DataReportal - Digital 2026: Austria (2026)

Mobile: INP 64.9% good, CLS 76.9% good, LCP 54.9% good (good experience in at least 75% of cases)

DebugBear - 'Core Web Vitals: Which Metric Is The Hardest To Pass?' (2025)
Summarize with AIChatGPTClaudePerplexity

Opens the chat with a prepared prompt.

FAQ

What is a good INP value?
A good INP value is 200 milliseconds or less, measured at the 75th percentile of all interactions. Values above 500 ms are considered poor. Field data from real users is authoritative, not lab measurements. Since conversions can suffer at 100 ms according to an international analysis, maintaining a buffer below the threshold is advisable.
How does INP differ from First Input Delay (FID)?
FID only captured the delay of the first input and ignored processing and presentation time. INP considers all interactions of a page visit and reports the highest relevant value. It covers the three phases: Input Delay, Processing Time, and Presentation Delay. INP replaced FID as a Core Web Vital on March 12, 2024.
How do I measure INP correctly?
Measure INP using field data from the Chrome User Experience Report (CrUX), PageSpeed Insights, Search Console, the web-vitals library, or a RUM solution. Lab data from Lighthouse and DevTools serves only for debugging, with Total Blocking Time as a proxy for INP. INP itself cannot be measured directly in the lab, as it requires real interactions over time.
Why is my INP worse on mobile devices than on desktop?
Mobile devices have less computing power and often poorer network quality. The median mobile page spends around 2,366 ms in Long Tasks versus only 329 ms on desktop. The median Total Blocking Time on mobile is 1,208 ms, roughly 18 times higher than the 67 ms on desktop. That's why mobile requires its own, stricter JavaScript budget.
How does Next.js improve INP?
Next.js reduces INP primarily through React Server Components, which send no client JavaScript and thus reduce hydration costs. Streaming with Suspense, selective hydration of interactive islands, and dynamic imports avoid large client bundles. Economic Times reduced INP from around 1,000 ms to 257 ms by migrating to Next.js and reducing Total Blocking Time.
What role do consent banners and tracking scripts play for INP?
Consent management platforms and tracking scripts load early and often block the main thread precisely when the user dismisses the banner. This first interaction flows directly into INP. Load tracking scripts only after consent is granted and with delay, move non-essential scripts into a Web Worker, and keep the consent script itself lean without compromising GDPR compliance.
Does INP affect Google ranking?
Yes. INP is part of the Page Experience signals, which according to Google documentation are aligned with the core ranking systems. While a good INP is not a sole ranking factor, it acts as a conversion and user experience lever. An analysis of four e-commerce sites showed a consistently negative correlation between INP and conversion rate.

How does your website perform?

Get a free, AI-powered SEO report of your website by email: technical SEO, on-page, keywords & competitors. No obligation.

Get a free SEO audit →

Or go straight to SEO Agency in Vienna

Previous← LCP Optimization: The Hardest Core Web VitalNextCLS Optimization: Ensuring Visual Stability →