What is INP? 5 Tips to Optimize Interaction to Next Paint for a Better User Experience

Interaction to Next Paint (INP) is a new performance metric for  Core Web Vitals, launched by Google in March 2024. In the coming days, INP will replace the First Input Delay (FID). Let’s understand, what is this INP, and why is it important.

Here, we will discuss Interaction to Next Paint in detail and learn how to measure it for your website. We will dive into the tips to optimize INP for a better user experience (UX) as well as search Engine Optimization (SEO) rankings.

What is INP?

Interaction to Next Paint (INP) is a new Core Web Vital metric that focuses on measuring user interface responsiveness. In simple words, it measures how quickly a web page responds to a user interaction such as key presses or clicks. 

The goal of Interaction to Next Paint is to measure the length of time from when a user initiates an interaction to the next frame print, so the website can improve it, if needed. An interaction can be controlled by CSS stylesheets and JavaScript files.

The interactions involved in Interaction to Next Paint’s calculations are:

The Factors that Affect INP

Interaction to Next Paint measures the time taken between your user input and the next updates. Several factors contribute to the interaction latency.

1. User interaction

The measurement begins from the moment when a user interacts with a web page. As mentioned before, this interaction could be keypress, click, etc. 

For example, when you visit RabbitLoader.com, put any website’s URL and click the Analyze button. 

2. Input Delay

Input delay refers to the time taken before the web page starts processing an interaction. During this process, the web browser might be busy with some other tasks, which can delay the processing of a user’s input.

3. Processing Time

After receiving the input, the next phase is the processing time. It refers to the time required for the browser to analyze and interpret the request or insert data, perform any calculations, and generate the response or output.

4. Presentation Delay

After generating the output or response, it takes some time to render the response to the user.  It includes tasks such as executing any CSS changes, recalculating the page layout, and so on.

The total time taken by these 4 steps, would be known as Interaction to Next Paint. 

The difference between INP and FID

Both the Interaction to Next Paint and First Input Delay (FID) are key performance metrics to measure user interaction and engagement on a webpage. However, there is a difference between these two performance metrics.

While Interaction to Next Paint considers all user in-put events, the FID metric measures only the initial delay between a user’s first interaction with a website. 

How Do We Measure INP?

Now you have a brief idea about Interaction to Next Paint. There are several tools available to check INP. Here we are explaining the process to check INP for your website.

Check INP issues using Chrome DevTools

Let’s check the INP metric by using Chrome DevTools. Here we are mentioning the steps that you need to follow.

•  Step 1: Right-click on the web page and select Inspect or press F12.

• Step 2: Click on the Performance tab.

• Step 3: Click the record button or press Ctrl+E, perform some interactions on the page, and then stop the recording.

• Step 4: After loading the profile, Click on Main Thread.

• Step 5: you need to check the Summary section.

Check INP issues using Google PageSpeed Insights 

Google pagespeed Insights provides a score based on the user experience of a webpage for both desktop and mobile versions. Here you can see the performance of the core web vital metrics. It also provides you the suggestions on how that web page can be improved.

To check the Interaction to Next Paint in Google PageSpeed insights tools, you need to put the URL of the website and click on Analyze.

After analyzing the website’s performance it will provide you with the report of the Core Web Vitals Assessment.

Check INP issues on Google Search Console

Google Search Console is another option to check your website’s Interaction to Next Paint performance. You need to follow the steps: Login> Core web Vitals > Mobile (open report)> INP issues

Step 1: First you need to log in to Google Search Console.

Step 2: Click on Core Web Vitals.

Step 3: Click on the Open Report in the mobile section or desktop section. You can see the more prominent result for the mobile version.

Step 4: Click on INP issues.you can see the INP issues

Step 5: You can see the INP issues.

What is Considered a Good INP Score?

Similar to the other Core Web Vitals metrics, the website’s INP score can be in one of the three thresholds. According to Google, a good Interaction to Next Paint value should be less than 200 milliseconds.

An INP of less than 200 ms means the web page has good responsiveness.

An Interaction to Next Paint between 200 ms and 500 ms indicates the web page’s responsiveness needs to be improved.

An INP above 500 ms is considered that the web page has poor Interaction to Next Paint or responsiveness.

5 Tips to Improve INP

Optimizing Interaction to Next Paint is the key to enhancing a website’s responsiveness as well as user experience (UX). Let’s see the 5 easy ways, you can improve the INP of your website.

Minimize CPU Processing on the Web Page to Improve INP

To minimize the CPU process on the web page, you can follow these strategies.

• Reduce JavaScript Execution: The execution of JavaScript files can significantly contribute to CPU usage. 

The most common way to minimize CPU processing is to use Vanilla Javascript. Using Vanilla JS means using pure JavaScript without using additional libraries like JQuery. Because every library has its in-build code, it will increase file size as well as CPU processing.

/*This is demo of JavaScript syntax
 *Below you can change some editor options */
  function hello(arg) {
       var string= arg-join('');
       if (/^H\w{2}.o\s*$/i.test(string)) {
           return string;
   }

 }
var result=hello(['H','e','l','l','o'])
console.log(result);

• Efficient Event Handling: Handling events efficiently is important for reducing CPU usage. To improve your INP, You can use event delegation on the parent elements rather than using event listeners for the multiple-child elements. 

• Cache Data: You need to implement a caching mechanism to temporarily store static resources ( HTML, CSS, JavaScript, Images). It will help to increase your website’s pageSpeed.

You can use the RabbitLoader plugin in wordPress to implement the cache functionality. If you need to implement this on other platforms such as Laravel, PHP, or even Shopify you can still use RabbitLoader, check out our platform page for more information.

Reduce Input Delay to Improve INP

When a user interacts with a web page, the first phase of that interaction is input delay. It happens due to activity occurring on the main thread, timer function, fetch handling, and others.

To reduce input delay first you need to optimize event callbacks by following the below strategies.

• Yield to the main thread: The best advice for optimizing callback events is to do as little work as possible. The next thing you can try is to break up a long task into separate tasks.

setTimeout() method is the only way to break up the whole task. The commonly used syntax is setTimeout(function, milliseconds).

For example,if you want to display the time every 10 seconds. For that first, you need to define a function to show the current time. Then by using the setTimeout() method, you need to break the function. So that it can execute every 10 seconds.

The code:

function showTime() {

    // return new date and time

    let dateTime= new Date();

    // returns the current local time

    let time = dateTime.toLocaleTimeString();

    console.log(time)

    // display the time after 10 seconds

     setTimeout(showTime, 10000);

}

// calling the function

showTime();

• Yield to allow rendering work to occur quicker: Yielding can help prioritize the rendering work to occur quicker by deferring the other tasks.

Let us understand with a real-time example. You have a website with a rich text editor. Four things can happen on your website. 1) update the text box, 2) Update the UI part to display the word count. 3)  execute the logic to check the spelling and finally, 4) save the changes.

Here is the code for the above process.

textBox.addEventListener

('input', (inputEvent) =>{

// Update the UI immediately, so the changes the user made are visible as soon 

  updateTextBox(inputEvent);

 // Use `setTimeout` to defer all other work until at least the next

// frame by queuing a task in a `requestAnimationFrame()` callback.

  requestAnimationFrame(( ) =>{

    setTimeout (( ) =>{

       Const text= textbox.textContent;

         updateWordCount (text);

         checkSpelling(text);

         saveChanges (text);

}, 0);

                  });

           });

Optimize Processing Time to better the INP

To optimize the processing time you consider the below strategies:

• Algorithmic Efficiency: if you implement some complicated algorithm in your code, it will take more time to execute. If you are working with a large dataset then we will suggest you choose a data structure like a tree or hash table.

• Parallelization: if the total task is distributed across multiple processors or machines, then it will reduce the processing time, especially for data processing or computations.

Avoid blocking Dialogs

Using non-blocking UI elements such as a progress bar or spinner can improve the Interaction to Next Paint performance. We suggest you replace confirm and prompt dialogs, and native alerts, which may block the main thread with these non-blocking UI elements.

Reduce Presentation Delay

There are two ways you can reduce presentation delay to improve Interaction to Next Paint performance.

• Simplify page updates: if the rendering page content is slow, then focus on showing the above-the-fold content first by enabling lazy loading.

Lazy loading can be implemented by adding a plugin to the website. if you are using RabbitLoader it will take care of the lazy loading along with other optimization features such as image optimization, CSS and JavaScript optimization, and many more.

• Minimize DOM size to avoid unnecessary rendering: The relationship between DOM size and the rendering work is not a linear one but large DOMs require more time to render compared to the small DOM size.

To avoid large DOM size you can use the content-visibility property in CSS to reduce critical CSS. 

Syntax:

content-visibility: visible;

content-visibility: hidden;

Improve INP by using RabbitLoader

To implement the above strategies, good coding knowledge is required. But if you are not a web developer or do not have a team on standby Don’t worry! 

By installing RabbitLoader, you can improve your website’s INP performance without having any coding knowledge. Not only a wordpress website, RabbitLoader will also help you with Shopify, PHP, or Laravel websites as well. 

Now it’s your turn. If the INP is high for your website then install RabbitLoader and improve the core web vitals report as well as the SEO ranking.