Interaction to Next Paint (INP) is a performance metric that measures a webpage's responsiveness to user input. It tracks the time between a user interaction, such as a click or keypress, and the moment the browser next updates the screen with visual feedback. A low INP score indicates that a page consistently responds quickly to user actions throughout its entire lifecycle.
What is Interaction to Next Paint (INP)?
INP assesses a page's overall responsiveness by observing the latency of all eligible interactions that occur during a user’s visit. While many performance metrics focus on how fast a page loads, [90% of a user's time on a page is spent after the initial load] (web.dev), making ongoing responsiveness vital for user experience.
How INP is calculated
For most websites, INP reports the interaction with the worst latency. On pages with a high volume of interactions, the metric [ignores one highest interaction for every 50 interactions] (web.dev) to account for random technical hiccups. This 98th-percentile approach ensures that the reported value reflects the typical responsiveness for most users rather than a single extreme outlier.
Why Interaction to Next Paint (INP) matters
INP is a critical metric for both user retention and search visibility. If a user clicks a button and perceives a delay, they may think the page is broken, leading to duplicate clicks or site abandonment.
- Search Rankings: [INP replaced First Input Delay (FID) as a Core Web Vital on March 12, 2024] (web.dev), making it an official Google ranking factor.
- User Feedback: Visual feedback tells users if an item was added to a cart or if a menu is opening. Without it, the experience feels sluggish.
- Reliability: Unlike older metrics, INP measures responsiveness from the start of the visit until the user leaves the page.
- Conversion Rates: Poor responsiveness often leads to user frustration, which directly impacts the likelihood of completing a purchase or form.
How Interaction to Next Paint (INP) works
An interaction consists of a group of event handlers that fire during a single user gesture. The metric breaks down the total time (latency) into three distinct phases.
- Input Delay: The time a user waits for the browser to begin processing the interaction. This is often caused by long tasks on the main thread that block new inputs.
- Processing Time: The time required to execute JavaScript event handlers associated with the interaction.
- Presentation Delay: The time after event handlers finish until the browser recalculates the layout and paints the next frame on the screen.
Observed interactions
INP only observes three types of user inputs: * Clicking with a mouse. * Tapping on a touchscreen. * Pressing a key on a physical or onscreen keyboard.
Gestures like scrolling and hovering are not included in the INP calculation.
What is a good INP score?
To provide a good user experience, site owners should aim for the 75th percentile of page loads across mobile and desktop devices. The thresholds are:
- Good: [200 milliseconds or less] (web.dev).
- Needs Improvement: Between 200 ms and 500 ms.
- Poor: [Greater than 500 milliseconds] (web.dev).
Best practices for improving INP
Optimizing INP requires freeing up the browser's main thread so it can respond to user input immediately.
- Break up long tasks: If a JavaScript task takes longer than 50ms, the browser cannot respond to inputs until that task finishes. Use the
scheduler.yield()API to allow the browser to interrupt long tasks for user interactions. - Minimize CPU load during page load: Interactions are often slowest while a page is still loading because the main thread is busy rendering and executing scripts. Review your Total Blocking Time (TBT) as a proxy for these early-load issues.
- Optimize event handlers: Avoid complex or heavy processing within click or keypress listeners. If a task is heavy, consider moving it to a Web Worker.
- Reduce DOM size: A massive DOM increases the time needed for "Presentation Delay," as the browser must recalculate styles and layout for thousands of elements.
- Provide immediate visual feedback: If an interaction takes a long time to process, show a loading spinner or skeleton screen in the very next frame. INP only cares about the next paint, regardless of whether that paint contains the final result.
Common mistakes
- Mistake: Assuming FID and INP are the same. Fix: Recognize that FID only measures the first interaction's input delay, while INP measures the full duration (delay, processing, and paint) of all interactions.
- Mistake: Only testing on high-end desktop machines. Fix: Use CPU throttling in Chrome DevTools (4x or 6x slowdown) to simulate the experience on mobile devices where INP issues are most common.
- Mistake: Relying solely on lab data (Lighthouse). Fix: Use real user monitoring (RUM) or Chrome User Experience Report (CrUX) data, as lab tools cannot predict unpredictable user behaviors.
- Mistake: Including dialog boxes in performance scripts. Fix: Note that as of [Chrome 127, alert and confirm dialogs are excluded from INP] (DebugBear).
Interaction to Next Paint (INP) vs. First Input Delay (FID)
| Metric | Goal | Scope | Duration Measured |
|---|---|---|---|
| FID | Measures load responsiveness | First interaction only | Input delay only |
| INP | Measures overall responsiveness | All interactions throughout page life | Input delay + Processing + Presentation delay |
While FID focuses on the user's first impression, INP is a more reliable indicator of the overall experience. FID was officially replaced by INP in the Core Web Vitals suite in March 2024.
FAQ
What interactions does INP ignore? INP ignores scrolling and hovering. If a user spends five minutes scrolling through a long article but never clicks or types anything, no INP value is reported for that visit.
How can I find the specific element causing a poor INP score? Tools like PageSpeed Insights and Search Console can tell you if a problem exists, but they don't always identify the element. Use Real User Monitoring (RUM) tools or the "Interaction" lane in the Chrome DevTools Performance tab to see which specific button or link triggered a slow response.
Why does my page report no INP value? This occurs if the user (or a bot) never interacted with the page via clicking, tapping, or typing. It can also happen if the user only scrolled or hovered over elements.
Is INP measured for interactions inside iframes? Yes. Interactions within iframes are part of the user experience. However, standard JavaScript APIs might not have access to iframe contents, which can cause discrepancies between certain monitoring tools.
How do I test INP in a lab environment? Because INP requires a user interaction, most lab tools only report it if you script an interaction. The "INP Debugger" or manual testing with the Chrome DevTools Performance tab (under the "Interactions" lane) are the most effective lab methods.
