It’s time to talk about the newest addition to Google’s Core Web Vitals metric family – Interaction to Next Paint (INP).
What is Interaction to Next Paint (INP)?
Interaction to Next Paint is an experimental 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 or taps on a link) and outputs 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, if you had a good INP score of 000-200ms, this would demonstrate that your website is highly responsive and interactive, creating a seamlessly smooth user experience.
Why is INP Important?
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, ultimately, lost revenue. INP helps lift back the curtains on finding interactivity pain points.
This new metric differs from other Core Web Vital metrics in that it specifically focuses on user interaction. The other metrics round out a balanced profile for page speed.
| Core Web Vital Metric | Goal |
|---|---|
| First Contentful Paint (FCP) | Measure loading speed |
| First Input Delay (FIP) | Measure initial page load interactivity |
| Largest Contentful Paint (LCP) | Monitor visual stability |
| Interaction to Next Paint (INP) | Measure collective interactions |
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 have a positive impact on your search engine rankings. Google has announced that starting May 2021, the Core Web Vitals will be used as a ranking signal for search results.
How is INP Different from FID?
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 load and once the user starts interacting with the page while FID is more geared around the initial page load.
Definition and Focus
INP measures the time it takes for a user to interact with an element on the page and the subsequent paint that occurs. It aims to evaluate the speed at which the browser can process and display the outcome of a user’s interaction.
In contrast, FID focuses on the delay between a user’s first interaction with a webpage and the browser’s ability to respond to that interaction. It helps gauge the responsiveness of a website during the initial loading phase.
Timing of User Interaction
While INP considers the entire lifecycle of user interactions on a webpage, FID specifically targets the very first interaction.
INP can provide insights into the overall browsing experience and how efficiently a website handles user input, whereas FID is more concerned with the initial perception of the website’s responsiveness.
Impact on User Experience
Although both INP and FID influence user experience, they affect it in different ways. A good INP score ensures a smooth and seamless browsing experience, as the browser can quickly process and render user interactions.
An optimized FID score, on the other hand, contributes to a positive first impression by demonstrating a responsive website right from the beginning.
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. In order to better understand INP, let’s break down its core components and how it’s measured.
Components of INP
INP comprises two main events:
- The interaction: This refers to the user’s engagement with a webpage element. Some examples of interactions are:
- Clicking buttons or links
- Selecting items from a dropdown menu
- Submitting a form
- Scrolling through content
- Hovering over elements that trigger an action
- The subsequent paint event: This is the browser’s response to the interaction, which typically involves updating the page’s content, layout, or appearance.
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 processing of the interaction 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, contributing to an enhanced user experience.
INP helps us understand the user interactions that are causing the most friction.
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
It’s important to remember that Interaction to Next Paint is an experimental metric at this time and that these ranges are not set in stone.
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.
Tools to Measure INP
There are a number of 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 as well.
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, come equipped with 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.
How to Improve Your INP Score
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. Event Callback Optimization
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:
- Don’t misuse requestAnimationFrame() for non-rendering tasks, as it might delay the next frame.
- Be cautious with async, await, and Promises; they can still block rendering, so keep tasks short.
- Carefully use ResizeObserver callbacks; expensive work in them might delay the next frame. Defer non-essential logic.
Wrap-Up
In conclusion, 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 experience for users. 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.
Everyone wants a faster and more seamless user experience!
