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.

Google Pagespeed Insights: The Ultimate Guide To Boost Your Pagespeed With The 7 Most Powerful Strategies

Are you struggling with a low pagespeed insights score?  A low pagespeed score often leads to poor user experience which in turn results in a low conversion rate & lower SEO rankings.

Don’t worry! You are not alone. A lot of website owners are struggling to improve their pagespeed insights score. Let’s discuss the pagespeed insights score and the powerful strategies to improve this. 

If you are not from a coding background, that’s perfectly fine. As we will mention the solutions that can be implemented by non-coders like you and me

What is Google Pagespeed Insights?

Google PageSpeed Insights (PSI) is a tool developed by Google, that measures the pagespeed of your website. It analyzes your website’s pagespeed performance for the desktop version and the mobile version and scores on a scale of 0 to 100.

Google PageSpeed Insights also suggests how to improve the pageSpeed score. It provides both lab and field data about your website. Lab data is used for debugging issues whereas field data is useful for real-world user experience.

What are the Core Web Vitals?

Core Web Vitals are a set of performance metrics developed by Google, used to measure the user experience for loading performance, visual stability, and interactivity of your web pages. 

Let’s take a look at the three pillars of core web vitals

1. Largest Contentful Paint (LCP)
2. First Input Delay (FID) is now replaced with Interaction to Next Paint (INP).
3. Cumulative Layout shift(CLS) 

• Largest Contentful Paint (LCP):

The Largest Contentful Paint (LCP) is the user experience (UX) metric, which measures how long it takes to render the largest piece of content in the visible area. The largest content can be:

• Images
• Video poster images (images that are shown to the user before loading the video)
• Background images
• Block-level text

In order to pass the Core Web Vitals assessment, your website should have a Largest Contentful Paint (LCP) of 2.5 seconds or less. Whereas if a user waits more than 4 seconds on your website to see the content, that indicates a poor user experience.

• First Input Delay (FID):

First Input Delay (FID), also referred to as Input Latency, is used to measure how long it takes for your web page to react to the first interaction. 

In simple words, it is the measurement of the time that occurs between when a user interacts with your website and when their browser responds. 

According to Google, a score of less than 100 milliseconds is considered a good score whereas a score is more than 300 ms is a poor score.

Important Note: In March 2024, FID was removed as a Core Web Vital. It is replaced by a stable Core Web Vital metric INP (Interaction to Next Paint).   

• Interaction to Next Paint (INP):

Interaction to Next Paint (INP) is a newly launched performance metric by Google that is used to measure user interface responsiveness.

In simple words, Interaction to Next Paint focuses on measuring your web page’s response according to user interaction with the website.

Similar to the other performance metrics, the INP score can be in one of the three thresholds. A good INP value should always be within 200 milliseconds.

• Cumulative Layout shift(CLS):

Cumulative Layout Shift (CLS) is one of the pillars of Core Web Vital metrics that calculates the shifting of the webpage’s elements while the page is being loaded and rendered.

In simple words, Cumulative layout Shift is used to determine the visual stability of a web page from a user perspective by considering the below factors:

• Layout shift
• Impact fraction (how an unstable element impacts the visible area between two frames)

You should strive to reach your CLS score within 0.1 to provide your audience with a better user experience.

Other performance metrics are present that impact your website’s pageSpeed insights performance.

• First Contentful Paint (FCP):

First Contentful Paint (FCP) is a user-centric metric that is used to measure how long it takes for a user’s browser to load DOM elements (images, videos, text, etc) of your web pages.

• Speed Index (SI):

Speed Index (SI) is a web page load performance metric, that measures how quickly the contents of your web pages are visibly populated. SI is dependent on the size of the visible area.

• Total Blocking Time (TBT):

Total Blocking Time (TBT) measures how long your web page responds to specific user input. Several factors can be the reason for TBT like poorly optimized code, excessive plugin use, server performance, and large file sizes.

• Time to First Byte (TTFB):

Time to First Byte (TTFB) measures the time between a user’s browser requesting your web page and when it receives the first byte of information from the server. Different factors that can reduce your TTFB score: slow DNS lookups, SSL connection, and so on.

• Time to Interactive (TTI):

Time to Interactive (TTI) measures the amount of time your website has been rendered and is ready for user input. The factors that significantly impact TTI are excessive resource requests and large resource sizes.

Why is Google Pagespeed Insights score important for your website?

Let’s dive into the importance of a high Google PSI score for your website.

1. User Experience

A higher pagespeed Insights indicates a fast-loading website, which leads to a better user experience for your visitors. A user is more likely to engage with your website’s content and stay longer on your website. It will increase the average on-page time of your website.

2. SEO Ranking

Google considers the pageSpeed as one of the important factors in its ranking algorithm. A fast-loading website tends to rank higher in  SERPs (Search Engine Results Pages), which can boost organic traffic.

3. Conversion Rate

The conversion rate measures the percentage of visitors who convert to lead. A fast-loading website can positively impact conversion rate, as users are more likely to complete the desired action.

The desired action might be completing a purchase, downloading an ebook, filling up a form, signing up for a trial, booking a demo, subscribing to a course, or something else.

How to Measure Your Website’s PageSpeed Insights Score?

PageSpeed can be measured easily in Google  Pagespeed Insights (PSI). Let’s dive into the process of measuring PageSpeed in Google PSI.

Step 1: Go to Google PageSpeed Insights. Enter any web page’s URL and click on Analyze.

Step 2: After analyzing the web page’s page speed performance, It will provide a mobile score as well as a desktop score based on the overall performance of the core web vital matrix. 

Step 3: you can also see the suggestion for improvement of the pagespeed performance.

What is considered a good PageSpeed Insights Score?

1. If the PageSpeed insights score is greater than 90, it is considered a good score.

2. A Pagespeed insights score between 50 to 89 indicates the webpage’s pageSpeed performance needs to be improved.

3.  A pagespeed insights score of less than 50 is categorized as a poor score. It means the web page fails the site speed test.

The Chrome User Experience Report (CrUX) dataset provides Real-user experience data in Google PSI. PSI reports are based on real users’ FCP, LCP, FID,  CLS, SI, TBT, and TTI experience.

Let’s see the weightage of each performance metric for Google pagespeed insights.

There are several alternative tools are also available like GTmetrix, and Lighthouse that you can use for website speed tests. 

The difference between Pagespeed insights vs lighthouse

While Google PageSpeed Insights and Google Lighthouse, both tools are used for pagespeed performance, their scores differ based on certain factors. Let’s understand these performance factors and how they make the score different. 

7 ways to improve your website’s pagespeed score?

Now, you have a brief idea about Google PageSpeed Insights score. Also, you have seen the importance of a high pageSpeed insights score. Let’s dive into the strategies to improve the page speed performance by optimizing the website performance.

1. Optimization of all images is the most effective way to improve your website’s pagespeed score:

Images are the most powerful form of communication. An image can convey a message very quickly. So, for any website, images are one of the essential resources.

However, large-sized images can decrease the pagespeed insights performance score by increasing the load time of the web page. 

To improve the website’s pagespeed performance, you need to reduce the image size as much as possible. You can convert your large image files to WebP, AVIF format.

If your website has 10 images of 2 MB, that indicates a total of 20 MB images need to be downloaded. But when these images are converted in WebP and AVIF, it will likely reduce the total size to a maximum of 500 KB. so, automatically the page loading time will be reduced.

RabbitLoader converts your large PNG and JPEG images into modern webP and AVIF formats. It will compress the images without losing quality. You don’t need to optimize the images one by one. Bulk image optimization will be done automatically when you are using RabbitLoader. 

If you have a WordPress website, you just need to install and activate this plugin. Apart from the WordPress website, RabbitLoader is also available in Woo-Commerce, Shopify, PHP, and Laravel websites.

2. Minification of HTML, CSS, and JavaScript files can reduce page loading time:

HTML, CSS, and JavaScript are the fundamental elements of any web page. HTML creates the content of a webpage whereas CSS Stylshhets make the webpage stylish. And finally, JavaScript is used to make the webpage interactive.

Usually, the file sizes become large due to unnecessary uses of spaces & comments in the code to make the code more readable. These large files increase the page load time.

Minification is the process of removing all unnecessary spaces, Comments, and characters from a file. When a file is minified, the file size will reduce, which leads to a faster loading website. 

The best way to effortlessly minify these files is by using RabbitLoader if you don’t have any coding knowledge. RabbitLoader will manage this minification of your HTML, CSS, and JavaScript files.

3. By enabling lazy loading you can improve your pagespeed insights score:

RabbitLoader will also help you to speed up your website by enabling lazy loading. Lazy loading (also known as on-demand loading) is an optimization strategy to improve the website’s performance if your website has a lot of images. 

Instead of loading the entire webpage, Lazy loading only renders the images that are visible above the fold. 

Lazy loading also is applied to other media files such as videos, and the webpage’s content like text as well as comments. 

4. Using browser cache to speed up your website:

Browser caching is the most common optimization technique. Browser caches temporarily store the static resources of a web page such as HTML files, CSS Stylesheets, images, and scripts. So, the browser doesn’t need to load from the first to render a web page. 

Let’s understand with an example.

Implementing a browser cache manually requires a lot of time as well as effort. There are several cache plugins available like RabbitLoader, W3 total cache, and many more. 

However, when you are using RabbitLoader for other optimization techniques, then why do you invest extra money in other cache plugins? RabbitLoader will also take care of this browser caching.

5.  By Generating Critical CSS you can improve your website’s performance:

Eliminate render-blocking resources, the most popular warning in Google Pagespeed Insight can be fixed by generating critical CSS.

When a browser encounters a CSS stylesheet in HTML files, it typically blocks the rendering process. Not all CSS stylesheets are needed in the viewport. That’s why it’s crucial to generate critical CSS for your web page to boost PageSpeed.

But, how to create Cricial CSS to speed up your website?

Don’t worry! RabbitLoader automatically grabs the required CSS to visualize the view-port content and inlines it. By creating critical CSS files for every web page, RabbitLoader optimizes the CSS stylesheet size with a 98% improvement. 

As a result, you can achieve a good Google PageSpeed Insights score. Without generating critical CSS, you can’t achieve a 90+ pageSpeed score.

In the above picture, you can see that RabbitLoader optimizes an original CSS file (2.35 MB) into just 35.03 KB by generating critical CSS, indicating it reduces the CSS File’s size by 98 %.

6. Deferring JavaScript can improve the performance metrics:  

Though JavaScript plays a crucial role on a website, it is not the critical piece in the first place, especially when we are talking about page loading speed.  

<!DOCTYPE html>  
<html>  
<head>  
<script src = "myscript.js" defer>  
</script>  
  
</head>  
<body>  
<div>  
<h1> RabbitLoader.com </h1>  
<h3> This is an example of defer attribute.  </h3>  
</div>  
</body>  
</html>  

RabbitLoader uses the defer attribute to indicate your script will only execute after rendering the Web page. Deferring JavaScript can improve FID, TBT, and TTI metrics.

So, your website’s pagespeed will automatically improve.

Check Also: PageSpeed Optimization Services

7. Use Content Delivery Network (CDN) to Reduce Network Latency:

A physical distance between a user and the origin server can be the reason for latency. RabbitLoader’s integrated Content Delivery Network (CDN) reduces this distance by distributing static content across the edge servers worldwide. So, the page loading time will automatically decrease.

Without CDN

With CDN

Conclusion

If your website’s Google PageSpeed Insights score is poor, you need to improve this score by speeding up the website for a better user experience as well as SEO rankings. Here, we have suggested the most powerful strategies to reduce the loading time.

If you are not from a coding background, you must use some page speed optimization plugins to achieve a good PSI score. Also, it’s important to keep in mind that using too many plugins can reduce the page load time.

The solution is here. When you are using RabbitLoader, no other optimization tools are required to boost the pagespeed insights data.