Interaction to Next Paint (INP): Tackling Slow Interactions

Developers and website owners, take note. If you haven't heard yet, Google is rolling out a new metric, Interaction to Next Paint (INP). This metric, set to replace First Input Delay (FID) in March 2024, will become one of the three key Core Web Vitals.

Interaction to Next Paint is more stringent and better captures the user's experience with a website. It measures interactivity, specifically how quickly a page responds to user actions once loaded, such as interacting with components like carousels, accordions, or adding items to a cart.

Optimizing this metric could take several months, so the best time to start is now.

What is the INP Metric?#

INP answers the question: How fast does it respond?

Interaction to Next Paint measures the overall response of a page to user interactions by tracking the delay of all events throughout the entire visit.

The recommended value for passing the metric is 200 ms. Values between 200 and 500 ms require improvement, and anything above 500 ms is considered poor.

INP Metric

Google aims to address FID's shortcomings with this change. The innovation lies in INP measuring all interactions (taps, clicks, keystrokes) on a website during the user's browsing session.

It also tracks a slightly longer interval of browser activity, from interaction to the page being repainted.

INP Metric vs FID

A direct comparison between INP and its predecessor FID helps illustrate this:

First Input Delay	Interaction to Next Paint
first interaction	all interactions on the page
time from interaction to processing	time from interaction to page repaint
limit 100 ms	limit 200 ms

If you often find yourself interacting with a website that doesn't respond or responds late, there might be an issue with the INP metric.

The main culprit for high INP values is usually JavaScript and ongoing long tasks (measured by the JS Long Tasks (JSLT) metric), which prevent the browser from rendering the new screen state (a "frame"). Slow data loading after an AJAX request could be another offender. We'll delve into optimizing these issues further in the article.

Watch zuzka's talk on the INP metric from FrontKon 2023:

How is the INP Metric Calculated?#

Now, let's dive into some intriguing details about calculating the metric. INP is measured based on all interactions made on the page. The interaction with the worst recorded measurement is then counted as the metric value. Scrolling and hovering do not count as interactions, but responses to clicking or typing do.

In the case of a large number of interactions, it's calculated differently; for every 50 interactions on the page, one highest value is ignored. Google attempts to refine the metric by removing the influence of random hiccups in web applications with frequent clicking, such as various gaming interfaces.

Measuring INP#

As explained above, the source of values for the INP metric is the Chrome UX Report (CrUX). It contains data for the entire domain as well as individual URLs. For convenience, use one of the available tools that can work with CrUX data and display it. Examples include our PageSpeed.ONE tester or Google's PageSpeed Insights.

PageSpeed Insights displays the current Core Web Vitals metrics for both mobile and desktop. You can also look at data for a specific URL and the entire domain. The middle row is of the most interest since it's the INP metric value.

Measuring INP

Long-term developments and regular changes on a website, however, require a different approach, which our PageSpeed.ONE tester offers. You can monitor metric values over the long term.

INP Metric in our tester

Another handy tool for monitoring Core Web Vitals is Google Search Console, where you can find reported URLs with "broken" metrics. This makes identifying potentially problematic URLs relatively straightforward.

Google Search Console

If limiting yourself to Google Chrome users is too restrictive, you can always use RUM (Real User Monitoring) or write your own data collection using JavaScript and the Performance Observer API.

Another option is synthetic measurements, which can be done using tools like PageSpeed.ONE, Google Lighthouse, WebPageTest, and the like. However, you will only get values of similar metrics (like JS Long Tasks), not INP itself, because it can only be obtained from users.

We discuss the differences between measurements on a dedicated page: synth vs. CrUX vs. RUM.

I Have an INP Problem, What Now?#

You've gone through the CrUX report data from users, checked Google Search Console, and see reported groups of URLs? Now it's time to find the problem. Move on to testing tools or test in the browser (as we do) and pinpoint specific problematic areas.

For a quick look at interactions, you can use the INP Debugger. It's not a perfect tool but can help find "long" interactions.

Debugbear Tool

INP Debugger won't measure interactions embedded in hidden elements, and we recommend running multiple tests to understand how the page behaves. The result is a list of interactions sorted by the measured INP time.

A great aid in this work is the Chrome Core Web Vitals extension, which, among other things, can list all metrics in the console. Open DevTools, set CPU to 6x slowdown and Network to Fast 3G in the Performance tab to slow down device performance.

Chrome Core Web Vitals extension

In the last step, go to the Console tab and enable the Core Web Vitals extension. You can now start testing individual pages. Try testing all possible scenarios and interactive elements; the INP metric value will be printed in the console.

Chrome Core Web Vitals - console output

You can then analyze specific interactions in detail using Timeline recording in the Performance tab. If you record a specific interaction, you'll see exactly when it occurred in the "Interactions" tab.

Performance tab - timeline

The "Main" tab represents running scripts and methods that answer the question, "What's happening here?"

Common Mistakes and Optimization Opportunities#

Interaction to Next Paint is primarily a JavaScript metric, but many things can be solved by adjusting the UI. We have a separate article on optimizing the INP metric, but here are a few basic tips.

Don't Leave Users Waiting for a Response#

After a user interaction, there should be a change in rendering on the user's screen as soon as possible. If an AJAX/Fetch request occurs, the user often doesn't know they're waiting for something. A visual response is needed as soon as possible. Therefore, respond by changing the layout and rendering a loading indicator.

Don't leave users waiting for a response

Avoid Running JS Code Immediately After a Click#

Delay events like various measurements and sending measurement codes until after the interface responds. Long tasks, such as those triggered in GTM on button clicks, delay the interface's response and worsen the INP metric.

Avoid running JS code immediately after a click

Eliminate Long Tasks in JavaScript#

JavaScript code can create Long Tasks. These tasks need to be broken into smaller tasks performed sequentially, without blocking the response. The simplest way to break Long Tasks is to wrap the code in a setTimeout function.

document.addEventListener('DOMContentLoaded', function () {
	setTimeout(() => {
		// Your function calls here
	}, 0);
});

There are many interesting ways to optimize INP; consider also:

• Optimizing Fetch/Ajax response time.
• Minimizing the DOM, using "lazy load for DOM" content-visibility.
• In the future, scheduler.yield() and Long Animation Frames API will be interesting alternatives to setTimeout().

Key Takeaways on INP#

• Interaction to Next Paint (INP) measures the overall response of a page to user interactions by tracking the delay of all events throughout the user's visit to the site.
• Recommended values for INP are up to 200 ms; 200 to 500 ms require adjustments, and above 500 ms is unsatisfactory.
• Google plans for INP to become part of Core Web Vitals in March 2024, replacing the FID metric.
• When optimizing INP, focus on eliminating long tasks in JavaScript, don't leave users waiting for a response, and delay JS code that doesn't need to run immediately.

The INP metric is part of our unified speed metric - PageSpeed.ONE Score (SPS).

See also INP metric optimization.