INP Checker — Interaction to Next Paint Tool

Long input delay — main thread blocked at time of interaction
If the input delay phase dominates your INP, a JavaScript long task was running when the user tapped or clicked. Use scheduler.yield() (Chromium 115+) to insert yield points inside long tasks. Where scheduler.yield() is unavailable, setTimeout(fn, 0) breaks up work but yields less control. Move non-critical initialization to requestIdleCallback. Audit third-party scripts — analytics, tag managers, and ad loaders are frequent culprits for input delay because they run continuous background tasks.

Heavy event handler code — processing duration too long
Synchronous work inside click or input handlers directly adds to INP. The most common mistake is triggering forced layout — reading a layout-triggering property like getBoundingClientRect() or offsetWidth immediately after writing to the DOM. This forces the browser to recalculate layout synchronously. Batch reads before writes, or separate them with requestAnimationFrame. In React, wrap expensive non-urgent updates with startTransition() to let the browser stay responsive to new input while rendering catches up.

Framework re-render performance — React, Vue, Angular
In React: use React.memo, useMemo, and useCallback to prevent unnecessary re-renders. Avoid re-rendering large trees on every keystroke — debounce state updates that feed search or filter logic. For long lists, virtualize with TanStack Virtual or react-window. In Vue: v-memo prevents re-rendering list items whose dependencies haven't changed. Use shallowRef for large objects to avoid deep reactivity overhead. In Angular: switch to ChangeDetectionStrategy.OnPush to limit change detection to components whose inputs have changed.

Presentation delay — complex rendering after interaction
If the presentation delay phase is large, the browser is doing too much layout and paint work after the event handler completes. Reduce the number of DOM nodes in the layout scope triggered by the interaction. Avoid CSS properties that trigger full layout (width, height, top, left) in favor of transform and opacity, which only require compositing. Use CSS content-visibility: auto on off-screen content to skip rendering work for elements not in the viewport.

Third-party scripts — auditing and deferring
Third parties (Google Tag Manager, Hotjar, Intercom, ad networks) frequently cause input delay by running long tasks on the main thread throughout the page lifecycle. In Chrome DevTools Performance tab, look for long tasks from third-party origins in the Main thread flamechart. Load non-critical third parties after the first user interaction using a deferred loading pattern. Consider partytown to run third-party scripts in a Web Worker, isolating their main-thread impact. Measure the INP delta with and without each third party to quantify impact.

Diagnosing INP with Chrome DevTools and LoAF
The Long Animation Frames (LoAF) API, available in Chrome 123+, provides the most detailed INP breakdown available without RUM tooling. In DevTools Performance panel: record a trace, interact with the page, and look for the LoAF entry that corresponds to your interaction. It breaks down input delay, processing duration, and presentation delay with script attribution. The web-vitals library (import { onINP } from 'web-vitals/attribution') surfaces LoAF data for real users and sends it to your analytics.