Essential Guide to Core Web Vitals: Part 2

In the previous article, we introduced what are web vitals, specifically the three core web vitals and focused on Largest Contentful Paint (LCP). In this article, we’ll focus on Interaction to Next Paint (INP), which measures the interactivity of the page.

Interaction to Next Paint (INP)

Interaction to Next Paint (INP) is defined as a metric that quantifies the responsiveness of a website by measuring the time elapsed from when a user initiates an interaction – such as clicking a link, tapping a button, or pressing a key – until the browser renders the visual feedback associated with that interaction in the subsequent frame. This metric is designed to capture the latency of all eligible interactions that occur throughout the entire duration of a user's visit to a web page. It is measured in milliseconds, a lower INP value signifies a more responsive website, indicating a quicker reaction to user input. According to the established score by Google, an INP score of less than 200 milliseconds indicates that the website has good responsiveness. Let’s just say you are currently exploring a website, then you decide to open an element that you are assuming will open a dialog but you did not receive instant feedback from the page, it shows the dialog only after a few seconds. This kind of experience is measured in this metric. 

The main interaction types being observed are clicking with a mouse, pressing a key on either physical or onscreen keyboard, and tapping on a mobile device with a touchscreen. The good INP score is <200 milliseconds, above this and below 500 milliseconds will be categorized as “Needs Improvement” and lastly, scores of greater than 500 milliseconds will be considered as “Poor”. Take a look at the example below, a button that will open a dialog. After clicking the button the user expects that it will open the dialog immediately or with minimal delay.

Having a good INP score ensures that the website feels snappy and responsive to user actions. It is common that users expect immediate feedback when they are interacting with elements like buttons, forms, or menus. Long waiting or delays can lead to bad user experience. Now let’s see how to check the current INP score of a website.

CrUX

Let’s use the same field tool from the previous article, which is CrUX, this was introduced in the Essential Guide to Core Web Vitals: Part 1. Let’s take a look at the example below:

This horizontal bar graph represents the INP performance data from the last 10 months (May 2024 - Feb 2025). Each month's data is categorized into three levels: Good INP (Green), Needs Improvement (Orange), and Poor INP (Red), with their corresponding percentages. At the top, the Good INP for the most recent month (Feb 2025) is 83.60% (green), representing the percentage of page loads where the INP occurred in less than 200 milliseconds, the desired range for passing Core Web Vitals. The -0.5% below the Good INP, with the small red arrow pointing down, indicates a decrease in the percentage with good INP relative to the previous month. We can also see the percentage of Poor INP (6.31%), indicating that approximately ~6% of users are experiencing slow response time or maybe sluggish. The Poor INP percentage for February is relatively high compared to January, as shown by the red arrow pointing up below the Poor INP score. There's also the P75 INP(125 milliseconds), which represents that 75% of users (the typical user experience, filtering out outliers) are experiencing INP of 125 milliseconds when interacting with the page. This means that a typical user is experiencing a very good response time. The zero value below the P75 score (125) means that there was no change from the previous month. Google recommends that the P75 LCP should be 250 milliseconds which is currently being met. However, there is a negative trend in the most recent data. The percentage of Good INP has decreased, and the percentage of poor INP has increased. This kind of negative trend may require further investigation. Maintaining a good INP of more than 80% is a good sign that most users experience interactive and responsive to user input interactions. 

In lab data, a possible proxy (but not substitute) metric for INP is Total Blocking Time (TBT), which is available in most tools such as Lighthouse. Now, let’s move to some ways to improve INP score and make sure a website is not sluggish and provides immediate feedback to users when interacting with it.

Optimize INP

First things first, we need to identify what’s causing an overall poor INP score (some methods are discussed in this web.dev article). There are three major causes contributing to INP score. First is the input delay, it starts when a user initiates an interaction on the page, and will end once the event callbacks for the interaction begin to run. Next is the processing duration, it is the time it takes for event callbacks to complete. And last is the presentation delay, it’s the time it takes the browser needs to present the next presentation frame with the visual result of user interaction.

Reduce Input Delay

To minimize input delay, avoid excessive use of setInterval (if there are any) and carefully manage setTimeout, especially in loops, as recurring timers can block the main thread. Also, breaking down long tasks into smaller, manageable chunks to improve responsiveness. Do note that 3rd-party scripts can still cause input delays.

Additionally, address interaction overlap by debouncing inputs, canceling fetch requests with AbortController, and prioritizing CSS animations over JavaScript animations whenever possible. Ensuring CSS animations are composited (runs mainly on GPU and not on main thread) further reduces main thread load and would lead to smoother user interactions.

Optimize Event Callbacks

To optimize event callbacks, prevent main thread blocking and prioritize immediate UI updates within the event handler. Deferring non-critical tasks like heavy calculations or data processing to asynchronous operations using setTimeout or requestAnimationFrame will give time to prioritize the UI update. This will allow the browser to render visual changes as soon as possible, providing instant feedback to the user and minimizing latency.

Another thing to avoid is layout thrashing. Layout thrashing (for more in-depth discussion of this topic, visit this web.dev article link) occurs when JavaScript code forces the browser to repeatedly recalculate element positions and styles (layout) by alternating read and write operations on the DOM, leading to performance bottlenecks. It results in unnecessary and synchronous layout recalculations, blocking the main thread and delaying visual updates. Schedule layout-dependent operations within requestAnimationFrame to ensure they execute at the optimal time, and minimize unnecessary DOM manipulations. By reducing layout recalculations and keeping the main thread free for rendering, the overall INP score will significantly improve (as shown in the image below - image is from web.dev).

Minimize Presentation Delay

Minimizing this delay is important for good Interaction to Next Paint (INP). Large DOM sizes directly (but not linearly) impact presentation delay, as rendering work scales with DOM size, especially during initial page load and in response to user input interactions. While reducing DOM size through techniques like flattening (using fragments - framework you are using) or lazy loading is beneficial, it may not always be sufficient.

To further reduce presentation delay, utilize the CSS content-visibility property (may not be supported to all browsers), which effectively lazily renders off-screen elements, minimizing rendering work during initial load and in response to user interactions. Additionally, be mindful of the performance costs associated with rendering HTML via JavaScript. Unlike server-sent HTML (SSR/SSG) that streams and allows the browser to yield during parsing, client-side rendering (CSR) blocks the main thread until completion, potentially delaying frame presentation and impacting responsiveness. Therefore, avoid rendering large amounts of HTML using JavaScript to maintain smooth interactions.

Conclusion

Having a good INP score is crucial for a seamless user experience. It can be minimized by reducing input delay, processing duration, and presentation delay. These optimizations involve techniques like efficient way of writing event callback handers, avoiding layout thrashing, reducing DOM size, utilizing CSS. Prioritizing UI updates and being mindful of rendering costs are essential for maintaining a snappy and very responsive website. We’ll take a look at the last stable metric of core web vitals in the next article.