Interaction to Next Paint (INP) is a critical web performance metric and one of the three components of Core Web Vitals, together with Largest Contentful Paint (LCP) and Cumulative Layout Shift (CLS).
Interaction to Next Paint (INP) assesses the responsiveness of a webpage by measuring the time between a user interaction and the subsequent visual feedback (next paint) on the screen.
A user interaction can be a click, a tap, or a key press. INP evaluates the response times of all user interactions throughout the entire visit, focusing on the longest recorded delay, and ignoring outliers.
Interaction to Next Paint (INP) is an improvement over First Input Delay (FID) which measured only the input delay of the first interaction on a page, providing insights into load responsiveness and the page's first impression. Compared to FID, INP provides a more comprehensive view of a page's performance assessing the responsiveness of all user interactions throughout the page's lifecycle.
| Good | Needs Improvement | Poor |
|---|---|---|
| ≥ 200 milliseconds | 200 - 500 milliseconds | < 500 milliseconds |
| The score shows that the page responds quickly to user interactions, providing a seamless and responsive experience. | The score suggests that the page’s responsiveness is acceptable but could be optimized for a smoother user experience. | The score indicates that the page’s responsiveness is slow, leading to noticeable delays and a potentially frustrating user experience. |
Initially, INP should be monitored using field tools to identify slow interactions and their context. Then, lab tools help analyze and address the issues discovered by the field data tools.
| Field Tools | Lab Tools |
|---|---|
| Chrome User Experience Report Real User Monitoring (RUM) Wattspeed - CruX Report | Google Lighthouse Chrome DevTools Wattspeed - Lighthouse Report |
After identifying slow interactions through the available field and lab tools, the next step is to address issues to improve the INP’s score. Optimizing Interaction to Next Paint (INP) can help provide a smoother and more responsive user experience by reducing delays between user interactions and visual feedback.
| Strategy | Actions |
|---|---|
| Low INP due to JavaScript execution | |
| Breaking down long tasks | → split large JavaScript tasks into smaller pieces. → ensure input events (clicks, taps, etc.) are addressed promptly. → use setTimeout or requestIdleCallback to schedule non-urgent tasks. |
| Minimizing input delays | → optimize event listeners by reducing unnecessary computations. → ensure input events (clicks, taps, etc.) are handled quickly. |
| Streamlining script execution | → evaluate and optimize JavaScript for efficiency. → remove unused or redundant scripts. |
| Leveraging web workers | → offload heavy computations to web workers to free up the browser's main thread. → use web workers for duties like data processing or complex calculations. |
| Low INP due to rendering issues | |
| Avoiding layout thrashing | → batch DOM updates to minimize layout recalculations. → use tools like the Chrome DevTools Performance tab to identify layout issues. |
| Simplifying style calculations | → minimize the use of complex CSS selectors and rules. → avoid inline styles and use precomputed CSS whenever possible. |
| Optimizing client-side rendering | → preload or prefetch resources critical for rendering and interaction. → use server-side rendering (SSR) or static site generation to reduce client-side workload. |
| Managing large DOM sizes | → remove unused elements and optimize page structure. → use server-side rendering (SSR) or static site generation to reduce client-side workload. |