Unless you’ve been living under a rock, chances are you’ll have heard about (or read about) Interaction to Next Paint (INP). From March 2024, INP will become one of the new Core Web Vitals metrics that impact Google rankings, replacing First Input Delay (FID). But what exactly is INP, how does it compare to FID, and how can you get your site ready for this new metric?
Spoiler: we can help ...
What is Interaction to Next Paint?
INP is a web performance metric that measures the responsiveness of a website to human input. Specifically, it measures how much time elapses between a user interaction (such as clicking a button) and the next time the user sees a visual update on the page.
Google’s definition of INP is:
“Interaction to Next Paint (INP) is a pending Core Web Vital metric that will replace First Input Delay (FID) in March 2024. 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.”
It’s important to note that INP doesn’t measure the response time of the entire interaction, but the response time until your site provides visual feedback to the user, such as a loading icon, for example. Rather than complete the interaction, you just have to prove that the interaction is in process.
How is Interaction to Next Paint measured?
When measuring INP, Google observes the following interactions:
A mouse click
The tap of a touchscreen
Pressing a key on a keyboard
There are three components that will allow Google to provide an INP score:
Input Delay — the time between a user clicking a button and getting a visual update on the page from that button click.
Processing Time — the length of time it takes to run code in response to an interaction.
Presentation Delay — the time your browser spends recalculating the page layout and painting new content where it should appear.
Here’s a diagram from Google showing how an interaction works.
How does INP compare to FID?
First Input Delay (FID) is also a measure of your site’s responsiveness but it only measures the time it takes for a web page to respond to the first user interaction, while INP measures the time it takes for a web page to visually update after any user interaction — meaning it’s considered a more comprehensive measure of responsiveness.
INP is also considered to be a more reliable metric, as FID can be affected by external factors such as the user’s device or network connection, while INP is less affected by these factors.
What’s a good Interaction to Next Paint score?
A good INP is less than 200 milliseconds, while an INP over 500 milliseconds is poor.
So, now for the meaty bit. While it might be tempting to postpone even thinking about INP until next year, I’d advise against it. In fact, Google has already started flagging INP issues in Search Console for websites that don’t meet the threshold for good responsiveness.
How to optimize Interaction to Next Paint
Given that INP will impact Google rankings, optimizing your INP score (read: keeping it as low as possible) will become a core part of your SEO strategy. So, what steps can you take to improve it to ensure you’re delivering a Google-favored user-friendly experience?
Remember, INP is broken down into three key components: input delay, processing time and presentation delay. So now, let’s take a look at how to optimize each of those.
How to optimize input delay
To reduce the input delay component of INP, you need to reduce the background CPU activity on the main thread.
Remove unused code and use code splitting so that the only code that loads is the code required to run that page (try saying that three times in succession).
Minimize JavaScript files and use a Content Delivery Network (CDN) to deliver JavaScript files from a server that’s local to your audience.
Avoid interaction overlap, which commonly occurs when users are typing into autosuggest-powered form fields. Consider debouncing inputs to reduce callbacks and use AbortController to cancel outgoing fetch requests so that the main thread doesn’t become congested.
How to optimize processing time
To reduce processing time and ensure that the page directly responds to user input, you need to make sure that event callbacks do as little work as possible.
If you can, delete unnecessary event callbacks.
If heavy JavaScript processing is required in response to user input, update the UI before starting the CPU task. You could show a loading icon for example, and then do the work in a setTimeout callback. Or, use a web worker to do CPU-intensive work on a separate thread.
How to optimize presentation delay
The greater the complexity of the page and the more updates that are required in response to user input, the greater the presentation delay.
Keep the Document Object Model (DOM) small and simple. Events are quicker to render when DOM sizes are small so the user will get a visual page update more quickly in response to their input. Reduce DOM size by removing bloated code and plugins, avoid using page builders that generate bloated HTML, break down a one-page website into multiple pages to reduce the number of DOM nodes and avoid using complicated CSS declarations. Therefore, you need to consider how you model your content in your CMS and how that reflects the experience you want to provide.
Reduce your page weight to deliver faster experiences. With Accelerated Media, take advantage of the latest media codecs, reducing image weight by 50% and video weight by 40% — without any perceptual loss of quality. Learn more about our Amplifier and how it reduces presentation delay.
(See, I told you we can help — if only a little.)
Get your website ready for Interaction to Next Paint
INP will replace FID in 2024 as a new Core Web Vitals metric and as Core Web Vitals is a part of Google’s ranking algorithm, it’s crucial to optimize INP to maximize your user experience and search visibility. And if I were you, I’d start now.