Imagine yourself in your favorite coffee shop, ordering a strong espresso to wake you up. You press the button on the machine, and then, surprise, nothing happens... You press again and again, but nothing. It's frustrating, isn't it? This is exactly what users feel when interacting with a slow or non-responsive website. This is where a new Core Web Vitals indicator comes in, the INP, or Interaction to Next Paint. From March 12, 2024, this metric promises to be a game changer by replacing First Input Delay (FID). But what exactly is INP, and why is it so crucial to your online experience? Sit back, order a coffee (hopefully the machine works this time), and let's find out together what the INP can do for us.
What is the INP? The interaction with Next Paint is explained simply.
Definition and importance of interaction in Next Paint
Imagine you're at a rock concert, excited to see your favorite band.
The tension rises, the lights go out, and... nothing. The silence.
Then, suddenly, after what seems like an eternity, the first note sounds, and the show finally begins.
This endless wait before the first note is a bit like what the FID measures in the world of the web.
But with the INP, we are not just interested in the first note. No, the INP wants to ensure that the entire concert goes off without a hitch, from start to finish.
INP, or Interaction to Next Paint, measures the responsiveness of a website by measuring the time between a user interaction (such as a click or key press) and when the browser can display the result of this interaction.
If the INP is low, it means the site is like a rock band in top form, reacting instantly to the demands of its audience.
A revolution, you say? Absolutely !
The technical functioning of the INP
To fully understand INP, imagine that you are a conductor.
Each musician (or user interaction) plays a note (or sends a request), and you need to ensure that the orchestra (the website) responds in harmony without delay.
INP measures the time it takes for the orchestra to play the next note after a request, using the Event Timing API to analyze all interactions during the life of the site.
Examples of interactions and their impact on INP
To make things even clearer, let's take some concrete examples.
You add an item to your online shopping cart, and boom, it's immediate, like a good electric guitar riff.
Or you open a mobile navigation menu, and there it's fast and smooth, like a legendary drummer's solo.
The INP ensures that these magical moments are not spoiled by endless waiting, keeping the user experience at the top, like an unforgettable concert.
How do I understand and interpret INP scores?
How do I correctly interpret the INP values?
Let’s return to our concert analogy.
Let's say you rate each song played on stage by how long you wait before it starts.
If every song started within seconds of your request (or interaction), you'd be in heaven, right?
This is the principle of INP.
- A score of 200 milliseconds or less is like a band starting every song without making you wait—it's web responsiveness nirvana.
- Between 200 and 500 milliseconds is acceptable, but we feel that the group could be in a little better shape.
- Beyond 500 milliseconds, it's like waiting for the singer to finally find the microphone before starting—clearly, there's work to be done.
Calculation of the INP and its components
But how, you ask, do we measure this famous INP score?
Imagine you have an ultra-precise stopwatch.
Every time someone in the audience (the user) makes a request (an interaction), you start the timer and only stop it when the scene (the website) reacts.
The time recorded on the stopwatch at the end of the concert (or navigation session) will be the INP, ignoring the few times the guitarist (an outlier event) missed his entry.
This is how the new INP criterion, introduced on March 12, 2024, captures the worst scenario of reactivity encountered by the user while being fair to the site by not taking into account anomalies.
What is an interaction?
Now, let's talk a little about interactions.
An interaction is like a fan asking for a callback.
This could be a click, a key press, or even a tap on the touchscreen.
Each request results in a series of events that the site must handle.
Some interactions are simple, like turning a flashlight on and off.
Others are more complex, like asking your voice assistant to play your favorite playlist, which involves a series of actions before you can dance to your favorite song.
INP is interested in the responsiveness of these interactions, simple or complex, ensuring that the user experience remains fluid and pleasant.
How can we measure and improve INP for a better user experience?
1. Identify slow interactions.
Imagine that you are the manager of a cafe. You notice that customers are starting to show signs of impatience, frequently looking at their watches or sighing while waiting for their order.
Your mission is to find the cause of this delay and remedy it.
Online, that's exactly what you're doing when you identify slow interactions on your site.
Using tools like PageSpeed Insights, Lighthouse, or Chrome DevTools, you can determine which interactions are taking too long to respond and start to investigate why.
It's a bit like observing your baristas to see if they are overwhelmed or if the coffee machine needs repair.
By identifying specific friction points that slow down interactions, you can take targeted actions to improve the overall experience for your visitors.
2. What strategies should be favored to optimize the INP?
Once you've identified slow interactions, it's time to take action.
Optimizing the INP is a bit like orchestrating a grand fireworks finale: every detail counts to make the show memorable.
Here are some strategies to ensure your site responds quickly and effectively to user interactions:
- Optimize JavaScript: This may involve delaying the loading of non-essential scripts or making them asynchronous to avoid blocking page rendering. It's like asking your musicians not to play all at once so as not to overwhelm the audience.
- Reduce lengthy tasks: If certain tasks require more time, consider breaking them into smaller chunks that can be handled between interactions. It's like preparing the ingredients for a complex dish in advance, so it cooks quickly and smoothly when you order.
- Use code slicing: By loading only the resources needed for the current display, you can reduce the time it takes for the page to become interactive. It's like creating a playlist for your party, choosing only the songs that will get everyone dancing with no downtime.
3: A concrete example of improving the INP with a business impact
Let's take the example of an e-commerce site where customers were complaining about slowness when adding items to the cart.
Upon analyzing the issue, the site team discovered that the script managing the shopping cart was loaded from the start, blocking further interactions.
By making this script asynchronous and optimizing server-side data processing, they managed to reduce the INP from 300 milliseconds to just 100 milliseconds.
Result: ? happier customers and increased sales.
It's as if, after adjusting the sound and lighting, your concert turns into an unforgettable experience for the audience.
The final word
As you will have understood, optimizing the INP is a bit like conducting an orchestra: each instrument must be in tune, and each musician must know their score inside out.
By identifying weak points and applying the right strategies, you can transform a mediocre performance into a memorable symphony that will delight your visitors (and have business impacts that can be significant).
Let's not forget that, behind each click and each scroll, there is a person seeking to achieve a goal, live an experience, or simply be surprised by what your site has to offer.
By focusing on INP, you're not just optimizing a website; you create a space where every interaction counts, where every moment spent on your site is a note in a memorable melody.