Google introduces Interaction to Next Paint as a new Core Web Vital

Date
4 March 2024

From March 12, we welcome a significant update in the world of web performance with the introduction of Interaction to Next Paint (INP) as part of the Core Web Vitals. But don't worry, you don’t have to be a web developer to understand: we’ll explain the importance of this update in plain language.

header

Core Web Vitals recap

Let's start by refreshing what Core Web Vitals are: It is a set of metrics that Google uses to objectively determine the usability and speed of a website.  
Think of:  

  • How fast does the webpage load?  

  • How stable is the content as you navigate through the page?  

  • How quickly can you do something on the page after it has loaded?

Google uses a whole range of checks for this, and the weighted sum of these ultimately determines the Core Web Vitals score of your website. 
 

Largest contentful paint: how fast does the page load?

Largest contentful paint (LCP) simply measures how long it takes for the largest piece of content on a webpage to fully load and be visible to you. This could be an image, a video, or a large piece of text. The idea is that the faster this large content appears, the better your experience on that page is likely to be. It's like waiting for an important part of a painting to be revealed; the quicker it happes, the happier you are and the more engaged with the viewing experience and the painting.

Blog_GoogleNextPaint

Cumulative layout shift: how stable is the content?

Cumulative layout shift or CLS reveals how stable a webpage is while it loads or as you scroll through it. Imagine reading an article and suddenly the text jumps up or down because an image or advertisement is loading. That's annoying, right? CLS measures how often and how severely these unexpected jumps happen. A low score means the page is steady allowing you to read or browse uninterrupted and with ease.

First input delay: how responsive is your page?

First input delay or FID measures how long it takes for a website to respond to something you do, like clicking on a link or a button. Imagine pressing an elevator button: FID measures how long it takes for the elevator to realize you've pressed it and take action. A quick response leads to a smoother and nicer experience, as if the elevator responds instantly to your request.

What is Interaction to Next Paint (INP)?

Interaction to Next Paint tries to give the best possible indication of how responsive a website feels. It measures how long it takes between the moment the user interacts with the page (for example, by clicking or scrolling) and the moment the next visual change occurs on the page. The response to each interaction is measured, thus determining how snappy the website feels.

Why is INP Important?

Imagine you're on a recipe website and you click the button to reveal an ingredients list. With a good INP-score, that list would appear almost instantly. But with a poor INP-score, there will be a noticeable delay before anything happens. For users, this is the difference between a website they experience as responsive and user-friendly and one that aggravates and causes frustration, thus lowering their engagement with your site. 

What is the difference with the First Input Delay (FID) control?

The feeling of a snappy website has been an important criterion for Google since the introduction of the Core Web Vitals. Until now, this was measured First Input Delay (FID), but this system had its limitations. The main difference between FID and INP is:   

  • FID only measures the first interaction and the delay between that interaction and the page's response. 

  • INP takes into account all interactions on the page and evaluates the entire cycle of interactions and the time until the next visual change on the page. 

 A website can respond quickly (good FID), but if the full interaction is slow (bad INP), the user still experiences a delay and not a snappy website. To revisit the example with the elevator button: where the FID determined how quickly you can press the elevator button, the INP determines how quickly you can see that you pressed it. INP therefore offers a more accurate measurement of the user experience
With the introduction of the INP metric, the old FID metric will also be phased out.

Blog_GoogleNextPaint

What does INP mean for your webperformance?

The expectations of your website visitors are constantly increasing. Continuing to focus on a user-friendly website is essential to avoid frustrations and achieve conversions. 

Additionally, Google uses the Core Web Vitals score as one of the criteria to determine the ranking of their organic search results. Since the INP-score will be included in the calculation of this score, the INP-score of your website will also become one of the determining factors affecting the ranking of your website compared to that of your competitors from March 12. 

What is a good Core Web Vitals score?

A good Core Web Vitals score depends on various factors: A general rule of thumb is to aim for the 75th percentile: always try to be among the top 25% performers, across the different metrics. 

Specifically, at the moment: 

  • Largest Contentful Paint (LCP), usually under 2.5 seconds. This means that the most important content of the page should be visible to the user within 2.5 seconds of loading. The faster the LCP, the better the score. 

  • Interaction to Next Paint (INP), under 200 milliseconds. This means that the website should quickly respond to user interactions. A lower INP value means a better user experience. 

  • Cumulative Layout Shift (CLS), usually 0.1 or lower. This means that the elements on the page should shift minimally during loading. A low CLS value provides a stable and predictable user experience. 

Evolutionary process

It is important to note that these guidelines are based on Google's current recommendations. Striving for a good Core Web Vitals score is an ongoing process, as user and search engine standards and expectations evolve. 

Furthermore, websites today are often dynamic platforms with changing elements such as texts, images, marketing scripts, and possibly even partly personalized content. Since all these elements are determinants of the user experience, these dynamic elements will also impact the Core Web Vitals score of your platform. 

It is advisable to regularly monitor the performance of your website and make optimizations if necessary to ensure a good user experience. Our experts at iO are happy to assist you in this regard. 

To measure your own scores: 

seadmemic

Sead Memic

Lead Frontend Developer

With 15 years of experience in web development, Sead holds the position of Lead Front-end Developer at iO. His expertise centers around performance, user experience, and accessibility, ensuring that organisations meet and surpass their digital aspirations. Through his focused approach, he continues to drive forward the importance of seamless user interfaces and robust web performance in today's digital landscape.

Related articles