A Core Web Vitals (CWV) metric that measures how quickly a page responds to user interactions, such as clicks, taps, or keyboard inputs. It is one of the three key performance signals, alongside Largest Contentful Paint (LCP) and Cumulative Layout Shift (CLS). While LCP and CLS focus on loading speed and visual stability, INP evaluates the latency of user interactions throughout a session, reporting the longest observed duration to ensure the page feels responsive from start to finish.
Core Web Vitals Comparison
Core Web Vitals are essential for evaluating web page performance. 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.
- INP (Interactivity): Measures how fast the page reacts to user inputs.
- LCP (Loading): Measures how fast the main content appears.
- CLS (Visual Stability): Measures if content jumps 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 aim 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.
- 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 JavaScript 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
To improve INP, consider the following 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.
