It was in 2021 when Google announced that Core web vital is one of the most important factors in ranking websites. Following that, the importance of technical SEO in SEO education became more prominent than ever. The whole purpose of Core Web was one thing: to improve the user experience.
Google announced that starting on March 12, 2024 (22 March 1402), it is going to give up the famous triple combination of Core Web Vital, i.e. (FID, LCP, and CLS) and replace FID with a new standard called INP.
In this article, we want to know what is INP? and how it works. How to optimize the website based on it? And why was it necessary for Google to remove FID forever and replace it with INP?
Table of Contents
What is INP (Interaction to next paint)?
INP or “Interaction to Next Paint” is a metric that focuses on user interaction with the website. A website should display a response for each user interaction such as clicking a button or link. INP means the time it takes for the response of the user’s interaction with the website to be displayed on the screen.
It must have happened to you that you clicked on a certain button on a website, but nothing special happened. Suppose you want to add a product to your shopping cart on a store website. But when you press the “add to cart” button, nothing happens and you don’t know if the product is actually in your cart or not. This doubt makes you click the button several times hoping to see a change on the page that shows that the product is in your shopping cart. This is not a pleasant thing for the user experience at all. The INP criterion has not been addressed at all in such a website, and since INP has become one of the Core web vital criteria, this issue is equal to the decrease in the website’s ranking.
How is INP calculated?
The unit of measurement of INP is milliseconds. You might imagine that Google measures and reviews each user interaction one by one. But it is not. During the time that a user visits a website and its different pages, a user may have several different interactions with that website. In this case, Google calculates INP based on the longest interaction time of the page, instead of taking into account the individual times between interaction and page reaction.
According to what Google announced, an INP value of less than 200 milliseconds is considered good, between 200 and 500 milliseconds requires correction, and over 500 milliseconds is considered bad.
The effect of INP on core Web vital
Before we talk about the impact of INP on Core Web Vital, it is better to have a quick overview of Core Web Vital and the factors affecting it.
Core Web Vitals is a set of factors that Google considers important in the user experience of a page. In other words, these criteria are used to measure the quality of the user experience on the website. Before the introduction of INP, these criteria were:
Largest Contentful Paint (LCP): The amount of time it takes for the largest content element of the page to be displayed to the user.
First Input Delay (FID): Measuring the first interaction and responsiveness of a web page with a user.
Cumulative Layout Shift (CLS): Measuring Visual Stability or the stability of visual elements.
It may seem that FID is very similar to INP. What is the difference between these two? Why did Google decide to replace INP with FID?
Comparison of INP and FID
INP measures the longest interaction in a series of interactions while FID considers the user’s first interaction with the website.
As mentioned earlier, INP is measured based on multiple user interactions overtime on the screen. While FID only measures the delay of the user’s first interaction with the website and the response of the browser.
In addition to the previous case, INP also takes into account the time that the interactive code fragment is executed after the initial page load, which FID does not take into account. For example, suppose you have a website that has a registration form. When users come to a website, the page is loaded first, and then interactive scripts are loaded that can perform various operations, such as validating a form or checking input data.
INP takes into account how long these interactive scripts take to load after the initial page load. But FID does not consider this aspect and only deals with the delay of the user’s first interaction with the website and the browser’s response.
As a result, INP provides a more comprehensive evaluation of users’ interaction with the website and better reflects the real experiences of users.
Let’s examine this difference with an example:
<start user interaction>
The user opens a page of the website – the page loads quickly.
Clicks on the image carousel to view the photos – images load easily with each click.
Scrolls the page – no lag.
Comes to a form – and wants to fill it out.
He clicks on the form fields and starts filling them in – but it takes half a second for anything he types to appear on the form.
Submit the form.
<end of user interaction>
Now let’s check the status of FID and NIP. In this example, the FID situation is very favorable. Why? The user’s first interaction with the website was clicking on the image carousel, which was done without any problems. FID does not pay attention to the delay that occurred while typing in the form.
However, INP investigated this delay because the biggest page delay was related to the form-filling section.
According to this example, it can be concluded as follows:
“If the FID rank of a website has been in good condition in the past, it does not necessarily mean that its INP rank is in good condition!”
INP measurement tools on the website
There are several tools for measuring INP. Web developers and SEO experts commonly use browser-based tools such as Lighthouse, Chrome User Experience Report, and PageSpeed Insights. The powerful Google console search tool also displays information about INP in the Core web vitals section.
What factors affect the value of INP?
When a user interacts with a web page, a series of events takes place behind the scenes. The browser must process that interaction, execute the corresponding JavaScript code, and then display the visual changes on the page. INP focuses on this entire process. As a result, JavaScript and CSS codes affect the value of INP.
Common causes of INP error and how to fix it
With the addition of the INP criterion in Core web vital, SEO specialists should be able to optimize the website based on this criterion and optimize it if an error occurs or if the INP time is prolonged. The main reasons that cause the INP number to exceed 200 milliseconds are:
Long tasks
Task refers to what a browser does behind the scenes to display a page. These tasks include rendering, HTML parsing, JavaScript code execution, and anything else you may or may not have control over.
This is even though there may be dozens of different tasks that are in the execution queue while it is not possible to process all these tasks at the same time.
But this is only part of the problem.
Another part of the problem is that if a task takes more than 50 milliseconds to execute, it is considered a long task. Considering that the browser can only process one task at a time, the longer that task is, the more time the browser needs to process it.
As a result, if the user is trying to interact with the page while a long-running task is running, the browser will respond with a delay to the user’s request.
And this means weak INP.
The size of the DOM
DOM (Document Object Model) is an inseparable part of the website. DOM is a tree representation of an HTML document. Each branch in the tree ends in a node, and each node contains objects. Nodes represent different parts of the document, such as elements, text strings, or descriptions.
A large DOM size can be problematic and affect browser performance. According to Lighthouse, if the number of DOM nodes of a page is more than 1400 nodes, it is high.
The larger the DOM of a page, the more resources the browser needs to render the page and perform the necessary updates.
Consequently, to improve INP, ensure that the DOM contains only essential elements.
HTML rendering on the client-side
When a user loads a web page, there are two different ways to display the content.
Server-side rendering:
In this method, the server (which hosts the website) sends all the HTML content to the user’s browser. In this case, the browser only needs to display this information.
Client-side rendering:
In this method, the browser receives a basic version of HTML from the server, and then using JavaScript code, more content is added to it to display the page in full.
The main difference between the two methods is that in the user-side rendering method, the browser must wait for the JavaScript code to execute to load the additional content. This takes more time, especially if the content of the site is very large and complex. This slowness hurts INP.