Why INP replaced First Input Delay (FID)
Google replaced First Input Delay (FID) with Interaction to Next Paint (INP) because FID only measured the initial tap during page load, ignoring all subsequent user interactions.
INP tracks every click, tap, and keystroke a user performs while browsing: opening mobile hamburger menus, clicking accordion tabs, typing into search boxes, and adding products to cart. If any interaction freezes the browser for more than 200ms, the entire page fails Google's page experience standard.
The anatomy of an interaction
| Interaction phase | What happens in the browser | Common cause of lag |
|---|---|---|
| 1. Input Delay | Time between user tap and event handler firing | Main thread blocked by heavy background scripts |
| 2. Processing Duration | Time spent running your JavaScript callback code | Complex calculations, deep DOM queries, sorting |
| 3. Presentation Delay | Time for the browser to recalculate layout and paint | Forced reflows, large DOM trees, complex CSS filters |
Fix 1: Yielding to the main thread with modern APIs
When a JavaScript function takes 150ms to run, the browser completely freezes. It cannot show a loading spinner or animate the button.
Break large tasks into smaller chunks using scheduler.yield() or a promise wrapper:
// Yielding to the browser main thread
async function handleFilterClick(filterId) {
// 1. Give immediate visual feedback
setButtonState('active');
// 2. Yield control so browser can paint the UI update
await new Promise(resolve => setTimeout(resolve, 0));
// 3. Perform heavier data filtering
applyComplexFiltering(filterId);
}Fix 2: Auditing third-party tag managers and widgets
In over 70% of real-world INP failures, the offending JavaScript belongs to third-party tools rather than the first-party website code:
- Session Recording Tools (Hotjar, CrazyEgg): Continuously intercepting every mouse movement and DOM change.
- Customer Chat Widgets: Downloading 800KB of vendor JavaScript that runs in the main thread during interaction.
- Advertising Pixels: Synchronously tracking clicks across multiple ad networks.
