web-vitals-inp-deep
Deep INP (Interaction to Next Paint) testing: decomposes input delay, processing duration, and presentation delay via the web-vitals/attribution build, asserts per-interaction INP budgets in Playwright using PerformanceObserver plus the web-vitals visibilitychange flush, and identifies long tasks blocking the main thread. Use when a page feels unresponsive while LCP and CLS are green, or to gate key interactions (form submit, modal open, route change) under an INP budget in CI. Covers interactions only: for service-worker cache-strategy latency use service-worker-tests.
web-vitals-inp-deep
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. 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.
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: 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:
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, 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
curl -X POST 'https://chromeuxreport.googleapis.com/v1/records:queryRecord?key=<API_KEY>' \
-H 'Content-Type: application/json' \
-d '{"url":"https://yoursite.com/","metrics":["interaction_to_next_paint"]}'Field 75th percentile INP ≤ 200 ms = "Good" per the INP web.dev article. 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 |