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.

inp

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. 

INP Module

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:

  • Clicking a mouse


  • Pressing a key on a keyboard


  • Tapping a touchscreen device

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. 

  1. 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.

Factors that Affect INP
  1. 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.

  1. 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.

fid vs inp

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.
inspect website
  • Step 2: Click on the Performance tab.
Click network tab performance
  • Step 3: Click the record button or press Ctrl+E, perform some interactions on the page, and then stop the recording.
Click ctrl+e
  • Step 4: After loading the profile, Click on Main Thread.
inp main thread
  • Step 5: you need to check the Summary section.
summary

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.

Pagespeed insights analyse

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

Interaction to Next Paint pagespeed insights

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.

core web vitals on gsc

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.

open report for inp core web vitals,inp

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

inp issues

Step 5: You can see the INP issues.

inp issue

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.

inp

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.
INP

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.

Optimizing Your Core Web Vitals To Increase Your User Experience & SEO Rankings

The first step in optimizing your core web vitals performance is to measure and identify the core web vitals issues. Once the issues are identified, you can easily mitigate them by following optimization techniques like image optimization to improve LCP, JavaScript optimization to boost your INP, and visual stability optimization to enhance CLS performance.

Core Web vitals

The Economic Times, a major Indian news website, increased its user experience and reduced the bounce rate by 43% by optimizing the core web vitals, increasing LCP performance by 80% and CLS performance by 250%.

Let’s explain the Core Web Vitals, their issues, and how you can optimize them with RabbitLoader to improve your conversion rate.  

What Are Core Web Vitals?

Core Web Vitals metrics refer to a set of three performance metrics that Google developed to measure the user experience based on the 3 primary conditions:

  1. The initial loading performance of your website
  2. The visual stability of your website’s page
  3. The user interactivity of your website.

John Mueller, the senior webmaster trends analyst clarified that the Google core web vitals are the important Search Engine Optimization (SEO) rankings factors. 

However, not all metrics are created equally. Let’s see the weightage of this core web vitals matrics:

  • Largest Contentful Paint (LCP): 25%
  • First Contentful Paint (FCP): 10%
  • Speed Index (SI): 10%
  • Cumulative Layout Shift (CLS): 25%
  • Total Blocking Time (TBT): 30%

What Are The 3 Pillars Of Core Web Vitals?

Prioritizing the real-user experience and not just lab data, Google has set 3 metrics as the pillar of the core web vitals for analyzing the website’s performance.

  1. Largest Contentful Paint (LCP).
  2. Cumulative Layout Shifts (CLS).
  3. First Input Delay (FID).

What is the Largest Contentful Paint (LCP)?

Largest Contentful Paint (LCP) is a web performance metric that measures the time (in milliseconds) it takes for the largest element to render on the web page. This LCP element is most often found on home pages, including the main image of your website, also known as a hero image. 

LCP

Google sets some threshold values to categorize this LCP performance. Let’s understand this in an easy way.

  • If the LCP value is less than 2.5 seconds, Google considers this as a good LCP performance. 
  • The LCP value between 2.5 seconds and 4.0 seconds is considered the average LCP performance and the color will be orange. You need to improve this LCP performance to pass the core web vital test. 
  • If the LCP value exceeds 4.0 seconds, you fail the core web vitals performance.

What is the Cumulative Layout Shift (CLS)?

Cumulative Layout Shift is a user-centric performance metric that measures the visual stability of your web pages in the browser. It’s noted that this CLS is a score, not measured in seconds or milliseconds rather google uses a proprietary metric that denotes how much your visual elements move around when loaded onto the user’s browser.

CLS
  • To provide a seamless experience to your user, your Cumulative Layout Shift (CLS) needs to be 0.1 or less than 0.1.
  • If the CLS score is between 0.1 and 0.25, you need to improve it to achieve a good page speed score.
  •  A CLS score of more than 0.25 indicates the website has failed the core web vital assessment.  

What is the First Input Delay (FID)?

The First Input Delay (FID) measures the interactivity of web pages. This web performance metric calculates the time from when a user first interacts with a page (like clicking a link or button) to the time the browser can respond. 

FID

Like the other two core web vitals metrics, Google categorizes the First Input Delay (FID) performance based on some threshold values. Let’s see how Google categorizes FID performance.

  • If the FID value is less than 100 milliseconds, then it is considered a good FID performance, improvement is not needed.
  • The FID value between 100 milliseconds and 300 milliseconds is considered average FID performance, and it needs to be improved.
  • Finally, the FID value exceeds 300 milliseconds, indicating your website will fail the core web vital test.

What Is Interaction to Next Paint (INP)?

Google developed a new performance metric, Interaction to Next Paint (INP), to replace First Input Delay (FID). This metric measures a web page’s responsiveness by tracking the latency of all interactions, such as keyboard interaction and clicks, that occur throughout a user’s visit.    

INP

In simple words, INP measures the time in milliseconds, focusing on how long it takes for the next visual change to happen after a user interaction. Let’s see how Google categorizes INP performance.

  • The INP value of less than 200 ms is categorized as a good INP performance.
  • If the INP value is between  200 ms and 500 ms, it is considered the average INP performance. 
  • A  more than 500 INP value indicates the website is a failure in the core web vitals assessment.

Passing Core Web Vitals: The 75th Percentile Google Recommendation

According to Google’s recommendation, to pass the core web vital assessment, your website needs to meet the specific threshold value for each metric for at least 75% of the page visits.

The Helpful Tools To Measure The Core Web Vitals Performance

Let’s mention the most helpful online tools to measure the core web vitals performance.

  • Google PageSpeed Insights 
  • GTmetrix

Measuring Core Web Vitals Metrics In Google Pagespeed Insights 

Google develops PageSpeed to analyze a website’s core web vitals performance based on two types of data: field data and lab data, and provide an overall performance score. In Google PSI, you also can see the core web vitals issues. 

google pagespeed insights
  • Field data: Google collects data from the real user’s experience on a website.
  • Lab data: this lab data is collected in the Google Lighthouse lab during the page speed insight test. 

To analyze the performance metric, you just need to click the Analyze button after entering the website’s URL. here you can see the performance score for both devices: mobile and desktop.

Core Web Vitals Test In Gtmetrix 

GTmetrix is the best alternative tool for Google Pagespeed Insight. It analyzes core web vitals performance and shows core web vitals issues. The main advantage of GTmetrix over Google PSI is that you can customize your testing. For more details, visit our previous blog. 

Gtmatrix performance

Apart from these above tools you also can use Google Search Console, Chrome DevTools, and core web vital extension to check the loading time, visual stability, and user interaction of a website.

The Importance Of Optimizing Core Web Vitals

Before moving to the optimization technique, let’s discuss the importance of optimizing core web vital performance. By optimizing these metrics, you can provide a seamless experience to your users. It also affects your Google rankings.  

  • Increasing the Average on-page Time 
  • Improving the Conversion Rate
  • Boosts Your Google Rankings

    Increasing the Average On-Page Time

    Every user expects a well-functioning website. Users are more likely to stay on a website if it takes less time to load, which indicates a lower bounce rate, increasing the average on-page time on a website.  

    Improving the Conversion Rate

    The conversion rate indicates the percentage of visitors who convert to potential leads by completing the desired action. This action includes booking an online appointment, purchasing an online product, downloading any PDF, and more.

    conversion rate

    The conversion rate is linearly proportional to the bounce rate. Therefore, optimizing the performance of core web vitals can reduce the bounce rate and dramatically increase the conversion rate.

    According to a case study, Vodafone increases the conversion rate by 8 % just by optimizing its core web vitals.

    Boosts Your Google Rankings 

    google ranking

    As we discussed earlier, Google considers core web vitals an essential factor in determining rankings. Therefore, optimizing these performance metrics can significantly improve your Google rankings and increase organic traffic.   

    What Are The Most Common Core Web Vitals Issues

    Let’s discuss the factors that cause the WordPress core web vitals issues so that you can optimize these metrics by solving the core web vitals issues. 

    The Most Common LCP Issues

    Simply, LCP calculates the initial page loading time. The most common reason for slow initial loading time is to use unoptimized images, shared WordPress hosting, unnecessary large CSS and JS files, and more.

    1. Adding Unoptimized Images

    Adding high-resolution images can improve your website’s visual appearance, but they increase the file size, which can affect page speed and bandwidth. Therefore, it takes more time to render the most significant elements on the webpage.

    1. Using A Shared WordPress Hosting

    Using shared WordPress hosting may increase the server response time. Many website owners use cheap shared hosting to save money, but it can affect their website performance by increasing the LCP time.  

    Core Web Vitals
    1. Not optimizing HTML, CSS, and Javascript Files

    Many developers prefer to use line breaks, white spaces, comments, and meaningful variable names to increase the readability of code. However, browsers don’t need to parse to render the web page. 

    Therefore, these unnecessary characters increase the HTML, CSS, and JavaScript file size and slow the initial loading time. 

    The Most Common INP Issues

    Let’s explore the most common reasons for poor INP performance, which includes 

    1. Unoptimized JavaScript Code

    Developers use JavaScript for user interaction. However, unoptimized JavaScript code can be considered a render-blocking resource due to blocking the main thread. Blocking the main thread can harm your INP performance by increasing the response time.

     unoptimized js
    1. Using too Many third-party Scripts

    Third-party scripts are often used to optimize website performance. However, these plugins also have their own stylesheets and scripting files that need to be executed during page rendering.

    3rd party script

    Therefore, using too many third-party scripts can significantly impact the website’s performance.

    The Most Common CLS Issues 

    Due to a poor CLS score, your page can be shifted during the lifespan of the page, which leads to a high bounce rate and lower conversion rate. Let’s discuss the most common CLS issues, which include:

    1. Using unoptimized web fonts:
    font optimization

    Many website owners use web fonts to customize their websites, which may cause visual distractions, such as Flash Of Un styled Text (FOUT) and Flash Of Invisible Text (FOIT). This affects user experience and increases the bounce rate, leading to a poor CLS score.

    1. Adding images without set dimensions:

    Another reason for a poor CLS score is using the images without setting the proper dimensions. Determining an image’s width and height is an essential step in maintaining layout stability.

    image element do not explied

    Without these two attributes, width and height, a browser wouldn’t set the appropriate amount of space for the image during its web page’s rendering time. Therefore, Shifting the images can also harm the page’s stability, indicating a poor CLS score.

    Optimizing Your Core Web Vitals With RabbitLoader

    After identifying the core web vitals issues, you, as a website owner, need to fix them to increase the user experience. Here we will discuss the non-coding and effortless solutions. So, let’s explore how RabbitLoader mitigates these web vitals issues.

    How Does RabbitLoader Mitigate the LCP Issues?

    • RabbitLoader optimizes images by converting them into the AVIF and WebP formats. This reduces the size of images without sacrificing their quality. This will help you reduce the page size and mitigate the “avoid enormous network payload” warnings in Lighthouse.
    • Apart from this image optimization, RabbitLoader also adds a lazy loading to increase the initial loading time by deferring below-the-fold images. 
    • RabbitLoader generates a separate file for the critical CSS and reduces the initial loading time by almost 90-95%, improving the LCP performance.
    LCP performance  Improvement, core web vitals
    • By adding the browser caching mechanism, RabbitLoader stores a website’s static assets and reduces the server response time. By doing so, you can easily mitigate the most common PSI warning “reduce initial server response time”.
    • Through its in-build premium Content Delivery Network (CDN), RabbitLoader distributes the frequently assessed resources into the proxy/ edge server.
    • RabbitLoader reduces the size of HTML, CSS, and JavaScript files by deleting unnecessary characters from the coding file. This is known as the minification process. Thus, the execution time would automatically reduce, improving the loading time.

    How Does RabbitLoader Improve the Performance of INP?

    • As discussed, a large JavaScript file is the main culprit of the poor INP score because it would block the main thread. So RabbitLoader defers the JavaScript functions which are not required for the initial page rendering time.
    • RabbitLoader allows multi-threading, which means if the main thread is busy we can use other threads simultaneously
    INP improvement, core web vitals

    By allowing multi-threading in JavaScript, RabbitLoader can easily resolve the most common warnings, such as “minimizes main-thread work,” “avoid long main-thread tasks,” and “reduce initial server loading time.” 

    • RabbitLoader mitigates the “remove unused CSS” warning by removing the CSS rules or styles that are not utilized on the website. Therefore, it would automatically improve the website’s initial server response time by improving the INP performance.

    How does RabbitLoader increase the CLS score? 

    RabbitLoader helps you to improve the user experience by improving the CLS score. Let’s see how.

    CLS increase
    • When you are using RabbitLoader, it automatically resizes your images for each screen size to prevent the shifting issue, improving the CLS performance as well as the user experience. 
    • The advantage of using RabbitLoader is that it can load images and videos with a loading animation, which helps to minimize slow-loading content. 

    Conclusion

    You need to optimize a website’s Core Web Vitals in order to increase the page’s responsiveness, visual stability, and loading speed. This can improve user experience and help boost conversion rates.

    By improving the core web vitals, you can mitigate Google Pagespeed Insights‘ common warnings such as “removed unused CSS,” “minimizes main-thread work,” “avoid long main-thread tasks,” “reduce initial server loading time,” “avoid enormous network payloads.” 

    If you also come across the above warnings and you are trying to mitigate these by optimizing core web vitals, don’t waste time on unfruitful solutions. Install RabbitLoader and provide a seamless experience to your users in just a couple of minutes.

    Document

    Get The Best PageSpeed Score

    For Your WordPress Website

    All in One Optimization Plugin
    No Coding Knowledge Required