INP (Interaction to Next Paint)
Definition
A Core Web Vital measuring how quickly the page responds to user interactions like clicks and taps. Should be under 200 milliseconds.
What is INP?
INP stands for Interaction to Next Paint. It's a Core Web Vital that measures how responsive a page is to user interactions – how quickly it responds when you click, tap, or type.
How INP Works
- User interacts (click, tap, keypress)
- Page processes the interaction
- Browser updates the display
- INP measures this total time
INP considers all interactions during a page visit and reports a representative value (usually the worst).
INP vs FID
INP replaced FID (First Input Delay) in 2024 as a Core Web Vital. The difference:
- FID: Only measured the first interaction
- INP: Measures responsiveness throughout the page visit
INP is a more comprehensive measure of real-world interactivity.
INP Targets
- Good: ≤ 200 milliseconds
- Needs Improvement: 200-500 milliseconds
- Poor: > 500 milliseconds
Common INP Problems
Heavy JavaScript
Long-running scripts block the main thread, delaying responses.
Large DOM Size
More elements = more work for the browser.
Layout Thrashing
Forcing the browser to repeatedly recalculate layouts.
Third-Party Scripts
Analytics, chat widgets, and ads competing for processing time.
Synchronous Operations
Operations that block until complete.
Improving INP
Break Up Long Tasks
Split JavaScript into smaller chunks that don't block the thread.
Defer Non-Critical JavaScript
Load what's needed first, defer the rest.
Reduce Main Thread Work
Move processing to web workers when possible.
Optimise Event Handlers
Make interaction handlers lean and fast.
Reduce DOM Size
Fewer elements = faster manipulation.
Testing INP
- PageSpeed Insights (lab and field data)
- Chrome DevTools Performance panel
- Web Vitals JavaScript library
- Google Search Console Core Web Vitals report
Poor INP makes sites feel sluggish and unresponsive, even if they load quickly initially.