INP as an important indicator of website SEO performance: what is it and how to improve it

Despite the presence of a huge number of tools on the market that help promote business on the Internet, one of the most effective tools can still be called organic traffic. For its implementation, various methods and all sorts of combinations are used, aimed primarily at improving the overall SEO performance of the site. And one of the mandatory aspects that must be taken into account when optimizing your resource is the page load time. Different indicators are used to determine this indicator. We will dwell on one of these solutions in more detail in today's review.

In particular, we will talk about such an indicator as Interaction to Next Paint (INP). It determines how quickly the page will respond to certain user actions. That is, with what delay there is interaction between a person and a resource throughout the entire work path. Knowing this, you will be able to identify loading problems that exist on your site and, as a result, improve its SEO performance. Such actions will have a positive effect on the overall operation of your resource and will help improve its position in search engine results.

Now we will dwell in more detail on what the INP indicator is, how it is calculated and what indicators can be considered the norm. We will highlight a number of reasons why Interaction to Next Paint may be low and tell you how to perform the appropriate check. We will provide a number of recommendations that will help you improve the INP of the site. So, first things first.

A little bit about how the Interaction to Next Paint indicator appeared

The quality and responsiveness of a website interface has long been used as one of the key parameters when evaluating the SEO indicators of any website. To determine these parameters, a whole set of Core Web Vitals indicators is used, which literally translates as Main Web Indicators. They were once proposed by Google. Initially, 3 main metrics were used here:

1. Largest Contentful Paint (LCP). Determines how quickly large-volume material will load.
2. First Input Delay (FID). This metric indicated how much time would pass from the first user input until the action was performed.
3. Cumulative Layout Shift (CLS). This is the so-called cumulative layout shift, that is, the difference between the planned and actual site loading speed indicators.

But in March of this year, one of these indicators, namely FID, was replaced by a new metric - Interaction to Next Paint (INP). It covered everything that is directly related to the site's response speed to any user action. As an option, INP will show how quickly the color of the cart icon will change after you add a new product to it or how quickly the "Place an order" button will become active after clicking on it. But we want to draw your attention to the fact that this parameter does not take into account the total time, so to speak, until the final response. The fact is that in complex scenarios of user and site interaction, quite a lot of time is required to complete the rendering. In this case, we are talking about how much time will pass before the interface responds to the user action. That is, we are talking about the time interval before the user can understand that his command is being processed by the resource, that is, that the site has not frozen.

By the way, such a metric as INP was first discussed in 2022. Even then, it was planned to be used to replace FID, since it allowed to obtain a much larger volume of applied information, structuring it into smaller blocks. So, FID only determined how much time passes from the user's click to the site's response. But it took into account only the first contact, while all subsequent interaction remained taken into account. And it is here that problems can already be hidden that have a negative impact on the SEO indicators of the site and user satisfaction. Unlike this metric, Interaction to Next Paint involves assessing the response speed throughout the entire chain of interaction between a person and a resource.

It should also be remembered that the FID indicator was more focused on technical aspects, that is, it assessed the response speed from a technical point of view. For tracking, FID was focused directly on clicks and keystrokes, that is, on the corresponding events:

• mouse or touchpad click (click);
• mouse button pressing and releasing (mousedown and mouseup, respectively);
• keyboard key pressing (keydown);
• analogous to releasing a mouse button only for other input devices (pointerup).

Unlike FID, the INP metric takes into account many more interactions, which makes it much more useful in the process of assessing the speed of site interaction and its final quality. Moreover, this indicator already relies on the visual component, which is more important for user assessment of the quality of sites in general. The effectiveness of replacing the First Input Delay indicator with Interaction to Next Paint has been proven in practice by Google. The study included a quality check of a large number of sites. As a result, it turned out that according to the FID metric, 93% of the studied resources were optimized, while according to the INP indicator, their number was only 65%. It is worth remembering that we are talking about a parameter that is directly related to the level of user satisfaction when working with a site.

This means that it is important for resource owners who want to develop their business on the Internet as effectively as possible to implement this optimization, and quite quickly. Let us remind you once again that Interaction to Next Paint evaluates not only the first interaction, but displays the interface response throughout the entire period of user work with the resource. By such a concept as “interaction” in this case, we mean not one, but several events. Alternatively, this could be pressing or releasing a button on an input device, be it a touchpad or a mouse button, removing a finger from the screen of a smartphone, tablet, etc.

Despite the fact that the prospects for using the Interaction to Next Paint metric were assessed back in 2022, the final replacement of FID with INP occurred only in March 2024. And since that time, many sites have undergone additional optimization in order to improve this parameter. Moreover, the work performed has already proven its effectiveness in practice: the positions of many resources have significantly increased in search results after a short period of time.

On what components is INP calculated?

We have already talked about the fact that Interaction to Next Paint measures the time interval, the time between the user performing an action and the time the interface displays certain data, such as a mouse click or finger click on the smartphone screen until the interface is updated. By interface update we mean the appearance of new elements on the open page of the site, be it an image of an additional menu, etc.

When calculating INP, 3 key components are used:

1. Input delay. It involves waiting for the implementation of background processes on the active page, which prevent the process of launching event processing. As an example, here we can cite the first visit of the site by the user. When we go to the page, all the content is initially loaded, as a result of which the interface does not respond at all to any other clicks, scrolling and other actions.
2. Processing time. This is already the launch of event processing in JavaScript. Alternatively, this can be loading the HTML code of the page, a visual change in the input field in HTML, or the user pressing the corresponding buttons.
3. Display delay. This involves handling all the other interactions that are lining up, including recalculating the layout, rendering the page content graphically.

To evaluate the INP of your site, you need to understand what parameters to focus on here. In particular, a response speed of 200 ms or less is considered ideal. That is, such a page will respond very well to user actions. If your INP indicator is in the range from 200 to 500 ms, then the speed is considered average and experts recommend taking a number of measures aimed at optimizing the resource and this indicator in particular. Page responsiveness of 500 ms or more is considered very bad. In this case, it will be necessary to perform a fairly impressive set of works to reduce this indicator.

To make it clearer in practice what exactly we are talking about, we will give a couple of examples. Imagine that a user opens a map on the site by clicking on the corresponding button. And what happens after that? Here, the script is initially loaded and only after that the rendering process itself begins. As a result, we get a fairly significant Interaction to Next Paint indicator. But what happens if you rely on classic asynchronous loading, that is, without such a wait? Both of these processes will run simultaneously, which will ultimately lead to a noticeable decrease in latency. In addition, it is very important to let the user know that your site is processing the request, and not frozen as a result of its action. Do not be lazy to add a skeleton, animation or loader directly to the field where the map should be placed.

Another example is a large DOM tree. In most cases, the corresponding user click will cause a redrawing of this entire tree, which will ultimately lead to a significant increase in the INP indicator. This in itself can become a serious problem. But if you perform simple optimization, for example, run asynchronous processing, reduce the required number of elements that require modification, pre-prepare a data set, then you can significantly improve this parameter. And do not forget about adding skeletons or a loader - they will not be mandatory in this case either.

Why the INP indicator is low: main reasons

In order to perform a truly high-quality optimization of your resource, to adjust it to the constantly growing demands of the consumer market, it is important to understand why the INP indicator turned out to be high in your case. Experience shows that this problem most often occurs as a result of:

• using a long chain of tasks, which ultimately leads to blocking the main thread: will cause a delay in user interaction;
• launching synchronous event handlers on clicks, which can also lead to failures and delays in response from the interface;
• the presence of changes in the DOM, provoking multiple redrawing and recalculation: often encountered in practice in cases where the DOM includes over 1500 HTML elements, that is, its volume is too large.

Now that you already understand what the Interaction to Next Paint metric is, how it is determined, what indicators are considered normal, for what reasons it deteriorates, let's move directly to practice. Namely, we will tell you how to check the INP indicator of your site.

Checking the INP of the site: step-by-step recommendations

To check the Interaction to Next Paint of your site, you can use tools such as Google Search Console, Chrome User Experience Report (CrUX), Lighthouse, PageSpeed Insights and other similar ones. We would like to immediately draw your attention to the fact that the choice here is quite wide, but the principle of action will be mostly very similar. Now we will tell you how to do this work using the CrUX tool. We are sure that you can also easily and simply check the INP of your site through other programs.

In this case, we perform the actions in the following sequence:

1. Open the report through the developer tool. To do this, you need to click on the Command + Option + J button if you are using a Mac device or on the Ctrl + Shift + J button combination if you are working on computers, tablets with Windows, Linux, Chrome OS operating systems.
2. Now we need to call the developer tool in your browser. The program will automatically direct you to the «Console» window. Now you will need to go from it to the «Performance» menu.
3. If you are testing on a fast computer, we would recommend emulating slowness. This will allow you to make your testing as accurate as possible, since most users use devices with average performance in their daily work. To do this, you can use the tools provided in Chrome DevTools. First, go to the "Settings" menu, and then click on the gear icon in DevTools. Here, we select one of the appropriate processor emulsification options: "4x" or "6x". This will slow down your processor's data processing by 4 or 6 times, respectively.
    
4. Launch the event tracking process on your website page by clicking on the corresponding icon in the open window or by pressing Command+E for Mac devices or Ctrl+E for computers and laptops running Windows, Linux, and Chrome OS.
   
5. The last thing you need to do is start interacting with your page. Click on all the buttons that your potential buyers, content readers can click, open different menus, add products to the cart, place orders.

After these works are completed, the program will provide you with a visual report. In it, you will see which events take the most time to process. That is, in just a few minutes you will be able to identify the heaviest elements on your page. This will become the basis for all subsequent work related to website optimization. Remember: only if you know the cause of the problem, you can effectively eliminate it.

For what reasons may the Interaction to Next Paint indicator not be calculated?

If you have completed all the relevant work, but the system still has not shown you INP, you need to identify the cause of what happened. Note that this can also happen with user actions. There are several possible options here:

• your website page loaded, but you did not click on the button, or did not touch the smartphone screen, did not press a key on the keyboard;
• the page loaded, but interaction with the page was performed using gestures that did not involve clicks, touches, as an option, a mouse button was scrolled, the cursor was hovered: these user actions are not taken into account in the INP methodology;
• bots were used to access the page that were not pre-programmed accordingly to interact with the content: as an option, this could be the use of search bots, browsers that do not have a graphical interface (headless browsers).

That is, if all these actions are performed by your users, then the INP indicator will not be determined, and they themselves will not be taken into account by the system as a target action.

Practical recommendations for improving Interaction to Next Paint

So what to do if you have carried out all the necessary checks and made sure that the INP indicator of your site is below 200 ms? In this case, it is necessary to carry out a set of measures aimed at optimizing the resource, which involve increasing the speed of interaction with the user. One of the best solutions here is to minimize all processor processing that is carried out on the page. Alternatively, you can reduce the amount of animation, because it is this that significantly slows down the loading speed. In addition, it is necessary to check how the main processes occur on your resource, starting from the moment the page loads and in subsequent interaction. It is optimal to make sure that these processes are performed synchronously. This way, users will be able to update the interface even if other processing stages are still being performed.

The first thing you need to do at this stage is to perform a number of works aimed at improving the INP metric. We are talking about:

1. Reducing Input Delay, that is, input delay. To understand that you have this problem, you need to use a tool such as Page Speed Insights. Here you should find the Total Blocking Time (TBT) metric, and then filter "Diagnostics" by it. After that, you will see the existing problems and then select the most effective way to eliminate them. You can also reduce input delays by reducing background processor activity and breaking it down into smaller blocks in the main data stream (Main thread). If third-party code is responsible for performing background tasks on your site, then you need to minimize the load or load third-party scripts only when absolutely necessary.
2. Reducing the number of processed parts. The browser spends a lot of time processing certain elements of your page. Therefore, it is in your interests to optimize this process, as an option, you can use React applications. This is what will allow you to avoid repeated, and in this case, unnecessary rendering of elements. Here we are talking about eliminating the conversion of HTML, CSS and JavaScript code into an interactive page if this is not necessary. If you see that a significant part of your processor's activity falls on working with the layout, then you need to reduce the number of retransmissions. That is, you should reduce the number of simultaneous data reception and transmission. You can do this by making adjustments to the page layout, that is, to the DOM (Document Object Model). In particular, you can use grouping by styles or apply other layout methods. One of the good ways to reduce retransmissions is to use CSS Flexbox or Grid class objects on your site. If the actions on the resource involve fairly active JavaScript processing in response to user actions, then you need to set the priority for updating the user interface, while the launch of processor tasks can be pushed to the background.
3. Removing the Pop-Up window, i.e. the notification window, from your site. The fact is that the classic methods used today in JavaScript, including alert (aka Pop-Up from the user side) are a fairly simple, but at the same time effective way to display a dialog box on the screen, and with it a request to confirm the action. But the problem is that both of these processes are performed simultaneously, which leads to blocking the main flow of interaction with your page. That is, even if they are displayed for an insignificant period of time, there will be a delay in loading. You can safely remove them. Rest assured that if the user is interested in your product or service, he will find a way to contact the managers of your company.
4. Minimizing the delay in displaying content. This parameter directly depends on how complex your page configuration is, as well as the number of its updates. If its content requires a fairly long loading time, then set the priorities correctly. Make sure that only the most important content is initially displayed on the user's screen. That is, the information that you want to convey to the user audience. While a person's attention is riveted to it, other elements will gradually follow.

Now we will give a number of recommendations that will allow you to properly optimize the site to improve Interaction to Next Paint indicators.

Sequence of actions for INP optimization

Google, which can rightfully be called the legislator of such a metric as Interaction to Next Paint, recommends a step-by-step approach to optimizing the resource's Internet pages. This way, you can do all the work as correctly as possible and not miss important points. So, when optimizing website pages to increase INP indicators, you need to:

• Identify the problem. You must clearly understand which user actions on the page are characterized by low interactivity. In this case, you need to conduct your own testing using special services for monitoring the actions of real users; we have already talked about them above and described how to perform these tasks as correctly as possible.
• Analyze the identified slow interactions. It is good that you can see the reason for the low speed. But it is also very important to understand why this happened. Testing will also be required here. Identify the chains of actions that users, in your opinion, will perform on the site and go through each of them. This way you will be able to comprehensively analyze the problem and identify its cause.
• Optimize interaction with your page. Now you need to consider in detail each of the interaction stages, including input and provision delay, processing time. It is also worth taking a number of measures to eliminate the problem. This will be the optimization of the page aimed at increasing INP indicators.
• Reduce input latency. We have already mentioned above that one of the best solutions at this stage would be to break one large task into separate smaller blocks. Alternatively, this can be implemented using a function such as setTimeout and the like. This will help you eliminate the possibility of blocking the main thread, as well as provide really fast feedback to the user command.
• Optimize events. At this final stage, your task will be to increase the efficiency of each of the events. This can be done by introducing restrictions on code execution, including for updating the visual component of the page. It is optimal to rely on the so-called “lazy” rendering, which involves the use of CSS properties of elements that are out of sight, that is, do not have an interface.

After completing all the work related to optimizing your site to increase the INP indicator, it is advisable to re-test to make sure that your actions further the desired result and the speed of interaction has increased. Also, this parameter will need to be monitored in subsequent real work in order to respond to changes in time.

Summing up

If we briefly summarize everything that we talked about in today's review, the first thing I would like to draw your attention to is the importance of the Interaction to Next Paint metric in the work of any business. This is what can improve the user experience, increase the level of satisfaction from visitors and buyers. This tool has become a more technologically advanced and functional update to the once popular FID metric in Core Web Vitals, since it takes into account absolutely all stages of user interaction with your page, and not just the initial delay. Don't be lazy to personally perform INP checks from time to time to make sure that your site works as correctly as possible. And this is the guarantee that users will stay on it, and not go to your competitors.

In order to improve INP indicators, it is necessary to reduce the duration of processor processing, input delays, implement synchronous launch of scripts, minimize the number of details that need to be processed. It is also recommended to remove Pop-Up notification windows from the site and perform a number of works that can minimize the delay in displaying content. Today, there are quite a lot of software packages to solve these problems, most of which are freely available.

Today, there are quite a lot of software packages to solve these problems. Most of them are freely available. However, not all of them will work directly in a particular country in the world due to certain regional restrictions. mobile proxies from the MobileProxy.Space service will help you bypass such blockages and ensure stable operation with any applications, including organizing multi-threaded work without the risk of running into a ban. Also, with their help, you can ensure high anonymity and security of work on the Internet in general, automate some of the routine and monotonous work.

Take advantage of the offers of the MobileProxy.Space service to personally see how functional and advanced the tool is at your disposal. You can test the mobile proxies for 2 hours absolutely free of charge, and then purchase them for the most suitable period of time, starting from 1 day and up to 1 year with quick and easy renewal. Follow the link https://mobileproxy.space/en/user.html?buyproxy to get more detailed information about the functionality of this tool, payment terms, and current tariffs. We would also like to draw your attention to the fact that each MobileProxy.Space client, if any difficulties arise in the work, can contact the technical support service, which works around the clock, with additional questions.

Share this article: