Core Web Vitals & SpeedINP

Interaction to Next Paint

Definition

Interaction to Next Paint (INP) is a Core Web Vital metric that measures overall page responsiveness by assessing the latency of all discrete user interactions (clicks, taps, keypresses) throughout the session.

Why It Matters

INP replaced First Input Delay (FID) as an official Google ranking factor in March 2024. While FID only measured the initial delay before the main thread responded to the first click, INP captures the entire lifecycle (input delay, processing time, and presentation delay) for the single worst interaction on the page.

Google Core Web Vitals INP Thresholds (75th Percentile)

Criterion / State	Requirement / Target	Status
Good (Pass)	≤ 200 ms	Optimal
Needs Improvement	200 ms – 500 ms	Needs Work
Poor (Fail)	> 500 ms	Avoid / Fail

Practical Implementation Example

Breaking up heavy synchronous computations by yielding to the browser event loop allows the compositor to draw immediate feedback frames within 50 ms.

src/utils/scheduler.ts

// Yield main thread execution to allow immediate UI repainting
export async function yieldToMain(): Promise<void> {
  if ('scheduler' in window && 'yield' in (window as any).scheduler) {
    await (window as any).scheduler.yield();
  } else {
    await new Promise((resolve) => setTimeout(resolve, 0));
  }
}

Automated Verification

How to Audit INP in ScanWise

ScanWise simulates realistic typing, accordion toggling, and button clicks on simulated mobile CPUs, breaking down input delay, long handler tasks, and UI paint delays.

Test your page INP score and long tasks in ScanWise

Common INP Mistakes & How to Fix Them

Common INP Mistakes & How to Fix Them
Mistake	Why It Hurts	The Fix
Executing heavy filtering, sorting, or JSON parsing synchronously inside click event handlers.	Synchronous loops block the main thread for 300 ms+, freezing the UI and generating high INP scores.	Offload heavy computations to Web Workers or use React 19 startTransition to prioritize immediate UI updates.
Re-rendering the entire page tree on every single keystroke in large forms.	React re-render cascades exceed the 200 ms budget on mobile devices with budget processors.	Isolate input state, debounce expensive preview renders, and utilize uncontrolled inputs where appropriate.