Interaction to Next Paint: What Is It & How To Do It?

Have you ever experienced a slow and unresponsive website or app?

Perhaps you clicked a button and it took forever for something to appear on the screen. That’s a frustrating experience, right?

That is exactly what “Interaction to Next Paint” (INP) is about.

Interaction to Next Paint (INP) is an emerging metric that Google uses to evaluate how quickly your website responds to user inputs. On March 12, 2024, it became one of the Core Web Vitals criteria that impact Google rankings.

Why does this matter?

People in today’s digital age want things to happen instantly. If a website or app does not respond fast to your actions, you will likely become dissatisfied and quit. Nobody has time for slow apps nowadays!

So optimizing INP is important for providing a smooth, wonderful user experience that keeps people interested and satisfied. The lower the INP, the higher the perceived performance of your website or app.

So, let’s look at INP in depth and how to measure it to improve your existing score.

What Is Interaction to Next Paint (INP)?

Interaction to Next Paint (INP) is a web performance metric that counts the time between a user interaction (such as a click, tap, or scroll) and the next time pixels are painted on the screen as a result of that interaction.

In simple terms, INP measures how quickly a web page or application visibly responds to user interaction. A lower INP number indicates a more responsive experience, whereas a higher INP value indicates a noticeable delay between the user’s action and the visual update on the screen.

For most user interactions, the suggested INP value is less than 200 milliseconds (ms). An INP value of more than 300ms is regarded as poor and will be seen as slow by users

Interaction to Next Paint as a Core Web Vital

Interaction with Next Paint was introduced as one of the three Google Core Web Vitals metrics on March 12, 2024. It replaced the previous First Input Delay metric.

As a Core Web Vitals metric, poor Interaction with Next Paint may influence your Google search rankings.

How Does the Interaction with the Next Paint Differ From the First Input Delay?

INP is the successor measure of First Input Delay (FID). Both are responsiveness metrics.

FID and INP vary in two ways:

• FID only measures the first processing delay, whereas INP measures the whole length of time between user input and UI update.
• FID simply counts the initial user interaction on a page, but INP considers (approximately) the greatest latency.

First Input Delay estimates how long it takes the browser to begin processing user input. The actual time spent responding to events or changing the user interface is not included.

As the name implies, FID only analyses the initial interaction the user has with the website. This first contact may not be reflective of the total user experience, particularly for sites that remain open for an extended time, such as single-page applications.

Interaction with Next Paint typically evaluates the worst input latency on the page. However, if there are a lot of user encounters, outliers will be discarded, and Google will evaluate the 98th percentile for interaction delay.

So, if a page’s INP is 250 milliseconds, 2% of user interactions had a latency greater than that.

How Interaction to Next Paint (INP) Works?

INP is a responsiveness metric that focuses on the amount of time between user interactions. It evaluates how quickly a web page element responds when you perform a certain action on it.

Here is how INP works:

• A user interacts with a web page by clicking on a button.
• The browser requests the web server for new content.
• The web server delivers fresh content to the browser.
• The browser displays the new content on the page.
• The browser calculates the time required to create the new content and reports it as the INP score.

A low INP rating indicates that the page is extremely responsive to user input. As part of Core Web Vitals, INP is significant for the following reasons:

• Improved the user experience: A high INP score indicates that visitors must wait a long time for the web page to respond to their activities, which can be annoying.

• SEO (Search Engine Optimisation): INP and other Core Web Vitals are part of Google’s page experience signals, which influence a website’s ranking on search results pages. This emphasizes the importance of the INP SEO metric.

• Lower the bounce rate: Slow loading times might cause customers to quit the page, reducing your company’s bottom line.

How is INP Measured?

INP monitors the time that passes between user input, such as clicks and keystrokes, and the next UI update. This delay has three components:

a. Input Delay

Waiting for background operations on the website to prevent the event handler from running.

b. Processing Time

Executing event handlers in JavaScript.

c. Presentation Delay

Dealing with other pending operations, recalculating the page layout, and painting page content. INPs are measured in milliseconds (ms). A good benchmark is less than 200 ms, and anything between that and 500 ms is considered in need of improvement. 500 ms or greater is considered poor.

Several variables can influence an INP value, including the size and complexity of a web page, as well as the amount of JavaScript and CSS files loaded.

You may use many tools to evaluate Interaction to Next Paint, such as:

• DebugBear’s Website Speed Test
• Google Page Speed Insights
• Our Site Speed Chrome Extension
• INP Debugger
• Google Search Console
• The Web Vitals Library

Website speed testing tools can help you determine a website’s INP value. This sort of application can offer information about how your Core Web Vitals metrics are doing and how to optimize for them.

Google PageSpeed Insights is a popular tool for analyzing INP and website performance. It will assess a site and make recommendations for best practices to apply. You can also examine how fast your website loads on mobile and desktop devices.

PageSpeed Insights presents two types of findings. The top part displays a site’s Core Web Vitals metrics from the Chrome UX report, a collection of real-world performance metrics from Chrome users.

The values shown in the report below are from a controlled lab setting that uses Google Lighthouse. This data may be used to test new features before they go live.

If the site’s INP data is unavailable, look into its Total Blocking Time (TBT). This metric evaluates a new form of responsiveness. It focuses on how long a website cannot respond to user interaction while loading.

Towards the bottom, there are ideas on how to enhance the Core Web Vitals metrics, as follows:

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

So, to optimize INP, you want to simplify and prioritize the to-do list for the main thread as much as possible. Here are some major strategies and ways to optimize for improved Interaction to Next Paint (INP) values and increase responsiveness:

a. Improve JavaScript Performance

JavaScript is a key component of many websites. It offers many interactive elements, however it can also slow down the site’s speed.

When JavaScript is carried out, it runs on the main thread, which is responsible for producing a web page. If the code is inefficient, it may stop the thread and prevent the website from responding to user input.

To improve responsiveness, optimize your JavaScript. You can achieve this by:

• Minifying JavaScript files: It will lower the amount of JavaScript, allowing it to load quickly.

• Enable GZip compression. Another common way for compressing website files and data.

• Using JavaScript framework. This tool can help you organize your JavaScript code and make it more efficient. AngularJS and jQuery are well-known examples.

• Using CDN. This technology, which stands for content delivery network, will distribute your JavaScript files from servers near your target audience, resulting in faster loading times.

Inefficient JavaScript can block the main thread and cause rendering to be delayed. Code splitting, lazy loading, the use of web workers, and avoiding long-running operations on the main thread are all options to decrease JavaScript delay.

b. Use Web Workers

Web workers are a service that allows JavaScript to operate separately from the main thread. They are handy for running complicated tasks in the background.

Suppose you have a WordPress website loaded with photos, videos, and data. Web workers may shift these expensive JavaScript operations to a background thread, preventing your interface from stalling.

Another way to avoid the main thread holding up is to divide large JavaScript jobs into smaller ones.

c. Breaking up Long Tasks

Breaking up large tasks allows the web browser to handle them in smaller parts at a time. As a result, the main thread is free to carry out more important duties.

As you are aware, lengthy tasks block the main thread, preventing the browser from performing interaction events. To improve your site’s responsiveness, reduce the strain on the main thread and try splitting up large operations.

By splitting down large activities into smaller bits, the main thread can perform other jobs and respond to user interactions more rapidly.

Also, breaking up long tasks helps to minimize the “jank” effect, in which animations and transitions on the website become jerky or stutter owing to an overloaded main thread. By ensuring that each activity is completed in a shorter amount of time, the website may provide a more seamless visual experience to the user.

d. Prioritize Input Readiness

Input readiness refers to a web page’s ability to respond to user interaction. When it isn’t, it typically signifies that the browser’s main thread is occupied with other duties.

Here’s how to prioritize input readiness and boost INP:

1. Non-critical JavaScript Will Be Deferred

Some JavaScript is not required for the first-page load and can be run after the main content. This enables the main thread to prioritize user interactions and increase overall page responsiveness.

2. Throttling

This strategy determines the frequency with which a function is executed. For example, as a user scrolls down, the same code might be executed hundreds of times per second. Throttling allows it to only run once per millisecond or so, regardless of how many times the event is triggered. 

3. Debouncing

This prohibits a function from executing again until a certain period has passed. For example, when users resize their browser window, this event may initiate the same procedure many times. Debouncing can be used to defer execution until the user stops resizing for a predetermined period.

4. Event Listeners Who are Not Actively Participating

Event listeners are computer constructs that detect certain events, such as scrolling and tapping. Making them passive instructs the browser to skip waiting for a certain function to complete and instead move on to other activities.

e. Provide Immediate Feedback

Certain activities, such as completing a form with several data inputs, may result in major response delays.

That’s where instant feedback comes in. This strategy offers customers a visible indicator that the website has received and is processing their request.

Users will not be left wondering if the website has logged their input if they receive rapid feedback. It can provide the impression of faster performance even if it does not cut processing time.

Check out these instances of quick feedback cues:

1. Load Indicators

Display a spinner or a progress bar when a process is running, especially when presenting data or switching to a new page.

2. Pop-up Acknowledgment Messages

It is a good idea to display a message confirming that an operation, such as adding an item to a cart, was completed successfully.

3. Form Field Validation

For example, if a user enters an improperly formed email address, display an error notice immediately rather than waiting until the form is submitted.

Conclusion

At the end of the day, presenting a great user experience on the web comes down to one thing: responsiveness. The speed at which your website or app responds to user events like clicks, taps, and browsing can determine whether it is enjoyable to use or frustratingly slow.

That is why optimizing for a quick Interaction to Next Paint (INP) time is so important. INP monitors the important minutes between when someone interacts with your website and when they receive the visual confirmation on their screen. The lower the INP, the faster and more responsive everything seems.

So go ahead and unlock the power of optimized INP!

Uncover the quick responsiveness that differentiates average websites from those that seem luxuriously fast and smooth. Your users’ satisfaction and the success of your digital experiences are both dependent on this.

FAQs

1. Why is INP important?

INP has a direct influence on the perceived responsiveness and smoothness of a website or online application. A low INP indicates that the site is speedy and responsive, whereas a high INP results in a slow, unresponsive experience that might frustrate consumers.

2. What is a good INP value?

For most user interactions, an INP value of less than 200ms is regarded as satisfactory and delivers a smooth experience. Values between 200 and 500ms require improvement, and anything beyond 500ms would certainly seem sluggish to consumers.

3. How can I optimize for better INP?

 Key optimizations include efficient JS, code splitting, layout confinement, virtualizing lists, rendering hints, web workers for high-value jobs, and prioritizing interface readiness.

4. Is INP a laboratory or field metric?

INP is a field metric, which means it is derived from actual user interactions and sessions in production situations.

5. How can I determine INP for my site?

Browser developer tools such as Chrome DevTools, web-vitals add-ons, and performance monitoring services can provide INP numbers from real-world user sessions.