Google has announced a new metric for measuring the responsiveness of web pages: Interaction to Next Paint (INP). INP will replace First Input Delay (FID) as a Core Web Vital on March 12, 2024.
In an announcement on its Web.dev blog, Google stated, “Today, we’re announcing that INP will officially become a Core Web Vital and replace FID on March 12 of this year, and that FID will be deprecated in this transition.” This marks a significant change as FID will no longer be considered a Core Web Vital after March 12.
In this article, I will explain what INP is, how it differs from FID, and how to optimize your site for it.
What is Interaction to Next Paint (INP)?
Interaction to Next Paint (INP) is a metric that measures the time between when a user interacts with a page (such as clicking a button or a link) and when the browser renders the changed pixels to the screen. It aims to capture aspects of interactivity that FID did not.
FID, which was introduced in 2018, measured the time from when a user first interacted with a page to when the browser was able to respond to that interaction. However, FID had some limitations, such as:
- It only measured the first interaction on a page, ignoring subsequent ones.
- It did not account for the visual feedback of the interaction, such as highlighting a button or changing the cursor.
- It did not consider the complexity or duration of the interaction, such as loading new content or performing an animation.
INP addresses these limitations by measuring the latency of all interactions on a page and taking into account the visual changes that result from them. For example, if a user clicks on a button that triggers an animation, INP will measure the time from when the user clicked to when the animation completed.
How does Google calculate INP?
To calculate INP, Google records the latency of each interaction on a page and selects one of them to represent the page’s overall interactivity. The selected interaction is either:
- The interaction with the worst latency, if there are less than 50 interactions on the page.
- The 98th percentile of interaction latency, if there are more than 50 interactions on the page.
The latency of an interaction is composed of three components:
- The input delay, which is the time between when the user interacts with the page and when the browser starts processing it.
- The processing time, which is the time it takes for the browser to execute any code associated with the interaction.
- The presentation delay, which is the time between when the browser finishes processing the interaction and when it presents the next frame.
The sum of these three components is the duration of an interaction. The longest duration of any event that is part of an interaction is its latency.
For example, if a user clicks on a button that triggers a JavaScript function that takes 100 ms to execute and then an animation that takes 300 ms to complete, the duration of this interaction is 400 ms and its latency is also 400 ms.
Why is INP important?
INP is important because it reflects how users perceive the responsiveness of a web page. A low INP means that the page responds quickly and smoothly to user input, which can improve user satisfaction and engagement. A high INP means that the page is slow or unresponsive, which can frustrate users and make them abandon the page.
Google uses INP as one of its Core Web Vitals, which are a set of metrics that measure key aspects of user experience on the web. Core Web Vitals are used by Google in its ranking algorithm and are also displayed in tools like PageSpeed Insights and Search Console. Therefore, optimizing your site for INP can help you improve your site’s performance, visibility, and usability.
How to optimize your site for INP?
To optimize your site for INP, you need to reduce the input delay, processing time, and presentation delay of your interactions. Here are some general tips to achieve this:
- Evaluate your current INP performance using tools like PageSpeed Insights, Chrome User Experience Report, or WebPageTest.
- Identify and diagnose issues that cause high INP, such as long JavaScript tasks, excessive main thread activity, large DOM size, or complex CSS selectors.
- Optimize your code and content following Google’s best practices, such as minimizing JavaScript execution time, reducing input delay, simplifying DOM structure, refining CSS selectors, or using web workers.
- Monitor and measure your INP performance over time using tools like Real User Monitoring (RUM) or Google Analytics.
Summary
Interaction to Next Paint (INP) is a new metric that measures the responsiveness of web pages throughout all interactions on a page. It will replace First Input Delay (FID) as a Core Web Vital on March 12, 2024. To optimize your site for INP, you need to reduce the input delay, processing time, and presentation delay of your interactions. By doing so, you can improve your site’s user experience and search rankings.
I hope you enjoy reading this blog post. If you want my team to improve your site’s user experience and search rankings without affecting by Google’s latest Core Web Vitals Update, click here.