What is Interaction to Next Paint (INP) & How to Optimize It?

Google recently changed the balance by introducing a metric called next-paint engagement (INP) to track page experience. INP stands out as an empirically based domain metric that measures the responsiveness of a page.

The speed at which a page responds to user input is responsiveness. In this case, INP is a good metric to track user experience. After the INP Web Vitals update announced recently, Google announced user experience as an important ranking signal.

INP, on the other hand, can replace the FID metric to track Core Web Vitals. There are many opinions on this subject. Google published an announcement in May 2023 and stated that the INP metric will be valid from March 2024 and that this metric will replace FID.

What Are Core Web Vitals?

Core web data is a set of metrics that Google publicizes so you can identify, track, and measure your website’s overall user experience.

Google uses this web data to measure your website’s page experience. In this way, it implements the page experience update.

Google, the world’s largest search engine, uses three metrics to measure user experience: LCP (Large Contentful Paint), FID (First Input Latency) and CLS (Cumulative Layout Drift). By optimizing these metrics, you can maximize the user experience on your website.

In this section, we will explain to you one by one what basic web data are;

LCP (Largest Content Paint)

The time it takes for content to appear on the home page after users open a web page on your website is tracked by the top content paint metric.

This metric tracks how many seconds it takes for the images or videos on your website to load. Within the scope of the guidelines announced by Google, the ideal LCP value on a website should be 2.5 seconds.

It tries to find out how long it takes for your largest content color page to load and engage. You can find and optimize the LCP value of your web page using the Google PageSpeed Insights test.

FID (First Input Delay)

The first input delay is the metric that allows you to track how many seconds it takes for elements within a page on your website to respond. When a visitor enters your website and clicks on one of the links, buttons and images on the page, the FID metric deals with the response time of the element.

If a person who logs in to your website clicks on a button on your page, the time it takes for your website to respond depending on the click reveals the FID value.

Google guidelines state that the ideal FID value on websites should be 100 milliseconds. To get information about the initial login delay of your website, you can measure it from the Google PageSpeed Insights tool.

CLS (Cumulative Layout Shift)

It is a metric that detects unexpected layout shifts during the loading process of a page on your website. CLS, also known as cumulative layout drift, reveals how often visitors experience layout shifts while your web page is loading.

If the Google guideline is taken into account, the layout on your website should be at a value of 0.1. You can use the Google PageSpeed Insights testing tool to find this value.

Google has stated that in 2022 it will begin using an experimental metric called next-paint engagement, which measures the time it takes for the browser to render the next image in response to user interaction. Although this metric is still in the testing phase, Google states that it provides valuable information about user experience and website performance. We say that this metric will replace FID in the near future. For this reason, we must clarify the question of what INP is.

What is INP?

INP is a metric that tracks the delay of all interactions of a person visiting your website and presents all interactions to you as a single value. INP tracks a visitor’s interactions on the website throughout their entire visit, taking into account overall responsiveness. This value is calculated when the user leaves the page.

The most important difference from other metrics is that it does not require CSS or Javascript code to track responsiveness. This metric measures how quickly items on the screen are displayed when a user action occurs.

In a blog post published by Google webmasters about page responsiveness, it was revealed that this metric is an experimental metric.

It was stated that INP will be shown as page experience in the “Site Performance” section in the Google Search Console panel. If you log in to Google Search Console now, you will see the FID metric, which is the first entry passed, in the site performance section. However, after March 2024, the INP score will appear in the Search Console Core Web Vitals report and the FID score will no longer be included.

You can now track the INP score of a web page in Google’s PageSpeed Insights tool.

The basic logic of the INP metric is to track the time from the moment a visitor initiates an interaction until the frame is painted and all interactions made by users. INP primarily provides visual feedback to visitors.

How is INP Different from First Input Delay (FID)?

Google currently follows the FID metric to track user experience. In the Site Performance section of your Google Search Console panel, the first login delay metric you will see regarding user experience will appear. However, as of March, you will now see the INP metric here.

First of all, the interaction to next paint metric is a metric that is sensitive to all user interactions. The FID Metric only takes the first interaction into account. However, since all user interactions are important on a website, INP will be more efficient in terms of tracking user experience.

The first login latency metric measures only the first interaction on a web page. INP, on the other hand, measures all interactions when a visitor enters a web page during his/her stay. Instead of just tracking input latency, INP also tracks processes such as processing time and the time required to paint the next frame.

The FID value is calculated after the first interaction with the page. The INP metric is calculated after the user leaves the web page. A value is then generated that indicates the overall responsiveness of the page.

Initial input lag is part of the loading sensitivity metric. At this point, it is a metric based on first impressions. In this metric, if the user does not experience any delay in the first interaction, he/she will have a good user experience impression. However, this is not sufficient for accurate evaluation.

Since Google is constantly improving its algorithm, it will now evaluate the delays based on the average of all the user’s experiences.

How Does INP Work?

INP is a responsiveness metric that is taken into account when a user logs into the website. It generally focuses on the delay in a user interaction. It takes into account how quickly you respond to users who perform a particular action on elements on your web page.

The working logic of INP is as follows;

• First, a visitor lands on a page on your website.
• Then, visitor performs an interaction such as clicking or pressing a button on the page he spent time on.
• The browser then sends a request to the web server to serve the new content to the user.
• The web server evaluates the incoming request and sends the new content to the browser.
• The browser receives the content coming from the server and processes it into the new content on the page.
• The browser then keeps track of the time it takes to render the new content. This value is called the INP score.
• If the INP value on your website is low, you should consider that your website is unsuccessful in terms of user interaction and you should optimize the INP value.

How to Measure INP?

To measure INP, you need to use a professional analysis tool that tracks real user interaction data. At Google, all interactions of real Chrome users on a web page are tracked. It then hosts this data in the Google’s core web vitals official dataset CrUX dataset.

To follow official INP metrics, you need to use Google PageSpeed Insights, CrUX dashboard or Google BiqQuery platform. This value is measured when a user triggers an interaction that can be included in the INP report.

As soon as the interaction in question is triggered, all the steps in the background are followed, such as the visitor taking the action and the result being shown to the user. Then, data regarding the developments throughout the entire process are analyzed. This data is then converted into an INP value in milliseconds.

Latencies that can be expressed as milliseconds are very common on the Internet. At this point, three situations are taken into account when calculating INP. Input Delay, Processing Time and Presentation Delay data are summed and the total INP score is obtained in milliseconds.

Based on the documents announced by Google, it is known that the average INP value for a website should be 200 milliseconds or less. If you have an INP value of less than 200 milliseconds, the responsiveness of your user page is sufficient and good. An INP value above this value, for example 500 milliseconds, indicates that the response speed on your page is low and needs to be improved. If the INP Google value is more than 500 milliseconds, the response rate is low.

Google says that the INP value is still an experimental metric. Therefore, gradually optimizing ideas can be followed.

How to Optimize for Interaction to Next Paint (INP)?

For subsequent paint interaction optimization you must first take into account the field data. Find out the slowest interactions for your visitors. Try to identify the reason for the slowest interactions and do a good research on it.

Identify the page types with the slowest interactions. First, work by identifying the pages where your INP score is insufficient. If there are problems with more than one type of page, start working on these pages by determining the type of page that attracts more traffic.

Many situations on your website can reduce the INP score. What you need to do is to find the possible reasons that reduce the INP score and focus on these situations.

There are some standard practices you can apply to increase your INP score. In this section, we will introduce you to some applications on INP optimization.

Identify and Reduce Input Delay

Login latency refers to the total time between when a visitor first interacts with a given web page and when the interaction is called back to the event. Here, interaction can be touching the screen, clicking the mouse, or pressing a key. Every interaction on your website will begin with a certain login delay.

Each time a visitor arrives, it takes a certain amount of time for the operating system to recognize the login process and transfer it to the browser. For this reason, in every interaction experience, a certain amount of login is experienced. Input lag often goes unnoticed. Different situations can prolong the login delay on the page, which negatively affects the user experience.

Your website should have the best INP metric regardless of user device. For this reason, you should aim to complete all stages of the interaction process as soon as possible. The best FID score for input lag is less than 100 milliseconds. Once you exceed this threshold, you spend half of your INP budget on input lag. You need to aim for the best input lag in terms of INP.

You can’t completely eliminate input lag. However, you can minimize this time by identifying situations that cause input lag.

For a user visiting your website, input lag will occur if the browser is busy performing other tasks before it starts processing the input.

We will offer some suggestions to reduce input lag;

• Focus on minimizing JavaScript execution time. In this way, the response time to user input is shortened.
• If there are long tasks, separate them. You can reduce the load on the server by breaking large JavaScript tasks into smaller ones.
• You can use requestldle Callback to schedule non-essential jobs when your browser is idle. This improves the operating performance of the browser by reducing the load.
• Beware of interaction conflicts and prevent conflicts between interactions.

Optimize Event Callbacks

An event callback is a return to the request that the server sends to the browser for display when visitors engage in an interaction. If you want to reduce the INP value on your website, you should minimize this time by optimizing event callbacks.

Make feedback instantaneous so that the page responds directly to user input. Do not wait for the confirmation from the server when the user submits a form or adds a product to the cart for shopping. Keep users from waiting by giving instant feedback.

User experience improves when users perform an action and receive immediate feedback rather than waiting for an event callback. Because the INP score improves, you do not have to make users wait longer for an interaction on your website.

Submitting forms with multiple data entries may cause response delays in interaction. You need to provide immediate feedback here. Feedback shows visitors that your website has seen and processed their actions.

With instant feedback, users know you are taking action and can wait a while. Even if the processing time does not decrease, the user thinks that faster performance is achieved.

You can apply these strategies to optimize event callbacks:

• You can use loading indicators. You can show a rotating image or progress bar when displaying data while a process is in progress or switching to a new page.
• Implement thank you pop-ups. Users will love a confirmation message indicating that their action, such as adding a product to the cart, was completed successfully.
• If users have entered data or filled out a form, you can verify the form field. At this point, they do not wait until the form is submitted and can understand whether the transaction was successful or unsuccessful with a verification.

Minimize Presentation Delay

The time it takes to transfer the updated user interface to the screen after an action on your website is completed is the presentation delay.

If a visitor needs to update your web page, updating only the necessary parts of the page would be the right approach. In this way, the presentation delay time will be minimal since you do not have to reload a lot of content on your page.

If you keep things simple during the page load process and take action to bring the most element back to the screen, your INP metric will be optimized.

You can do the following to improve the INP metric by minimizing presentation delay;

• You need to use GPU acceleration on your web pages. In this process, transitions and animations that can be processed by the GPU must be included on the page. This makes the machining process efficient. In this way, presentation delay will be reduced.
• Prevent actions that may disrupt the order on your web page. Do not separate read and write operations into the DOM. This will prevent disruption of order. Doing this will result in recalculation for multiple layouts. This increases presentation latency.

When you minimize presentation lag, the user experience on your website will improve and your INP metric will improve.

Optimize JavaScript Operations

Among the most important components in web pages is JavaScript. It adds different interactive elements to pages. This may negatively affect site performance. If JavaScript runs, it runs on the main thread responsible for rendering your web page.

If the code structure is inefficient here, it may negatively affect the performance of the thread. This negatively affects the response time of the page to user interaction.

Follow these steps for JavaScript-based optimization:

• Speed up loading time by reducing the size of JavaScript files.
• Enable GZip compression to shrink site files and data.
• Use a JavaScript framework using a tool and make your code structure organized and efficient.
• Send JavaScript files from the server closest to your potential visitors using a content delivery network. In this case, loading time will be shorter and your INP score will improve.

Conclusion

Google attaches great importance to user experience in ranking factors. Until now, the FID value was measured for user experience. As of March 2024, it will now focus on the INP value, with which it can track the entire process from the user’s first interaction to the exit time.

If you want to improve the user experience on your website, you need to optimize the INP metric. You can measure this metric in the Google PageSpeed Insights test. At the same time, you can follow it in the “Site Audit” section on your GSC panel starting from March 2024.

You can strengthen your INP score by optimizing JavaScript files, reducing presentation lag, and optimizing input lag. In this way, you can already gain an advantage over your competitors on Google.