Interaction to Next Paint (INP) – Portent

It’s time to discuss the newest addition to Google’s Core Web Vitals metric family – Interaction to Next Paint (INP).

Google announced that starting in March 2024, First Input Delay (FID) will be replaced by INP as the standard metric for responsiveness within Core Web Vitals. Later in 2024, INP will be included in the Core Web Vitals report to help site owners and developers evaluate their pages based on the new metric.

What is Interaction to Next Paint (INP)?

Interaction to Next Paint is a new metric that helps website owners and developers understand if the webpage’s collective interactions are responsive.

INP measures the time it takes for a website to respond to all user interactions (e.g., clicks a button, taps on a link) and calculates the maximum time that all or most interactions were below.

For example, if a page had a poor INP value that was over 500ms, this would mean there is one or more interactions on the page that take longer than 500ms to respond, which is considered unresponsive. On the other hand, a good INP score of 000-200ms would demonstrate that your website is highly responsive and interactive, creating a seamless user experience.

Goals of Each Core Web Vital Metric

INP is all about user experience and responsiveness. By now, we know site speed is very important. In today’s fast-paced digital world, users expect fast and responsive websites. If your website is slow to respond to user actions, it can lead to a poor user experience, increased bounce rates, and lost revenue. INP helps lift back the curtains on finding interactivity pain points.

This new metric differs from other Core Web Vital metrics, specifically focusing on user interaction. The other metrics round out a balanced profile for page speed.

INP is particularly important for websites that heavily rely on user interaction, such as e-commerce websites, social media platforms, and gaming websites. A low INP score indicates that the website is responsive and provides a great user experience.

And, of course, improving your website’s INP score can also positively impact your search engine rankings. As of May 2021, Google uses Core Web Vitals as a ranking signal for search results. We also found in a recent study that Core Web Vitals can have a direct impact on website traffic and conversions.

Shortcomings of FID and How INP Improves Upon Them

After a year of testing and getting feedback, Google has announced that INP will officially be replacing FID as the new Core Web Vitals metric for responsiveness in March 2024.

Interaction to Next Paint (INP) and First Input Delay (FID) are both performance metrics used to measure different aspects of a website’s interactivity and responsiveness. Though they might seem similar at first glance, they have distinct characteristics and applications. INP is focused on measurements after the page loads and once the user starts interacting with the page. FID is more geared around the initial page load.

Key differences between INP and FID

Pitfalls of FID

• Limited Scope: FID only captures the delay for the first interaction, which may not reflect the site’s performance throughout the entire user session.
• Initial Load Bias: FID’s focus on the initial load means it doesn’t account for interactions that occur after the page has become interactive, potentially overlooking issues that affect user experience later on.
• Does Not Reflect Visual Feedback: FID does not measure the time it takes for visual updates to occur on the page after an interaction, which is a critical aspect of perceived responsiveness.

INP addresses these limitations by considering the responsiveness of the entire browsing session and including the visual update of the page, which provides a more accurate and holistic measure of a website’s interactive performance.

How Does Interaction to Next Paint (INP) Work?

Simply, INP gauges the time it takes for the browser to process and display the results of a user’s interaction with a webpage element. To better understand INP, let’s break down its core components and how they’re measured.

Components of INP

INP comprises two main events:

1. The interaction: This refers to the user’s engagement with a webpage element. Some examples of user interactions measured by INP are:
   • Clicking buttons or links
   • Selecting items from a dropdown menu
   • Submitting a form
   • Scrolling through content
   • Hovering over elements that trigger an action
2. The subsequent paint event: This is the browser’s response to the interaction, which typically involves updating the page’s content, layout, or appearance.

Events not measured by INP:

1. Passive Events: Interactions that do not trigger changes on the page, such as moving the mouse without clicking or scrolling when it does not trigger a response from the website.
2. Zooming: Pinch-to-zoom or other zoom gestures that are handled by the browser natively and do not require a repaint by the webpage itself.
3. Browser User Interface Interactions: Actions like resizing the browser window, interacting with browser extensions, or using browser controls (e.g., forward, back, refresh buttons).
4. Hover States: Hovering over elements that do not trigger a JavaScript event or a repaint (e.g., CSS-only hover effects).
5. Non-Interactive Media Playback: Starting or stopping a video or audio element through native controls that do not require a repaint or are not tied to JavaScript event handlers.
6. File Downloads: Initiating a file download that does not trigger a visual change on the page.
7. Autofill Events: Browser autofill actions that populate form fields without triggering JavaScript events.
8. Keyboard Shortcuts: Browser or system-level keyboard shortcuts that do not interact with the webpage directly.
9. Interaction with Iframes: Interactions within iframes that do not trigger a repaint or event in the parent document.
10. Touch Gestures: Gestures that are handled by the device’s operating system and do not result in a page repaint or event, such as swiping to navigate back or forward in the browser history.

It’s important to note that INP focuses on capturing interactions that require the browser to process an event and render a visual response. Interactions that do not lead to such processing or rendering are generally not measured by INP.

How to Measure INP

To measure INP, we first need to record the precise moment when a user interacts with a webpage element. This timestamp serves as the starting point for the INP calculation.

Next, we monitor the browser’s interaction processing and identify the subsequent paint event. The time difference between the initial interaction and the next paint event represents the INP value. A shorter INP indicates a more responsive and interactive webpage, enhancing user experience.

INP helps us understand the user interactions that are causing the most friction.

Tools to Measure INP

There are several tools to measure Interaction to Next Paint. The most common tools give a high-level score, but we have the ability to dig in deeper with these recommendations.

Chrome User Experience Report (CrUX)

CrUX is a Google-powered, public dataset that aggregates user experience metrics, including INP, for millions of websites. By using BigQuery or PageSpeed Insights, you can access CrUX data to analyze your website’s INP performance and identify areas for improvement.

WebPageTest

This popular online tool offers a thorough performance analysis of your website, with INP being one of the many metrics it evaluates. To measure INP using WebPageTest, simply enter your website’s URL, choose your desired test settings, and let the tool do the rest.

Browser Developer Tools

Modern browsers, such as Google Chrome and Mozilla Firefox, have built-in developer tools that can measure INP. In Chrome, drill into the “Performance” panel to record and analyze user interactions. For a more in-depth look, Google gives a detailed example of how to surface slow interactions through the performance profiler.

Custom JavaScript

If you’re proficient in JavaScript, you can create custom code snippets to measure INP for specific interactions on your website. This method allows for a more tailored approach to measuring, focusing on the elements most crucial to your site’s user experience.

What Is a Good Interaction to Next Paint Score?

Striving for an INP score of 200ms or less is ideal for providing an enjoyable user experience, which should increase user engagement and, ultimately, boost the success of your online presence. Here are the scoring guidelines set by Google:

Good: 000-200ms
Needs improvement: 201-500ms
Poor: Over 500ms

Here is an example of an interaction with little to no delay that will contribute to a good INP score. The user clicks the image, and it immediately opens a lightweight modal displaying the image in a larger size.

And here is an example of the same interaction, except there is a significant delay between when the user clicks and when the subsequent action triggers.

How Site Owners Can Prepare for the INP Transition

Once we have identified the areas that are hurting our INP score, we need to work on improvement. Improving Interaction to Next Paint will come from three main areas: long input delay, event callback optimization, and presentation delay.

While there are other factors, like 3rd party scripts, these main three will be what we can diagnose and find solutions for on the assets under our control.

1. Fix Long Input Delay

Fixing long input delays is essential for ensuring a smooth and enjoyable user experience on your website. When it comes to addressing this issue, there are several strategies you can employ:

• Optimize JavaScript: One of the primary causes of input delays is heavy JavaScript execution. To combat this, consider breaking up long tasks into smaller, more manageable ones using techniques like requestAnimationFrame or requestIdleCallback. Additionally, be sure to defer non-critical JavaScript execution until the main content has loaded.
• Prioritize Event Handling: To improve input responsiveness, prioritize event handling by using passive event listeners. These allow the browser to continue with other tasks while simultaneously processing user interactions, resulting in a more fluid experience.
• Minimize Main Thread Activity: Keep the main thread as light as possible by eliminating unnecessary tasks and optimizing your code. The less work the main thread has to do, the quicker it can respond to user inputs. Consider the use of isInputPending and yielding to the main thread.

2. Optimize Event Callback

To optimize event callbacks, focus on executing only the essential logic required for visual updates in the next frame, deferring other tasks. When we defer non-critical task updates until after the next frame, it reduces processing time and delays in painting that next frame. Once the next frame has been painted, we can execute the rest of our non-critical tasks.

An example of this is when the user interface gets updated while the user is typing in something. Perhaps an auto-complete search field, a rich text editor, or the like. For a more in-depth look at an example like this and how to address event callback optimization, check out this web.dev article.

3. Reduce Presentation Delay

Our last INP optimization topic is presentation delay. Presentation delay starts when event callbacks finish and ends when the browser presents the next frame. While you have limited control over presentation delays, here are some tips to avoid frame delays:

1. Don’t misuse requestAnimationFrame() for non-rendering tasks, as it might delay the next frame.
2. Be cautious with async, await, and Promises; they can still block rendering, so keep tasks short.
3. Carefully use ResizeObserver callbacks; expensive work in them might delay the next frame. Defer non-essential logic.

4. Utilize Web Workers

Web workers are a feature of the Web API that allows for background scripts to run in parallel to the main execution thread of a web application. They can be utilized to improve INP by offloading expensive tasks from the main thread, which is responsible for handling user interactions and updating the UI. Here’s how web workers can be leveraged to enhance INP:

• Background Processing: Web workers can handle time-consuming calculations, data processing, or complex algorithms in the background without blocking the main thread. This ensures that the main thread remains responsive to user interactions.
• Asynchronous Operations: By performing operations like fetching data from a server or indexing a database in a web worker, the main thread can continue to process user inputs and render updates quickly, improving the INP score.
• Decoupling Heavy Tasks: Tasks that don’t require immediate Document Object Model (DOM) updates can be moved to a web worker. For example, processing large datasets or performing heavy cryptographic operations can be done in the background.
• Minimizing Jank: By offloading tasks to web workers, the risk of causing “jank” (visually noticeable delays or stuttering in the UI) is reduced, leading to smoother animations and transitions, contributing to a better INP.
• Event Debouncing: Web workers can be used to debounce events that may cause frequent updates, such as window resizing or scrolling. The worker can batch these events and send a single update to the main thread, reducing unnecessary paints.
• Image and Asset Manipulation: Tasks like image processing or asset manipulation that are not directly tied to a user interaction can be handled in a web worker, ensuring that these operations don’t interfere with the page’s responsiveness.
• State Management: Complex state management operations, especially in single-page applications (SPAs), can be offloaded to web workers to maintain a responsive UI while managing the application state in the background.

By strategically using web workers to perform non-UI tasks, developers can keep the main thread more focused on responding to user interactions and rendering the UI. This can lead to a more responsive web application and an improved INP score. However, it’s important to note that web workers do not have direct access to the DOM, so any changes that need to be reflected in the UI must be communicated back to the main thread using a messaging system.

Wrap-Up

Interaction to Next Paint (INP) is a valuable new Core Web Vitals metric. By addressing issues with INP, we can pinpoint areas for improvement, working towards a smoother user experience. This is particularly crucial for websites that are heavily reliant on user interactions, such as e-commerce sites, social media platforms, and gaming websites.

A low INP score signifies a responsive website, leading to better user experience, increased user engagement, and higher conversion rates. As Google now includes Core Web Vitals as ranking signals for search results, improving INP scores could also enhance search engine rankings, further contributing to a site’s overall online success.

For more information on how to improve your site’s other Core Web Vital metrics, check out our resources on improving LCP and improving FID and FCP.