INP Analyzer
Find what's blocking your main thread and slowing down interactions.
What is Interaction to Next Paint?
INP measures how quickly your page responds to user interactions like clicks, taps, and keyboard input. It captures the worst interaction latency during a page visit, reporting when the browser finally paints a response. Google replaced FID with INP as a Core Web Vital in March 2024.
Since INP requires real user interactions, lab tools like Lighthouse use Total Blocking Time (TBT) as a proxy. TBT measures how long the main thread was blocked by long tasks during page load—a strong predictor of poor INP.
INP Timeline
Common Causes of Poor INP
Long Tasks
JavaScript executing for >50ms blocks the main thread. Break up work with requestIdleCallback or scheduler.yield().
Third-Party Scripts
Analytics, chat widgets, and ads often block the main thread. Load them async or use Partytown to run in a web worker.
Hydration
Framework hydration can block interactions. Use progressive hydration, islands architecture, or server components.
Large DOM
Too many DOM nodes slow down style calculations and layout. Keep nodes under 1,500 and virtualize long lists.
Layout Thrashing
Reading and writing layout properties in a loop forces synchronous reflows. Batch DOM reads and writes.
Bundle Size
Large JavaScript bundles take longer to parse and execute. Use code splitting, tree shaking, and lazy loading.
01What is Interaction to Next Paint (INP)?
Interaction to Next Paint (INP) is a Core Web Vital that measures responsiveness. It tracks the delay between user interactions (clicks, taps, key presses) and the visual feedback. A good INP score is 200 milliseconds or less, indicating a responsive experience.
02How is INP different from First Input Delay (FID)?
INP replaced FID as a Core Web Vital in March 2024. While FID only measured the first interaction, INP measures ALL interactions throughout the page lifecycle and reports the worst one. This makes INP a more comprehensive measure of real-world interactivity.
03What causes poor INP scores?
Poor INP is typically caused by: long JavaScript tasks blocking the main thread, heavy third-party scripts (analytics, ads, widgets), unoptimized event handlers, layout thrashing from DOM manipulation, and large JavaScript bundles that take time to parse and execute.
04How do I improve my INP score?
To improve INP: break long tasks into smaller chunks using yield patterns, defer non-critical JavaScript, use code splitting to reduce bundle size, optimize event handlers to avoid forced layouts, move heavy computation to web workers, and audit third-party scripts for performance impact.
05Why does lab data show TBT instead of INP?
Total Blocking Time (TBT) is used as a lab proxy for INP because true INP requires real user interactions. TBT measures time spent on long tasks (>50ms) during page load, which correlates with interactivity. Field data from real users provides actual INP measurements.