I always was a huge fan of performance metrics that you could utilize to validate whether your website is performant or not. When I first heard about the tool Lighthouse I thought: We now have a unified number that easily shows website performance. But it is actually true?

Then I realised that there are many scenarios where such single number will not give us desired information and the result. Let's take two web apps for comparison:

1. Static Blog
2. Server rendered e-commerce

Can we compare both websites with the same metric? If a blog has a score of 90 and the e-commerce has 70, does it mean that this e-shop has a poor performance? It would be better to get information from the real users using your website and analyze for them if their experience is good or not.

And for that, you could use Core Web Vitals and specifically the INP that I decided to talk about today.

Source: https://web.dev/articles/inp

If you would like to check your website INP score, check out the following tool:

https://www.debugbear.com/inp-debugger

What is Interaction to Next Paint metric?

The INP metric assesses the time from user interaction with the website to a noticeable change in its appearance. A low INP score indicates that interactions are quick and the latency (e.g. from clicking a button to noticing a change in appearance) is low and should not negatively impact users' experience of the site. The quality of such a website, as long as it also meets other Google criteria (LCP & CLS), will be assessed as good.

🚨 A high INP score indicates a problem that needs to be investigated and fixed to reduce user churn and improve Google search results

INP is the time corresponding to the highest interaction delay. This means that if the user has made 3 interactions and their latency is 100, 250 and 500 ms, the INP indicator will show 500 ms.

Source: https://web.dev/articles/inp

Good INP values are 200 ms or less. Poor values are greater than 500 ms.

🚨 Google rates the 75th percentile of all visits. So, if three out of four users have satisfactory INP scores, the fourth user's scores will not lower the site's overall rating.

What is an interaction?

The primary driver of interactivity is often JavaScript, though browsers do provide interactivity through controls not powered by JavaScript, such as checkboxes, radio buttons, and controls powered by CSS.

Source: https://web.dev/articles/inp

An input delay lasts until event handlers start running, possibly caused by factors like long tasks on the main thread. The interaction's event handlers then run, and another delay happens before the next frame is presented

To calculate INP, only following interactions are counted:

• Mouse clicks
• Using a touchscreen
• Pressing a key on either a physical or onscreen keyboard.

🚨 Hovering and scrolling does not factor into INP

If you would like to improve your INP score, check out the following link with a great checklist:

https://web.dev/articles/optimize-inp

📖 Learn more

If you would like to learn more about Vue, Nuxt, JavaScript or other useful technologies, checkout VueSchool by clicking this link or by clicking the image below:

It covers most important concepts while building modern Vue or Nuxt applications that can help you in your daily work or side projects 😉

✅ Summary

Well done! You have just learned about the INP metric and you can now use it to check if your website is performant (and also how you can improve it :) ).

Take care and see you next time!

And happy coding as always 🖥️