Measure Interaction to Next Paint (INP) live in your browser, simulate INP values, and get prioritized fixes. Core Web Vitals metric that replaced FID in March 2024.
Click Start, then interact with this page — click buttons, type in fields, or tap elements. The meter captures each interaction's duration using the PerformanceObserver API and shows the worst-case INP in real time.
Enter your INP value and describe your interaction type to get a diagnosis and prioritized fix recommendations.
From PageSpeed Insights or Search Console
What triggers the high INP
Frontend technology used
Analytics, ads, chat widgets
INP (Interaction to Next Paint) replaced FID (First Input Delay) as a Core Web Vital in March 2024. FID only measured the delay before the browser started processing the first interaction. INP measures the full latency of every interaction — from the user's tap or click to the next frame painted — and reports the worst-case value across the entire page session.
An INP interaction has three phases:
Phase 1
Input DelayTime from user interaction to when the browser starts processing the event handler. Caused by long tasks queued on the main thread.
Phase 2
Processing DurationTime spent running the event handler code. Heavy JavaScript, synchronous DOM queries, or framework re-renders happen here.
Phase 3
Presentation DelayTime for the browser to render the visual update after the handler completes. Complex layouts, style recalculations, and large repaints.
Long input delay — tasks blocking the main thread
If your INP's input delay phase is long, a JavaScript task was running when the user interacted. Use scheduler.yield() or setTimeout(fn, 0) to break up long tasks into smaller chunks with yield points. Move non-critical work to requestIdleCallback. Defer third-party scripts that block the main thread with async or defer attributes.
Heavy event handlers — processing duration too long
Avoid doing expensive work synchronously in click/input handlers. Don't trigger forced layout (reading offsetWidth, getBoundingClientRect after writing to the DOM). In React, wrap heavy re-renders with startTransition to mark them as non-urgent. Debounce input handlers that trigger search or filter operations.
React/Vue/Angular re-render performance
In React, use React.memo, useMemo, and useCallback to prevent unnecessary re-renders. Avoid re-rendering large component trees on every keystroke. Use virtualization (react-virtual, TanStack Virtual) for long lists. In Vue, use v-memo and shallowRef for large data structures. In Angular, switch to ChangeDetectionStrategy.OnPush.
Third-party scripts causing input delay
Google Tag Manager, analytics, ads, and chat widgets frequently run long tasks that cause input delay. Audit third-party impact in Chrome DevTools Performance tab — look for long tasks from third-party origins. Load non-critical third parties after user interaction (partytown or manual deferred loading). Use fetchpriority and loading="lazy" for third-party iframes.