Neil Patel

I hope you enjoy reading this blog post. If you want my team to just do your marketing for you, click here.

How to Get Ready for Interaction to Next Paint (INP)

A graphic saying "Get Ready For Interaction To Next Paint (INP)

Google’s Core Web Vitals is changing. This set of metrics, first introduced in 2021 to measure user experience, is getting arguably the biggest update since its launch.

Specifically, Google is replacing First Input Delay (FID) with Interaction to Next Paint (INP) in March 2024.

So what is Interaction to Next Paint, how does it compare to FID, and how can you improve it? In this post, I’ll reveal all.

If you’re ready to improve your site’s user experience, let’s get started.

What Is Interaction to Next Paint (INP)?

Googling “INP meaning?” You’re probably not alone. Let’s start by defining exactly what this new metric is and how it works.

Interaction to Next Paint (INP) is a responsiveness metric from Google that measures how fast your page responds to human input. Specifically, it measures the amount of time that elapses between a user’s input (them clicking a button, for instance) and when the page’s content refreshes.

Or, if you’re looking for Google’s definition:

“INP assesses responsiveness using data from the Event Timing API. When an interaction causes a page to become unresponsive, that is a poor user experience. INP observes the latency of all interactions a user has made with the page, and reports a single value which all (or nearly all) interactions were below. A low INP means the page was consistently able to respond quickly to all—or the vast majority—of user interactions.”

Here’s a video from Google showing what good and bad responsiveness looks like:

Good vs Bad responsiveness Google.

Google understands that some interactions will take longer to load than others, especially complex ones. But that doesn’t have to make for a bad user experience. INP, therefore, isn’t measuring the response time of the entire interaction, but the response time until your site provides some form of visual feedback (like a dropdown or a loading badge appearing). You don’t have to complete the interaction completely, you just have to prove that the process is in motion.

It’s important for every website to have a good INP score, but it’s particularly important for interactive websites like social media platforms and e-commerce stores. Poor INP creates a bad user experience that can lead to a higher bounce rate and, ultimately, lost revenue.

Defining Interactions

To understand how INP works and measure it correctly, we need to understand what an “interaction means.”

Google defines an interaction as a group of events that occur during “the same logical user gesture.”

In other words, it’s not just one single event. Tapping a button on a touchscreen device, for example, can include multiple events, including pointerup (when the mouse isn’t active) and pointerdown (when a mouse clicks a button) events, all bundled into one. Google counts the event with the longest duration as the interaction’s latency.

When it comes to measuring INP, Google only observes the following interactions:

  • Click with a mouse
  • Tapping a touchscreen
  • Pressing a key on a keyboard

Here’s another example from Google showing how an “interaction” works.

Google interaction chart.

Google measures three components to provide an INP score: the input delay, the processing time, and the presentation delay.

The input delay is the time between a user clicking a button and getting a visual response from the button. Depending on how much code your website is running this can take between a couple and a hundred milliseconds.

Processing time is the length of time it takes to run code in response to a user’s interaction. This can be milliseconds if only small changes are made.

Presentation delay is the time your browser spends working out where new content should appear. This length of time can vary significantly depending on the complexity of your website.

Comparing FID to INP

In case you missed it in the introduction, Interaction to Next Paint is replacing First Input Delay (FID).

FID is also a measure of your site’s responsiveness, but it only measures the very first user interaction and it only measures the delay until the event is being handled, not until the user sees results.

That’s different to Interaction to Next Paint which measures the delay of every single interaction a user has with a page.

What Is a Good INP Score?

Google offers a fair bit of guidance on what constitutes a good INP score.

Firstly, Google recognizes that it’s hard to define responsiveness as good or poor when there’s such variability in the capabilities of a user’s device. That’s why they recommend taking the 75th percentile of page loads across mobile and desktop devices as a guide.

As for your delay times:

  • If your INP is at or below 200 milliseconds, your page has good responsiveness.
  • If INP is between 200 milliseconds and 500 milliseconds, your page’s responsiveness needs improvement.
  • If INP is above 500 milliseconds then your page has poor responsiveness.
Good vs. bad core web vitals.

Why Is Google Switching to INP?

INP will replace FID as one of Google’s three Core Web Vitals metrics in March 2024. The other two metrics are Largest Contentful Paint (a measure of how quickly the main content of a page appears) and Cumulative Layout Shift (a measure of whether the page layout is stable after loading).

Google says that Chrome usage data shows the vast majority (90 percent) of a user’s time on a page is spent after it loads. That means it’s no good just measuring the delay until the first event on a page (FID); we need to measure the delay for every interaction that is carried out (INP).

In short, FID wasn’t all that good at pinpointing bad user experiences because it stopped measuring delays.

How to Optimize INP

Given the significance of Core Web Vitals for user experience and SEO, it’s important to measure and improve your site’s INP. Here’s how I recommend doing so:

1. Measure your INP

The first step to optimizing INP is to measure your site’s performance. It’s best to do so in the field, using data from real website visitors. Using field data won’t just provide you with a measure of your INP; it will also provide contextual information about which interaction was responsible for the delay.

The Chrome UX Report is one of the quickest and easiest ways to get field data, assuming your site qualifies. If not, you can use a Real User Monitoring (RUM) provider like Pingdom or Raygun to generate field data.

If you don’t have the time or budget to collect field data, then I recommend using the PageSpeed Insights tool. The great thing about PageSpeed Insights is that it uses field data collected by Google and Lab data to measure your INP.

Just enter your URL, hit enter and you’ll be presented with an INP score:

Calculating INP score.

As you can see the INP for my site’s homepage is just above the recommended delay.

If you want a faster way to do this for every page on your site, you can download the Site Speed Chrome Extension by DebugBear, which shows Core Web Vitals for every page you visit.

Site speed by debugbear.

2. Optimize Interactions

As I’ve discussed, each interaction can be broken down into three different stages:

  • The input delay
  • The processing time
  • The presentation delay

Because each stage of an interaction contributes to the delay, you can optimize your INP by reducing the CPU processing required at each stage.

Optimizing Input Delay

There are a couple of strategies you can use to reduce the time it takes to register an input.

Optimizing JavaScript is the first. Slow JavaScript execution can cause input delays, but you can rectify this by minimizing JavaScript files, enabling GZip compression, using a JavaScript framework like jQuery, and using a Content Delivery Network (CDN) to deliver JavaScript files from a server that’s closer to your audience.

Minimizing thread activity is the second. When there is a lot of activity on your page (images, videos, etc,), it can delay input responsiveness. But you can use a web worker to run independently away from the main thread of your site.

Avoiding interaction overlap is another strategy you can use to reduce input delay. Interaction overlap happens when a visitor interacts with one element and then another element before the initial interaction has been rendered. It’s a common occurrence when users are typing into autosuggest-powered form fields.

Fix the problem by debouncing inputs so that callbacks are reduced and using AbortController to cancel outgoing fetch requests.

Optimizing Processing Time

You can optimize the processing time of your interactions by making event callbacks (the processes that run in response to a user input) do as little work as possible. Where possible, delete unnecessary event callbacks completely.

Where callbacks are necessary, break up the work involved into separate tasks and make sure that only essential processes required for visual updates are executed first. The best way to do this is to use setTimeout to run callbacks in a separate task. If you’re not sure how to do this in practice, Google has an in-depth guide to optimizing long tasks.

Optimizing Presentation Delay

Reducing DOM size is an effective way to accelerate presentation speeds. DOM or Document Object Model connects web pages to scripts and programming languages. When DOM sizes are small, events are quick to render. When DOM sizes are large, rendering takes much longer.

You can reduce DOM size in several ways:

  • Remove bloated code and plugins
  • Avoid using page builders
  • Turn a one-page website into multiple pages
  • Avoid complex CSS declarations

You want to aim for a DOM depth of no more than 1400 nodes.

You can also add immediate feedback cues to reduce presentation delay. Here’s an example of a loading cue from Hostinger:

Hostinger.

These cues include:

  • Validation messages, like the kind you might receive when submitting a form
  • Pop-ups, like the kind you get when you add an item to your shopping cart
  • Loading cues, like a progress bar that shows a process is underway (see above)

INP FAQs

How to Optimize for INP?

You can optimize for Interaction to Next Paint (INP) by reducing the input delay, processing time, or presentation delay of the interaction. This can be done by minimizing and optimizing JavaScript files, reducing DOM sizes, and adding immediate feedback cues.

Where to Find INP Metrics?

Because Interaction to Next Paint (INP) will soon be part of Core Web Vitals, you can find relevant metrics using Google’s PageSpeed Insights tool. Just enter your URL and you’ll get a time in milliseconds that’s your INP.

What Is a “Good” INP Score?

A good INP score according to Google is equal to or less than 200 milliseconds. Anything between 200 and 500 milliseconds needs improving and anything higher than 500 milliseconds is considered poor. 

Conclusion

Interaction to Next Paint (INP) is a pending Core Web Vitals metric that will replace First Interaction Delay (FID) in 2024. It is a measure of the time it takes for your site to respond to a user interaction. The lower the delay, the better your performance.

Because Core Web Vitals is a part of Google’s ranking algorithm, I strongly recommend you optimize your INP by reducing CPU processing on your site using the strategies I’ve listed above.

While you’re at it, I also recommend reading up on Core Web Vitals and my other advice for increasing the speed and improving the user experience of your website.

What’s the INP score for your website? Let me know in the comments!

Consulting with Neil Patel

See How My Agency Can Drive More Traffic to Your Website

  • SEO - unlock more SEO traffic. See real results.
  • Content Marketing - our team creates epic content that will get shared, get links, and attract traffic.
  • Paid Media - effective paid strategies with clear ROI.

Book a Call

Ubersuggest

Unlock Thousands of Keywords with Ubersuggest

Ready to Outrank Your Competitors?

  • Find long-tail keywords with High ROI
  • Find 1000s of keywords instantly
  • Turn searches into visits and conversions

Free keyword research tool

Share

Neil Patel

source: https://neilpatel.com/blog/inp/