The news is out: Google’s Core Web Vitals is getting a new metric. It’s called INP (Interaction to Next Paint) and it’s set to replace the existing FID (First Input Delay) metric in a matter of weeks from now. Or, at least, we think so: Google has cited a release sometime in March 2024. 

Integrating the INP metric into Google’s Core Web Vitals represents a shift in how website performance is assessed, focusing on user interaction and responsiveness. Google Search Console has already started collecting INP metric data to help us prepare for the upcoming Core Web Vitals assessment changes.

But what actually is INP? And how can SEOs start preparing for it now? 

In this article, I’ll explain what you need to know about  INP (Interaction to Next Paint), provide some measurement and optimisation tips, and help you stay ahead in the ever-evolving landscape of web performance metrics. 

Google Search Console INP Announcement

Google Search Console’s INP Announcement

What is INP?

INP is a latency measurement metric. To better understand INP, we need to understand latency (also known as lag). 

There are a few definitions of latency but they have the same meaning. Cloudflare defines latency as “the time it takes for a data packet to go from one place to another.” Online gamers refer to it more simply as “lag”. They’re the same thing, albeit in different environments. Latency just measures the time it takes from one action to trigger a response.

How does INP work?

INP focuses on web page interactions, measuring the latency (or lag) it takes from one interaction to another. This includes interactions such as menu clicks, dropdowns, button clicks and text field inputs primarily driven by combinations of JavaScript and CSS elements.

Think of INP like a stopwatch. It starts when you interact with something on a page, like clicking on a menu, selecting an item from a dropdown, pressing a button, or typing into a text field. It then keeps track of the delay (or the annoying lag) that sometimes happens between an input from the user and an output from the system.

After any interaction with a site or device, there is a sequence of events that happens: Input Delay, Processing Time, and Presentation Delay: 

  1. Input Delay: The delay between when you do something (like clicking) and when the CPU starts responding.
  2. Processing Time: How long the CPU takes to understand what you did and prepare the result.
  3. Presentation Delay: The wait from when the CPU finishes processing to when you can see the outcome on the screen.

 So, from the moment you click until you see the response, these three steps make up the whole INP measuring process.

What Types of Interactions Does INP Track?

Devices that use point-and-click, tap-and-touch, and keyboard interactions are all tracked by INP if they use modern web browsers, such as Google Chrome, Mozilla Firefox and Microsoft Edge.

How is INP Measured?

INP is measured in milliseconds. Google observes the time of the most extended interaction and returns a numerical value in milliseconds; for example, an interaction that took 150 milliseconds would read “150ms”. 

Any observed interaction that takes longer than 500ms is considered poor, highlighting an opportunity to improve.

Target INP Values

According to Google’s documentation, a good INP score equals or below 200 ms. INP values between 201ms and 500ms will be labelled as needing improvement, and anything above 500ms will be labelled poor.

Aiming to get as close to 0ms as possible should be the goal for optimal results. But as we know from experience, that is only sometimes possible. 

I recommend factoring in an overhead of around 50ms for your target INP score. For example, if you want to fall below 200ms, you should aim for a score 50ms below that, i.e. 150ms. This leaves room to expand interactive functionality later down the line.

What’s the Difference Between INP and FID?

On the face of it, INP and FID are quite similar. After all, they’re both time-tracking metrics observing interactions, and both are tracked in milliseconds. Based on that, it makes a lot of sense that INP is replacing FID.

However, there is one key difference between INP and FID: they measure opposite ends of the interaction.

FID (First Input Delay) measures the time (delay) it takes for the web browser to interact with a web page.  Meanwhile, INP (Interaction to Next Paint) measures the time for the most prolonged interaction. 

Why is INP Important?

When INP replaces FID in March 2024, it’s set to become one of the core metrics of the Core Web Vitals assessment. According to the recently published Ranking Factors SEMRUSH study, the FID metric is currently the top UX-based ranking factor. 

With INP set to replace FID, I expect that INP will hold a similar stronghold as one of the user experience ranking factors.

Is User Experience Important in SEO?

In short, yes — and it’s becoming more important over time.

When a site responds quickly to clicks, taps, and keystrokes, visitors are more likely to stay engaged, browse for longer, and return to the site again, especially for visitors on mobile devices. Search engines like Google want to show users more of these types of pages because it reflects well on them. INP directly ties into this by measuring the responsiveness of a web page to user interactions.

As INP prepares to step into the role of First Input Delay (FID) as a ranking factor, I expect INP to significantly influence SEO strategies in 2024. The full extent of this influence remains to be seen, as it’s still in its early days.

How to Measure INP

I can think of a few handy tools for identifying and measuring Interaction to Next Paint (INP) opportunities. 

Google’s PageSpeed Insights: When you run a website through PageSpeed Insights, the CrUX report taps into real-world user data, analysing and identifying INP opportunities. The CrUX report is based on actual user interactions.

Chrome DevTools: DevTools is a really useful tool not just for INP but for a whole host of measurement metrics. Here’s how to can record INP with DevTools:

  1. Navigate to the “Performance” tab within DevTools.
  2. Start recording the performance by clicking the “Record” button
  3. Interact with the page as a user would, such as clicking buttons, entering text, or performing other actions that trigger updates to the page.
  4. Stop the recording after your interactions.
  5. Review the recorded interactions in the Performance panel. When hovering over an interaction, you can see the INP component breakdown and timings. The INP metric will be visible alongside the INP values of Input Delay, Processing Time, and Presentation Delay.

 

DebugBear: This is a free INP Debugger that appears to simulate a real visitor interacting with a webpage. I have only used the INP Debugger tool a handful of times and noticed that it highlighted the cookie acceptance popups, something I couldn’t replicate in Chrome Canary. That said, this free tool will only improve over time and is a tool that I recommend.

Optimising for INP

Now we get to the heart of the matter: how can SEOs actually optimise for INP? Well, I believe there are two key steps you can take right now to help you get prepared for INP’s launch in March:

Reducing CPU Load: Minimise CPU-heavy tasks by breaking them down and using asynchronous methods. This helps to prevent delays in user interactions. For example, use lazy loading instead of simultaneously loading all images on a webpage. Lazy loading loads images asynchronously as needed, reducing the initial load on the CPU and improving interaction responsiveness.

Profiling with DevTools: Use Chrome DevTools to identify slow areas on your site. For example, you can record user interactions using the Performance tab in DevTools and see which scripts take the longest to execute. You can spot a JavaScript function that’s taking too long to run and causing delays. By focusing on optimising this function, you can improve the overall INP.

Optimisation Tips for Each Stage of INP

  • Input Delay: Simplify by managing extra scripts and tasks running in the background. It helps your site respond faster when users click or type.
  • Processing: Speed up your site by avoiding complex layout changes and using simpler code. This makes processing user actions faster.
  • Presentation Delay: Improve how fast your site shows changes by optimising CSS and handling multiple user actions efficiently, leading to faster updates on the screen.

Implementing these strategies can improve your site’s overall INP, leading to a smoother and more user-friendly experience.

Wrapping Up

In the ever-evolving world of SEO, Interaction to Next Paint (INP) has emerged as a significant metric, albeit a relatively new one. It’s been on the SEO community’s radar for just under a year, and its importance has steadily grown in that short span. My experience reflects this trend; I’ve written only a few INP-focused tickets for clients, but each one has helped me understand and improve this metric.

As the weeks and months pass, the conversations around INP will only grow louder. Could the quality of the user experience as a ranking signal increase, subtly shifting the focus of SEO strategies to include more emphasis on this aspect? Looking ahead, integrating INP into Core Web Vitals will likely inspire new best practices and innovative approaches to web design and performance optimisation

I’ll be keeping my ear to the ground with any further developments in INP over the coming months, so stay on the lookout for updates to this article. If you know of any great INP tools I haven’t mentioned, feel free to reach out to me on LinkedIn.

Chris Lever