Poor INP results in a negative user experience, potentially increasing bounce rates and reducing revenue. For sites relying on programmatic advertising, this also leads to lower ad viewability and fill rates, decreasing ad earnings.

First Input Delay (FID), up until now served as the Core Web Vital metric for measuring responsiveness. However, due to acknowledged limitations in FID, Google has actively sought solutions. This pursuit led to the introduction of an experimental metric designed to address its limitations more effectively.

Back in 2022, Google rolled out Interaction to Next Paint (INP) as a new metric, making it available in their tools for some real-world testing.

After a year of conducting tests with INP, Google has officially given it the green light. Starting March 12th 2024, they are endorsing INP as the new Core Web Vital metric for responsiveness, replacing FID.

This post will delve deeper into what is INP, the methods for measuring it, and provide resources for enhancing it.

(Image source: web.dev)

What is Interaction to Next Paint (INP) in Core Web Vitals?

Effective responsiveness means a page promptly reacts to user interactions, providing visual feedback in the subsequent frame. This feedback is crucial for user experience, such as confirming an added item to a cart or authenticating login form details.

While certain interactions naturally take more time until full responsiveness, especially complex ones such as in gaming and websites with many interactive elements, it's crucial to swiftly offer initial visual feedback to indicate ongoing activity. The time until the next paint is the earliest opportunity for this.

INP doesn't aim to measure the effects of all events of an interaction ( like network fetches or UI updates from other operations). Instead, it focuses on input delays across interactions. Delaying visual feedback may give users the impression that the page isn't responding. After all, a page might be rendered, but it does not mean that it’s loaded. 

Google explains that the goal of INP is to minimize the time a user initiates an interaction to the next painted frame for all or most user actions.

Therefore, Interaction to Next Paint (INP) holistically evaluates a page's responsiveness by tracking the latency of clicks, taps, and keyboard interactions throughout a user's page visit. The final INP value considers the longest interaction, disregarding outliers.

“INP gives a better indication of the performance of the website. How smooth it is to use the website. Given that the advertising stacks are quite heavy on the browser it becomes even more important to optimize and have it as lightweight as possible in regards to blocking JavaScript" Nils Lind, CEO/Founder of Assertive Yield

How is INP different from FID?

FID measures only the first user interaction on unresponsive pages, while INP provides a broader measure of site responsiveness throughout the user's entire visit. INP is more comprehensive but harder to optimize, especially for mobile, as it requires maintaining responsiveness during all interactions, many of which involve JavaScript. Conversely, FID focuses solely on the delay before the first event is handled.

How does Interaction to Next Paint (INP) Work?

As publishers and website owners get ready for the INP era, it's crucial to know how to measure it accurately. INP is measured by watching all the interactions on a page.

For most sites, the interaction with the worst latency is what gets reported as INP. However, pages with lots of interactions can sometimes have random INP issues, causing an unusually high delay on an otherwise responsive site. 

The more interactions, the more likely this is to happen. To tackle this, Google ignores one highest interaction for every 50 interactions, giving a better measure of actual responsiveness for those kinds of pages. Most page experiences don't have over 50 interactions, so they report the worst interaction while removing outliers to provide a value that the majority of users experience

An interaction is a group of event handlers that happen during the same logical user gesture. For example, "tap" interactions on a touchscreen device involve multiple events, like pointer up, pointer down, and click. An interaction can be driven by JavaScript, CSS, built-in browser controls (like form elements), or a mix of these.

An interaction's latency is the longest duration of a group of event handlers driving the interaction, from when the user starts the interaction to when the next frame is shown with visual feedback. Learn more about what an interaction is and the types observed in terms of INP.

There is a lag before the event handlers start operating, which might be due to prolonged activities on the main thread. Once the event handlers of the interaction are activated, there's another pause before the subsequent frame is displayed.

(Google’s explanation of an interaction. Source: web.dev)

What is a reasonable INP score?

Figuring out if an INP score is "good" or "poor" isn't so straightforward. It's about finding a balance between encouraging good practices that prioritize good responsiveness and recognizing that devices' capabilities vary.

To make sure your user experiences are responsive, look at the 75th percentile of recorded page loads on mobile and desktop:

• If your INP is 200 milliseconds or less, that's excellent.
• If it's above 200 milliseconds but below 500 milliseconds, there's room for improvement.
• Anything above 500 milliseconds means your page is not very responsive.

In simple terms, below 200 milliseconds is good, above 500 milliseconds is not good, and anything in between needs a bit of improvement.

(Image source: web.dev)

How is Interaction to Next Paint measured?

Measuring INP can happen both in real-world scenarios and controlled lab environments using various tools (AKA: Synthetic Monitoring). According to Google, the most effective way to gauge your website's INP is by collecting data from actual users in real-world situations.

Real User Monitoring or “field monitoring”

Ideally, your journey to improve INP begins with real user data. Real User Monitoring (RUM) field data provides not just the INP value but also valuable context. It reveals which specific interaction influenced the INP value, whether it happened during or after page load, the type of interaction (click, keypress, or tap), and other insightful details.

If your website qualifies for inclusion in the Chrome User Experience Report (CrUX), you can swiftly access field data for INP via CrUX in PageSpeed Insights (and other Core Web Vitals). At the very least, you can get an overview of your website's INP at the origin level.  In some cases, you may even obtain page-level data.

Other free tools to measure INP include Google Lighthouse and Core Web Vitals Visualizer. However, while these tools identify issues broadly, they might lack the detailed information to fully comprehend the problem. A RUM solution lets you delve deeper into specifics, pinpointing slow interactions at the level of pages, users, or user interactions, eliminating guesswork.

There are also other specific solutions for websites and publishers dealing with various third-party integrations, such as for programmatic advertising. Platforms such as Assertive Yield help to assess Core Web Vital Metrics and INP in the context of identification and optimization. 

It comes with a holistic monitoring alert dashboard to give notice of changes on INP, its wrapper, and layouts being very efficient in lowering the impact of these changes on the INP as well as fostering ad revenue monetization, and user experience. 

Synthetic Monitoring or “Lab”

Ideally, testing in a “controlled lab environment” comes after obtaining field data that hints at sluggish interactions. Without field data, you can use strategies to replicate slow interactions in the lab. 

These strategies involve following typical user paths, testing interactions throughout, and engaging with the page during load—when the main thread is busiest—to uncover slow interactions crucial for the user experience.

10 strategies for optimizing Interaction to Next Paint (INP)

With INP becoming the new standard, optimizing for this metric is imperative for publishers aiming to enhance user experience. Here are some strategies to consider:

• Figure out what's causing poor INP
• Find slow interactions in the field
• Enable asynchronous code execution
• Review and optimize third-party scripts
• Avoid unnecessary renders
• Optimize layouts with lazy loading
• Diagnose slow interactions in the lab
• Optimize interactions
• Identify and reduce input delay
• Optimize event callbacks
• Avoid layout thrashing
• Minimize presentation delay
• Minimize Document Object Model (DOM) size
• Be aware of heavy JavaScript processing and break up main thread tasks to optimize rendering and loading.

Moving Forward 

A new benchmark for responsiveness has been set, and we're eager to witness digital advertising embrace this challenge to elevate the user experience.

The key to refining INP is perseverance. With time, publishers can steer their page's responsiveness to a point where users are delighted with the experience provided to them.

It's also probable that as you craft new features for your users, you might find yourself navigating a similar path to optimize interactions tailored to them. Although it demands time and effort, consider it an investment well spent.

Download the Next-Gen monetization Playbook to uncover other core web vitals and how to optimize them for maximum revenue generation today!