INP Optimization
Ship interactions that respond in under 200ms — every time.
What is INP?
Interaction to Next Paint measures the latency from a user tap, click, or keypress to the next visual frame. Core Web Vitals replaces FID with INP in March 2024. Target: <200ms good, 200–500ms needs improvement.
Yield Early
Break long tasks with setTimeout(fn, 0) or scheduler.yield(). Defer non-critical work so the main thread can paint immediately after input.
Debounce & Throttle
For scroll-linked effects or resize handlers, throttle to requestAnimationFrame. Debounce keystroke handlers at 150ms to avoid layout thrashing on every character.
Avoid Layout Thrashing
Batch reads and writes. Never interleavegetBoundingClientRect()with style mutations. Use FastDOMor a microtask queue to separate measure from mutate phases.
Measure
Use the web-vitals library with onINP(). Profile in Chrome DevTools Performance panel with "Web Vitals" overlay enabled. Ship RUM data to your analytics — you cannot fix what you cannot see.
Pro tip: The largest INP culprit is usually a synchronous JSON.parseof a large payload inside a click handler. Move parsing to a Web Worker or lazy-hydrate.