Learn how core web metrics are changing and what you can do to get a good score in engagement with Next Paint, Google’s new on-page experience metric.
In this guide
1.What are the basic web vitals and what changes?
2.What is the reaction with the upcoming paint?
3.What should be my reaction to the upcoming paint?
4.What causes slow reaction of Next Paint (INP) tones?
5.How to improve interactivity in Next Paint
6.The easy way: Real User Monitoring (RUM)
7.You can monitor reactions easily and continuously until the next coating.
.webp "Google’s New Core Web Vitals Metric: How To Improve Interaction To Next Paint (INP)")
But Google also looks at how good your website experience is after a visitor arrives.
Over the past few years, Google has been overhauling what it collects and uses as a ranking factor.
After introducing core web metrics, Google has gradually improved the way they are measured so that they better reflect the actual user experience.
However, with the introduction of the scale, Google has now announced the biggest update to Core Web Vitals since its original launch.
What should you do before INP becomes a rating signal?
This guide explains how you can improve it.
What are the basic web vitals and what changes?
Core Web Performance Indicators (CWV) are a combination of three user experience metrics
There are three CWV scales:
- Paint with the most content: How quickly will your home page content appear?
- Overall layout transformation: Is the page layout stable after loading?
- First input latency: How quickly does the page respond to user input?
However, the interaction with the next coating (INP) will replace the delay of the first input.
What Is Interaction To Next Paint?
It tells you which interactions delay a visitor’s experience while using your website.
INP measures the amount of time that elapses between a user interaction (such as a click or touch input) and the “next graphic” that visually updates the website.
For example, if a user clicks a button and then the page pauses for half a second before refreshing, the INP value will be 500 ms.
The browser spends this time running the website code and displaying the updated page.
Why did Google change the first input delay to the next interaction in Paint?
The old first input lag metric often fails to identify bad user experiences when they happen.
Interaction with Next Paint (INP) when first input is delayed is improved in two ways:
- INP takes into account the full time between a user’s interaction and the next visual refresh on the page. The first input delay is only part of the total delay.
- INP takes all page interactions into account and typically reports the highest response time. The first input delay only looks at the first interaction.
What should be my reaction to the upcoming paint?
You must have an INP to provide a good experience and meet basic Google Web Vitals standards.
Most sites have found it fairly easy to meet the first input lag threshold and still provide a good experience.
In contrast, only 64% of sites currently perform well on the following graphic engagement metric.
You can use a free tool like or to see how well your site is performing. Debug Bear’s “Web Vitals” tab also shows you a history of how your INP score has changed over time.
What causes slow reaction of Next Paint (INP) tones?
Constant CPU processing on the page that prevents the browser from displaying the latest page content results in slow INP results.
So, let’s explain where you should look for potential INP issues.
The total INP value consists of three different components that add up to the overall score:
- Input delay.
- Processing time.
- Delay in presentation.
Input delay
Input latency is the delay between a user clicking a button and the user receiving a response from that button.
In this example, you can use JavaScript to dynamically display new page content once the user clicks the Show More button.
However, new page content can only be loaded if the browser is not already busy running other code on your website.
If the browser is still running other code on your website, it must wait for that code to finish running before responding to the user’s click.
This delay between user interaction and the execution of your event handler code is called input delay.
The metric can give you an indication of what other code is running on your website and can delay event handler code.
Processing Time
Processing time is the time you spend running your code in response to user interaction. This is usually the largest portion of the overall interaction delay.
If your code makes small changes to the page (such as displaying hidden content), this processing can take place in just a few milliseconds.
However, if you have to re-render a complex application that displays a lot of data, this could take hundreds of milliseconds or more.
Delay in presentation
Display response time is the time your browser spends calculating where and how new content will appear. This can include anything from colors to location to fonts.
If you have a simple website, it shouldn’t be too long.
However, if your website contains tens of thousands of individual elements with a complex design, these calculations may cause delays in engagement on your website.
How to improve interactivity in Next Paint
If you’re not sure which pages on your website need improvement, here’s a good place to start. Here you can see specific slow URLs.
Once you know which pages should be optimized, there are several ways to identify slow interactions on your website:
- Using the INP debugger
- Test manually in Chrome DevTools
- Create a user flow in Lighthouse
- Use Real User Monitoring (RUM).
We will take a look at these four methods in addition to their pros and cons.
1. Use the INP debugger to determine the cause of the INP delay.
- DebugBear is a free tool that automatically identifies slow website interactions.
- It will try to find buttons, input fields, and other page elements that may cause a delay in interaction.
- If a slow reaction occurs, the corresponding widget is displayed as the result of the test, along with the value of the next paint from that reaction.
- The INP debugger makes it easier to run tests and identify slow objects.
- However, it does not work well for complex flows.
For example, if a customer first adds an item to their shopping cart and experiences poor performance during the checkout process, this may go undetected.
2. Continue using Chrome DevTools to troubleshoot complex INP issues.
Google Chrome’s developer tools provide a lot of information about what’s happening on your page.
Allows you to create a recording of the interaction and then analyze it.
- Open the DevTools Performance tab.
- Click the “Start Recording” button.
- Click on the widget on the page.
- Stop recording.
- Open the Interactions path in the Performance Profile.
- Review the “main” track to see CPU activity, including the specific tasks responsible for latency.
Any continuous work on the main thread is what prevents the next coating.
DevTools data is incredibly detailed and gives you all the information you need to improve this interaction.
This works for both simple pages and complex user flows or pages that require login.
Next, you need to collect data manually and use trial and error to decide which UI elements to interact with.
3. Scroll down to delay a more comprehensive interaction with the Lighthouse user flow.
Now that you’ve manually defined page elements, it’s time to take advantage of Google’s Lighthouse tool, which also supports user flow testing and INP measurement.
Lighthouse DevTools provides a more comprehensive analysis of interaction latency than the Performance tab.
You can launch Lighthouse from Chrome DevTools and interact with page elements manually, or write code to automate interactions to make it easier to retest your site later.
4. Fix interaction with the following paint issues.
Once you identify the interaction causing the delay, you can copy it to DevTools and submit a performance profile detailing what needs to be fixed.
You will need to work with your development team or website platform provider to resolve these issues.
Common INP issues include that external code may be blocking the CPU, or that a custom slider or menu may need to improve performance.
How to solve an INP problem depends on the nature of the problem.
The easy way: Real User Monitoring (RUM)
With, you can collect detailed data and.
In real time.
To reduce the degree of INP easily:
- Used to automatically detect slow page elements.
- Take a quick look at the page elements that typically result in slow interactions.
- Make your own changes.
This screenshot shows how different users interact with different elements of the page, and how they experience different amounts of input lag as a result.
Real user monitoring tools also provide details about specific examples of slow user experiences.
This can help you understand the context of where the delay occurred and make it easier to replicate and fix the issue.
For example, some user interface elements may only be visible on certain screen sizes or some interactions may be slow in some browsers.
Real user monitoring offers in-depth information on sluggish website interactions.
It’s also the closest to Google’s data because Google also collects its metrics from real users. Complex user journeys and login experiences can be tracked.
However, real user monitoring tools usually require paid tools and require you to install part of them on your website.
You can monitor reactions easily and continuously until the next coating
Start collecting real user data on INP and other essential web vitals by signing up
With this free trial, you can:
- Instead of waiting for Google for 28 days, see the impact of the improvement immediately.
- Track performance across your entire website.
- Find popular pages where users have a hard time interacting.
- See how your website performs around the world, across devices, and across different page types.