Interaction to Next Paint is now a stable Core Web Vital metric, replacing First Input Delay.
Today's the day! After years of work, we're finally ready to make Interaction to Next Paint (INP) a stable Core Web Vital metric. This marks a significant step forward in the way we measure interaction responsiveness, addressing many of the shortcomings of First Input Delay (FID).
In this post, we'll quickly recap what exactly is changing today, set a more specific timeline for deprecating and removing FID from Chrome tools, and share some resources to help you find and fix INP issues.
What's changing today
On the Chrome side, all of our Core Web Vitals tools will now reflect INP's stable status wherever applicable. For example, tools like PageSpeed Insights, the CrUX Dashboard, and the Web Vitals extension will more prominently show INP in the trio of Core Web Vitals metrics. In PageSpeed Insights specifically, the Core Web Vitals assessment logic will evaluate INP performance instead of FID. To learn more about the corresponding changes to Search Console, refer to the Search team's blog post.
Additionally, starting today some tools may display a deprecation notice for FID as a warning that the metric is no longer a Core Web Vital and it will be removed. The following FID deprecation timeline section discusses the dates to know to ensure that you're fully transitioned off of FID.
FID deprecation timeline
Now that INP has replaced FID as a Core Web Vital metric, Chrome is officially deprecating support for FID. What this means is that Chrome tools will no longer guarantee FID availability and developers will have until September 9, 2024 to transition over to INP.
This is especially important for consumers of the Chrome User Experience Report (CrUX) or PageSpeed Insights APIs. Applications that process FID data from either of these APIs must be transitioned over to INP by September 9 to avoid any breakages or disruptions in service. To be clear, this will be a breaking change in the latest versions of the APIs, and there will not be a bump in the major version numbers!
Resources to optimize INP
Regardless of whether you're looking at INP for the first time or you're a responsiveness pro, the collection of INP optimization resources is a great starting point to find what you're looking for. This evergreen collection of docs covers everything from the definition of the metric itself, techniques to measure it locally and with real-users, practical advice to optimize a variety of use cases, and a list of real-world case studies showing the guidance in action.
Using these docs, here's a general workflow you can follow to find and fix INP issues on your site:
Familiarize yourself with how INP measures responsiveness to user interactions in the canonical INP docs.
Look at real-user data to assess your site's INP performance. At least 75% of INP experiences should respond to user input in under 200 milliseconds to be considered good. If your site already has good INP, don't sweat it!
Plug your URL into PageSpeed Insights or check out the Core Web Vitals report on Search Console, if your website is included in the CrUX dataset.
Check with your analytics provider if they support INP monitoring.
Roll your own INP solution using web-vitals.js.
If needed, instrument your site to collect diagnostic information about the user experiences. This is important metadata such as which page element the user interacted with and why it was slow, as well as other useful data. In aggregate, this information will help you understand the biggest opportunities for improvement.
Reproduce the slow interactions locally with Chrome DevTools. This will help you see exactly what's happening under the hood and what the offending code is.
Optimize your code to do as little work as possible while handling a user interaction:
Measure your changes locally and monitor your real-user experiences to ensure that your INP performance is getting (and staying!) fast.
Hopefully, this guidance puts you on the right path to optimizing INP. If you encounter any issues along the way, you can always get help by posting a question tagged with interaction-to-next-paint on Stack Overflow.
Launching INP as a Core Web Vital has been a long time coming, looking back to our first post about building a better responsiveness metric in 2021. Since then, we've taken all of the amazing community feedback into consideration, and developed a metric that we firmly believe will guide developers towards improving an underserved area of user experiences, ultimately leading to a better web. Thank you all for your help in shaping this metric, and all of your hard work to improve the state of responsiveness!