A Core Web Vitals (CWV) metric that assesses a page’s overall responsiveness to user inputs. It is one of the three pillars of Google’s performance signals, sitting alongside
- Largest Contentful Paint (LCP), which measures loading speed
- Cumulative Layout Shift (CLS), which measures visual stability
While LCP and CLS focus on initial load and visual integrity, INP measures the latency of every tap, click, or keyboard interaction throughout a user’s visit, reporting the longest duration observed to ensure the page feels snappy from start to finish.
Core Web Vitals Comparison
To pass the Core Web Vitals assessment, a page must meet the good threshold for all three metrics at the 75th percentile of real-user visits.
| Metric | Pillar | “Good” Threshold | “Poor” Threshold | Impact on UX |
| INP | Interactivity | ≤ 200ms | > 500ms | How fast does the page react to clicks/taps? |
| LCP | Loading | ≤ 2.5s | > 4.0s | How fast does the main content appear? |
| CLS | Visual Stability | ≤ 0.1 | > 0.25 | Does content jump unexpectedly? |
Weighting in Performance Scores
In diagnostic tools like Lighthouse, INP is not measured directly because it requires real user interaction (Field Data). Instead, Total Blocking Time (TBT) is used as a “Lab Data” proxy to predict responsiveness.
- TBT (Proxy for INP): ~30%
- LCP (Largest Contentful Paint): ~25%
- CLS (Cumulative Layout Shift): ~25%
- FCP (First Contentful Paint): ~10%
- Speed Index: ~10%
Key Technical Standards
To provide a good user experience, sites should strive for an INP of 200 milliseconds or less for at least 75% of page visits. Because INP tracks the entire session, a single heavy interaction (like opening a complex menu or submitting a large form) can determine the score for that visit.
| Rating | INP Measurement |
| Good | ≤ 200ms |
| Needs Improvement | > 200ms and ≤ 500ms |
| Poor | > 500ms |
The Three Phases of INP
When a user interacts with a page, the Next Paint is delayed by three distinct components:
- Input Delay: Waiting for background tasks (like JS execution or Font Swaps) to finish so the event handler can start.
- Processing Time: Running the JavaScript code associated with the click or keypress.
- Presentation Delay: Recalculating the page layout and painting the resulting pixels to the screen.
Optimization Strategies
- Yield to the Main Thread: Use
scheduler.yield()to break up long JavaScript tasks so the browser can interrupt them to handle a user click. - Minimize Main Thread Work: Audit third-party scripts (tags, ads, analytics) that may be locking the thread during user interactions.
- Reduce DOM Depth: A complex DOM makes the “Presentation Delay” longer, as the browser takes more time to re-render the page after an interaction.
- Use
font-display: swap: By ensuring text is immediately visible and minimizing the complexity of the font swap, you reduce the likelihood of the browser being busy when a user clicks.
