INP is "the time from the start of the interaction to the moment the next frame is fully presented" per the INP web.dev article (opens in new window). Thresholds at the 75th percentile of page loads:
When to use
Step 1 - Install the web-vitals library
npm install web-vitalsPer the INP web.dev article (opens in new window).
Step 2 - Measure INP in lab (per interaction)
import { onINP } from 'web-vitals';
onINP((metric) => {
console.log('INP:', metric.value, metric);
// metric.attribution gives interaction details (target, eventType, etc.)
});Per the INP web.dev article (opens in new window): the web-vitals library handles edge cases (BFCache restoration, visibility changes) that raw PerformanceObserver does not.
Step 3 - Decompose INP
INP encompasses three components per the INP web.dev article (opens in new window):
Use metric.attribution (provided by web-vitals INP attribution build) to identify which component dominates:
import { onINP } from 'web-vitals/attribution';
onINP((metric) => {
console.log('Total INP:', metric.value);
console.log('Input delay:', metric.attribution.inputDelay);
console.log('Processing duration:', metric.attribution.processingDuration);
console.log('Presentation delay:', metric.attribution.presentationDelay);
console.log('Long animation frame:', metric.attribution.longAnimationFrameEntries);
});Step 4 - Playwright assertion per interaction
import { test, expect } from '@playwright/test';
test('modal open INP under 200ms', async ({ page }) => {
await page.addInitScript({ path: 'node_modules/web-vitals/dist/web-vitals.iife.js' });
await page.goto('https://localhost:3000');
await page.evaluate(() => {
(window as any).__inpValues = [];
(window as any).webVitals.onINP((m: any) => {
(window as any).__inpValues.push(m.value);
});
});
// The interaction under test
await page.click('[data-testid="open-modal"]');
await page.waitForSelector('[role="dialog"]');
// Force INP to flush. web-vitals finalizes INP inside its own
// visibilitychange handler, which reads document.visibilityState
// synchronously (per the [web-vitals README]). Redefine the property to
// 'hidden' FIRST, THEN dispatch the event: if you dispatch first, the
// handler still sees 'visible' and never reports.
await page.evaluate(() => {
Object.defineProperty(document, 'visibilityState', {
configurable: true,
get: () => 'hidden',
});
document.dispatchEvent(new Event('visibilitychange'));
});
const inps = await page.evaluate(() => (window as any).__inpValues);
const max = Math.max(...inps);
expect(max).toBeLessThan(200);
});Step 5 - Identify long tasks blocking main thread
test('no long tasks > 50ms during route change', async ({ page }) => {
// Install the observer BEFORE navigation and push entries onto a
// window-scoped array. A closure-local array would never reach
// window.__longTasks, so the later read returns [] and the assertion
// passes vacuously regardless of real long tasks.
await page.addInitScript(() => {
(window as any).__longTasks = [];
const obs = new PerformanceObserver((list) => {
for (const e of list.getEntries()) {
(window as any).__longTasks.push({
name: e.name, duration: e.duration, startTime: e.startTime,
});
}
});
// 'longtask' is the Long Tasks API entry type; buffered:true replays
// tasks recorded before the observer attached (per [MDN longtask]).
obs.observe({ type: 'longtask', buffered: true });
});
await page.goto('https://localhost:3000');
await page.click('[data-testid="route-link"]');
await page.waitForLoadState('networkidle');
const blocking = (await page.evaluate(() => (window as any).__longTasks ?? []))
.filter((t: any) => t.duration > 50);
expect(blocking).toEqual([]);
});The richer successor to Long Tasks is the Long Animation Frames (LoAF) API (type: 'long-animation-frame'), but it is not yet Baseline across browsers per MDN LoAF (opens in new window), so attach it as a separate, guarded observer rather than relying on it alone.
Step 6 - CrUX field data correlation
Lab + field don't always match. Pair lab tests with CrUX queries:
# CrUX REST API - key from the environment, sent as a header
curl -X POST 'https://chromeuxreport.googleapis.com/v1/records:queryRecord' \
-H "x-goog-api-key: $CRUX_API_KEY" \
-H 'Content-Type: application/json' \
-d '{"url":"https://yoursite.com/","metrics":["interaction_to_next_paint"]}'Send the key in the x-goog-api-key header rather than a ?key= query parameter: per Google API keys (opens in new window), a key in the URL is exposed to theft through URL scans.
Field 75th percentile INP ≤ 200 ms = "Good" per the INP web.dev article (opens in new window). Lab passing + field failing = sample population mismatch (real devices slower, real interactions less predictable).
Anti-patterns
| Anti-pattern | Why it fails | Fix |
|---|---|---|
Use raw PerformanceObserver for INP | Misses BFCache, visibility-change reporting | Use web-vitals library (Step 2) |
Test INP only on click events | INP measures all interactions; tap, keypress also count | Test representative interactions per type |
| Use desktop CPU 4× speed | Hides regressions; field is mobile + slower CPU | Throttle CPU 4 - 6× in Playwright config |
| Assert single sample | INP is jittery; one bad sample fails CI | Run interaction N times; assert P75 ≤ budget |
Fix INP by fragmenting handlers with setTimeout(0) | Hides yield, doesn't reduce work | Actually reduce processing duration via deferral patterns |