What is the Interaction to Next Paint metric and why should you care about it?

What is Interaction to Next Paint?

The Interaction to Next Paint metric measures the time the user interface needed to visually respond to a user interaction. It is expressed by a single latency value which is the highest time in milliseconds the user interface took to respond to an interaction over the entire lifetime of the page (all consecutive paints occured within the given timespan).

For example, if you click a hamburger icon to open a mobile menu, the Interaction to Next Paint value will tell you how many milliseconds the user interface needed to provide a visual feedback (i.e. opening the mobile menu).

A good INP value is classified as everything below 200 milliseconds, values between 200 and 500 milliseconds require some improvement, and an INP value above 500 milliseconds is considered to be poor responsivness. Nevertheless, these guidelines might be changed in the future given the fact that the INP metric is in its experimental stage.

All of this might sound pretty similar to the First Input Delay metric. The main difference between those metrics is that the FID takes into account only the first interaction on a page, while INP samples interactions over the entire lifetime of a page. This means that INP will provide a better overview over the real user experience.

How to measure INP?

The best way to retrieve the INP value for your website is checking the PageSpeed Insights on pagespeed.web.dev.

If your site doesn't have enough traffic for the real usage data from the Chrome UX Report to be retrieved, you can also use the web-vitals library and collect the data yourself.

Here is a short code-snippet to get you started:

import { onINP } from 'web-vitals';

onINP(({ value }) => {
    console.log(value);
    // TODO: send the value to your analytics provider
});

What should I do if my site doesn't pass the INP rating?

If your website currently doesn't fall into the good category of INP thresholds, don't necessarily be worried in the first place. Interaction to Next Paint is still in its experiemental phase and the thresholds might get changed in the future. Just make sure to keep an eye on any announcements from Google regarding the INP being rolled out as part of the Core Web Vitals to make sure to take an action if necessary.

Nevertheless, if your website gets a poor rating in terms of INP, or if you just want to be prepared, there are a few things you might try in order to improve the responsivness of your site. In the end, Interaction to Next Paint is all about the user experience, and that's what really matters.

How to improve INP?

Improving the Interaction to Next Paint might be tricky given that poor values are mostly caused by synchronous JavaScript. This also means that there is no single magic solution that would fit all websites.

Nevertheless, here are some general guidelines that might help you improve the responsivness of your website:

• Use skeleton loaders (or other loading indicators) if you know the user performed an action that might require some time to be processed on the server (e.g. adding a product to the cart).

• Remove unused JavaScript, you can use the Coverage tool in Chrome Devtools to get some assistance.

• Review 3rd party libraries; defer everything you can.

• Avoid client-side rendering as much as possible (especially on the initial load).

• Try identifying long tasks, make sure your event handlers don't need too much time to be processed.

• Use the performance profiler to review all common interactions on your site.