What is INP (Interaction to Next Paint)?
Answer
INP (Interaction to Next Paint) replaced FID (First Input Delay) as a Core Web Vital in March 2024. It measures the responsiveness of a page to user interactions throughout the entire page lifecycle. INP captures the latency of all click, tap, and keyboard interactions and reports the worst-case (at 98th percentile). Good: <200ms. Needs improvement: 200–500ms. Poor: >500ms. Interaction latency breakdown: Input delay (time until the event handler starts) + Processing time (event handler execution) + Presentation delay (time to paint the next frame). Common causes of poor INP: long JavaScript tasks blocking the main thread, heavy event handlers, excessive DOM size, multiple forced layout calculations (layout thrashing). Fixes: break up long tasks with scheduler.yield() or setTimeout(fn, 0), defer non-critical JavaScript, use web workers for CPU-intensive work, avoid synchronous layout reads in event handlers.