The Core Web Vitals are a set of metrics that Google has defined to measure how good a website’s user experience is. They first became a ranking signal in 2021.

While the metric definitions have been tweaked over time, the introduction of the Interaction to Next Paint metric is the biggest change since the start of the Core Web Vitals initiative.

What is Interaction to Next Paint (INP)?

Next Paint engagement is a metric that evaluates how quickly your website responds to user interactions. It measures how much time between user input, e.g. B. a click on a button, and the next update of the page content (the “next painting”) elapses.

To rank better on Google, this interaction delay should be less than 200 milliseconds. This ensures that the website is responsive to users.

How are the Core Web Vitals changing?

Google has announced that engagement with Next Paint will become one of the three Core Web Vitals metrics in March 2024. At this point, a site that is too slow to respond to user input could rank lower in search results.

INP replaces the current First Input Delay (FID) metric. While the FID also measures responsiveness, it is more limited as it only considers the initial user interaction. Also, it only measures the delay before it starts processing the input event, rather than waiting for the user to see the result.

Currently, only 64.9% of mobile sites perform well on the Interaction with Next Paint metric and it will be more difficult to get a good INP score than a good First Input Delay score.

How can I measure the ‘Interaction with Next Paint’ metric on my website?

Run a website speed test to see how fast your website loads and how quickly it responds to user input.

Open the Web Vitals tab once your test is complete. You can see the Closest Color Interaction metric at the bottom of the page.

In this case, only 38% of users have a good INP experience.

How can I optimize the interaction with Next Paint?

Interaction delays occur when the browser has to do a lot of CPU processing before it can refresh the page. This can happen for two reasons:

• Running background tasks prevent user input from being processed
• Processing the user input itself takes a lot of time

Background tasks are often run when the page first loads, but they can also run later. They are often caused by third-party code embedded on the website.

Responding to a user interaction can require a lot of processing. If this can’t be tweaked, consider showing a spinner to provide visual feedback until the processing task is complete.

Running JavaScript code is the most common type of processing, but even complex visual updates can take a long time.

Use Chrome DevTools to analyze performance

Chrome DevTools performance profiler shows which tasks are taking a long time and should be optimized. Start a recording, click an item on the page, and then click the longest bars in the visualization.

This allows you to see whether the code comes from a third party or from your own website. You can also delve deeper to see how the task can be sped up.

Check the Total Blocking Time metric to identify background tasks

The Total Blocking Time metric tracks how often there are background CPU tasks that could be blocking other code from executing. If the user interacts with the page while a task is already in progress, the browser will first complete that task before handling the input event.

You can use tools like Google Lighthouse to see how this metric can be tweaked.

If processing-intensive tasks on your website are part of your core website code, you need to work with your development team to optimize them. For third parties, you can check if the script is still needed or contact the vendor’s customer support to see if the code can be optimized.

Monitor the interaction with the next color

Want to keep track of your performance on INP and other Core Web Vitals? DebugBear can track your website speed and help you optimize it.

Start a free 14-day trial today and ensure a better user experience.

Diploma

The Interaction with Next Paint metric represents the biggest change to Google’s Core Web Vitals since its original announcement. INP addresses the shortcomings of the previous metric, First Input Delay, and provides a better representation of how users experience a website.

See how your site ranks on the Next Paint engagement metric before the 2024 ranking change rolls out. This gives you enough time to identify optimizations and make your website faster.

Try DebugBear with a free 14-day trial.