Skip to content
2.3Advanced8 min

INP Optimization: Measuring and Improving Interactivity

Lucas Blochberger··Updated 11 June 2026
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 ist seit 12. Maerz 2024 ein stabiler Core Web Vital und ersetzt First Input Delay; Schwellenwert 200 ms am 75. Perzentil

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 als gute Schwellenwerte; Core Web Vitals sind mit Googles Core-Ranking-Systemen abgestimmt

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

74 % der mobilen vs. 97 % der Desktop-Websites mit gutem INP (<= 200 ms) im Jahr 2024

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

Mediane Total Blocking Time: mobil 1.208 ms vs. Desktop 67 ms (ca. 18x hoeher)

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

Mediane Zeit in Long Tasks: 2.366 ms mobil vs. 329 ms Desktop; 14 vs. 3 Long Tasks im Median

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

558 KB mediane JS-Auslieferung mobil; ca. 206 KB davon ungenutzt (44 % der ausgelieferten Bytes)

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

INP der Suchseite um 72 % verbessert, +7 % Umsatz durch Debouncing und lokales 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 % Absprungrate; +43 % Seitenaufrufe; Migration zu Next.js

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

Durchgaengig negative Korrelation zwischen INP und Conversion-Rate ueber vier E-Commerce-Sites; Effekt teils schon bei INP = 100 ms

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

Oesterreich: 57,6 % Desktop vs. 42,4 % Mobil (Mai 2026)

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

Oesterreich: 8,69 Mio. Internetnutzer (95,3 % Penetration, Oktober 2025); 99,5 % der Mobilfunkverbindungen Breitband (3G/4G/5G)

DataReportal - Digital 2026: Austria (2026)

Mobil: INP 64,9 % gut, CLS 76,9 % gut, LCP 54,9 % gut (gute Erfahrung in mind. 75 % der Faelle)

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

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.

Related Articles

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 →
Previous← LCP Optimization: The Hardest Core Web VitalNextCLS Optimization: Ensuring Visual Stability →