You might be aware of Google’s upcoming transition from First Input Delay (FID) to Interaction to Next Paint (INP) by March 2024. This alteration will significantly impact the evaluation criteria for Core Web Vitals. In case you have been unaware of these don’t worry, we have got you covered.

Interaction to Next Paint or INP is a metric that is used to measure the interface responsiveness of a web page. This responsiveness is the time elapsed between the interaction of the user with the page and the point where there is the next visual update in the page. So essentially, it refers to the promptness with which a web page reacts to a click or keypress of a user. It helps in understanding as well as improving the user experience (UX), considering it is directly related to how quickly a specific page responds. 

Chrome Usage Data has shown that about 90% of a user’s time on a web page elapses after a page loads. So this responsiveness measurement across the lifecycle of a page is extremely important. 

What is INP (Interaction to Next Paint)?

If you are familiar with First Input Delay, you would also understand what INP is, although the two terms are not quite synonymous. Interaction to First Paint or INP was introduced by Google to replace the FID or First Input Delay in CWVs. This may be considered as a part of Google’s attempts to enhance User Experience and Web Performance. In Google’s attempt to make the web more user-centric, introducing INP as a measure of responsiveness for web pages and sites played a crucial role.

Good responsiveness usually refers to how swiftly a page responds to the interactions made with it. Response in this scenario refers to the visual feedback, which the browser presents in the next frame. While it is obvious that some interactions will take longer to happen, it is important that there is some level of visual feedback, which will inform the user that some process is happening. The earliest scope to do this is the time till the next paint. If visual feedback is delayed, users might get the impression that the page is not responding to their actions at all.

So, INP, as a metric, observes the latency of all taps, clicks as well as keyboard interactions, which take place all through the time period of a user’s page visit. Now the final INP value is calculated as per the longest interaction noted, barring the outliers. 

INP proves to be more useful and relevant for pages, which see long-term interaction like single-page applications. This way it is able to give a much more accurate representation of the entire User Experience.

So once INP takes over from FID in March 2024, the Google Search Console report will no longer display FID metrics but will instead utilize INP moving forward.

Moreover, all web publishers need to abide by the Interaction to Next Paint to improve their Core Web Vital(CWV) scores and provide a better user experience.

What is a Good Interaction to Next Paint Score?

In order to ensure that the users are having a satisfactory experience, websites should try and keep their interaction to next paint at 200 milliseconds or less. Most users consider it to be a good threshold, meaning that the website is functioning properly, is responsive, and its interactions are processed with great promptness. 

However, when considering INP, we also have to consider that user experience varies across various platforms, devices and conditions. So in order to make sure that the responsiveness you are delivering is good, the threshold is to measure 75% of the page loads, which are recorded in the field. This way the measurement becomes even more comprehensive and provides a clearer picture, ensuring that the majority of users are having a positive responsive experience. 

An INP exceeding 200 milliseconds and below 500 milliseconds mean that your webpage needs better and improved responsiveness. If the INP is above 500 milliseconds, your page has poor responsiveness.

If a website has a number of interactive elements i.e. those of games and text editors etc, having a low INP is very important. If the INP is high, it would mean the responsiveness of the website is very bad, leading to poor User Experience. A lower INP would however mean a better and smoother experience for the users.

What are the Various Steps of Measuring Interaction To Next Paint?

Let us understand how INP works by breaking down the process to its core components. Here are the major steps involved in measuring INP:

User Interaction Capture – 

The process of measurement starts when the user first does an interaction with the webpage. Interaction could refer to a keypress, a touch on the screen or a click. INP has been designed to focus on these as these are direct, interaction actions which need specific feedback from the page. 

Input Delay

Input Delay refers to the time taken before the processing of the information is started. The browser may remain in a busy state during this phase, delaying how fast the user’s input is processed. 

Processing Time

In this phase, the event handlers, related to the interaction, are made to run. They are nothing but Javascript functions which work towards executing the response to the user’s action. The processing time might vary depending on how complex the task is. 

Delay in Presentation

After the processing of the input, the delay in presentation is the next phase. It refers to the time taken for rendering the visual response of the interaction. Tasks like executing CSS changes, recalculating the layout of the page or repainting the page so as to reflect the interaction are done in this phase. 

Visual Update

This may be considered as the final stage where the entire interaction process culminates. In this stage the user can see the result of his initial action, – an indication of a form submission, a menu opening or any other visual response on a web page. 

Calculation of INP

Calculation of INP is done by adding input delay, processing time along with presentation delay. This gives you a comprehensive measure of the time period between the user’s initial interaction and the next paint reflecting the visual update of the page. 

How is INP and FID Different – A Comparison

 For web developers who are looking forward to optimising their User Experience, it is important to know exactly how INP and FID are different. Although both of these metrics are used for measuring responsiveness and interactivity, there are some basic differences that need to be kept in mind. 

First Input Delay or FID:

This metric deals with the first time that the user interacts and measures the time lapsed between this interaction and the point when the browser can begin processing the event handlers that are supposed to respond to that interaction. 

So essentially, FID assists in gauging User Experience during the page’s loading phase. It depends completely upon the first interaction. 

Let us take an example where the user clicks on a dropdown menu for a relevant dropdown list to appear. So FID will measure the time taken between the user’s click and the time taken for the menu to appear. In the meantime, if the browser is busy loading the page, there will of course be a considerable delay in the response. This will automatically lead to poor User Experience. 

Interaction to Next Paint

INP on the other hand can be considered to be a more comprehensive metric where it measures the latency of all user interactions. Unlike FID, it is not restricted to just the first interaction and deals with the interactions happening in the entire lifespan of the visit to the page. It includes the time taken for delay in input, processing of the information and the delay in presentation. 

For example, let us consider that a user is using various interactive elements on the web page. This may include typing in a search field, selecting items in the menu, clicking on links etc. INP would be responsible for measuring the delay in all these interactions and would provide a much broader idea of how well the UX is. 

What are the Various Ways of Improving Interaction to Next Paint?

Improving a website’s Interaction to Next Paint (INP) is pivotal for enhancing its responsiveness and optimising the overall user experience (UX). The following detailed recommendations involve strategic approaches to optimise INP effectively and considerably improve the User Experience at the same time:

1. Minimising CPU Processing:

• Enhance the user experience by running more code asynchronously, providing immediate UI updates even during ongoing background processing
• Leverage tools like the DevTools performance profiler to scrutinise the main thread, identifying areas for optimization
• Evaluate the impact of third-party scripts on site responsiveness and configure or defer them as needed
• For non-essential resources, you can consider lazy loading and ensure that the loading happens only when absolutely necessary so that initial loading time is minimised

2. Reducing Input Delay:

• Alleviate input delay by diminishing background CPU activity on the main thread
• Employ the Total Blocking Time (TBT) metric in lab data to pinpoint activities impeding user interactions
• Investigate methods to optimise third-party code causing delays
• Consider breaking down the main thread of tasks into smaller, manageable tasks so that the likelihood of input delays is minimised

3. Optimising Processing Time:

• Identify and optimise areas where the browser spends a significant amount of time executing code
• Ensure that components, particularly in frameworks like React, do not render unnecessarily
• Strategize to minimise layouts and repaints if they contribute significantly to CPU activity
• Utilise an intelligent caching mechanism so that frequently used data can be easily stored and retrieved thus minimising the need for redundant computation

4. Updating UI Before Heavy Processing:

•  Provide immediate visual feedback, such as a spinner, before initiating resource-intensive tasks
• Make use of skeleton screens or placeholders so that the users can be given immediate visual feedback while resource-intensive tasks are being performed
• Consider the use of web workers for running computationally intensive JavaScript tasks off the main thread

5. Avoiding Blocking Dialogs:

•  Replace traditional blocking native dialogues (like alert, confirm, and prompt) with non-blocking UI elements
• Implement overlays or custom modal dialogues, which do not block the main thread and provide a seamless user experience

6. Reducing Presentation Delay:

•  If rendering content is slow, prioritise displaying critical content first to expedite the delivery of subsequent frames
• Efficiently manage queued interactions to minimise presentation delays
• Try to leverage the CDN or Content Delivery Networks for distributing the processing loads and reducing the server response times

7. General Best Practices:

• Employ tools such as Google PageSpeed Insights, Lighthouse, and real user monitoring (RUM) solutions for continuous performance monitoring
• Stay abreast of changes in Core Web Vitals (CWVs) metrics and adjust optimization strategies accordingly

Conclusion

Interaction to Next Paint has turned out to be a rather comprehensive measure of evaluating User Experience where it calculates the delays in case of all user interactions during a single page visit, unlike FID which only deals with the first one.

 In this article we have seen in detail what INP is and a detailed analysis of the process in which it functions. We have also gone through several methods in which we can optimize or improve User Experience and make sure there is the least number of delays when a user is making an interaction. 

The impact of improving site performance goes beyond mere user satisfaction; it translates into tangible benefits for publishers, notably in the realm of ad revenue. A finely tuned, responsive site possesses the capacity to foster recurring visits, nurturing a more engaged audience.

Frequently Asked Questions

---