INP Replaced FID: What Changed and Why Your Site Probably Fails Now
Google killed First Input Delay (FID) in March 2024 and replaced it with Interaction to Next Paint (INP). The change is stricter. 68% of sites that passed FID are now failing INP. If you're still optimizing for FID, you're optimizing for the wrong metric.
Sites failing INP
INP threshold
Rankings at failure
What's the Difference Between FID and INP?
First Input Delay (FID) measured the delay between a user's action and the browser's response. INP is more comprehensive—it measures the entire interaction from click to visible result.
First Input Delay (FID) - DEPRECATED
Measured:
Time from click to browser start processing
Threshold:
< 100ms (good) • < 300ms (needs work)
Problem:
Only measured the first interaction
Ignored:
Time to show visual result (painting to screen)
Interaction to Next Paint (INP) - NEW STANDARD
Measures:
Complete interaction: input + processing + paint
Threshold:
< 100ms (good) • < 500ms (needs work)
Advantage:
Measures all interactions on page
Includes:
End-to-end user experience
Why Sites Are Failing INP
The top reasons sites fail INP:
1. Heavy JavaScript Execution
When users click buttons, the JavaScript is too expensive. The browser gets blocked processing the code instead of painting results.
Common culprits: Analytics libraries, real-time feature detection, large DOM updates
2. Massive DOM Trees
Single-page apps that render thousands of DOM nodes at once. Each interaction triggers re-rendering of thousands of elements.
Common culprits: React apps without virtualization, unoptimized lists, data tables
3. Main Thread Blocking
Third-party scripts (ads, chat, tracking) running on the main thread. When you click, the browser is still busy with analytics.
Common culprits: Google Analytics 4, Hotjar, Intercom, Zendesk chat
4. Unoptimized Event Handlers
Event listeners that do expensive operations. Typing in a search box triggers a re-fetch of 10,000 results.
Common culprits: Search inputs, filters, autocomplete
How to Fix INP Issues (The Real Way)
Simple changes won't fix INP. You need architectural changes:
Code Splitting
Only load JavaScript for the features users see. Don't load every feature upfront.
Defer Heavy Computations
Use Web Workers or move processing to background threads. Never block the main thread on user interaction.
Virtualize Long Lists
Don't render 1,000 list items. Render only the visible ones. As users scroll, swap in new items.
Prioritize First Interaction
INP measures the slowest interaction on the page. Optimize all interactions, not just the first one.
Isolate Third-Party Scripts
Move analytics, chat, ads to Web Workers or iframes. Don't let them block the main thread.