Skip to main content
Andrea Verlicchi

Making the web faster and more sustainable

Preparing for Interaction to Next Paint (INP), a new Core Web Vital starting March 2024

Michelangelo's 'Creation of Adam' painting
Michelangelo's "Creation of Adam" painting

As a web performance consultant, I'm always on the lookout for new developments that impact the user experience of websites. One such upcoming change is the introduction of a new metric called Interaction to Next Paint (INP) by Google. Set to become a Core Web Vital in March 2024, INP is designed to measure the time it takes for a website to respond to user interactions. In this blog post, we will delve into what INP is, why it matters, and how companies can prepare themselves to ensure their websites meet this crucial web performance metric.

Understanding Interaction to Next Paint (INP) #

INP is an important addition to the Core Web Vitals, a set of metrics that Google uses to assess and rank websites based on their user experience.

Unlike other metrics such as Largest Contentful Paint (LCP) and Cumulative Layout Shift (CLS), which measure loading and visual stability, INP focuses on interactivity, meaning how quickly a website responds to user input after it has loaded. It quantifies the time it takes for the website to be ready to paint something after users interacted with them, and it aims to bring users an experience without any noticeable delays.

Why INP Matters #

In today's digital landscape, user expectations are higher than ever. People demand fast and seamless interactions when browsing the web, and any delays or unresponsive elements can result in frustration and abandonment. INP addresses this issue directly by measuring the time it takes for a website to respond to user inputs, which is a critical factor in delivering an exceptional user experience.

Moreover, Google has emphasized the importance of Core Web Vitals as a ranking factor for search engine optimization (SEO). Websites that provide better user experiences, as measured by these metrics, are more likely to rank higher in search results. With INP set to become a Core Web Vital, companies that prioritize website interactivity will not only enhance their user experience but also gain an advantage in search engine visibility.

Preparing for INP #

As the March 2024 deadline approaches, companies need to prepare for the inclusion of INP as a Core Web Vital. Here are some steps to ensure your website is ready:

  1. Evaluate Current INP Performance: Start by assessing your website's current INP performance. The easiest way to check your website's INP values is via Google Search Console. Alternatively, you can try Chrome User Experience Report (CrUX) or PageSpeed Insights. Benchmark your current INP scores and set goals for improvement.

  2. Improve INP: See next chapter to find out what to do to improve INP on your website.

  3. Continuously monitoring and iterate: Web performance is an ongoing process, and it's crucial to monitor and measure INP regularly. Continuously analyze your website's performance, implement optimizations, and retest to ensure your INP scores meet the desired targets. Regularly review Google's developer documentation and community forums for updated best practices.

How to improve INP #

Let's get a little bit technical now. There are 3 types of actions you can take to improve INP on your website. Avoid or break up long tasks, avoid unnecessary JavaScript, and avoid large rendering updates.

Avoid or break up long tasks #

Tasks are any piece of discrete work that the browser does. Tasks include rendering, layout, parsing, and compiling and executing scripts. When tasks become long tasks—that is, 50 milliseconds or longer—they block the main thread from being able to respond quickly to user inputs.

Another option is to consider using APIs such as isInputPending and the Scheduler API. isInputPending is a function that returns a boolean value that indicates whether user input is pending. If it returns true, you can yield to the main thread so it can handle the pending user input. Check out isInputPending to yield only when necessary.

The Scheduler API is a more advanced approach, which allows you to schedule work based on a system of priorities that take into account whether the work being done is user-visible or backgrounded. Check out the Scheduler API.

By breaking up long tasks, you're giving the browser more opportunities to fit in critical user-visible work, such as dealing with interactions and any resulting rendering updates.

Avoid unnecessary JavaScript #

There's no doubt about it: websites are shipping more JavaScript than ever before, and the trend doesn't look like it's changing any time soon. When you ship too much JavaScript, you're creating an environment where tasks are competing for the main thread's attention. This can definitely affect your website's responsiveness, especially during that crucial startup period.

This is not an unsolvable problem, however. You do have some options:

Avoid large rendering updates #

JavaScript isn't the only thing that can affect your website's responsiveness. Rendering can be a type of expensive work in its own right—and when large rendering updates happen, they can interfere with your website's ability to respond to user inputs.

Optimizing rendering work isn't a straightforward process, and it often depends on what you're trying to achieve. Even so, there are some things you can do to ensure that your rendering updates are reasonable and don't sprawl into long tasks:

Conclusion #

With Interaction to Next Paint (INP) set to become a Core Web Vital in March 2024, companies should start to prioritize website interactivity to deliver an exceptional user experience and improve search engine rankings.

By evaluating current INP performance, optimizing for interactivity, and continuously monitoring and iterating, businesses can prepare themselves for the upcoming change.

Embracing INP as a vital performance metric will not only benefit users but also contribute to the long-term success of their online presence.

Need a hand? #

If you want to know more about INP, how to optimize it, or you need web performance consultancy, feel free to reach out to me.