Measure and Improve Interaction to Next Paint (INP)

Google has introduced a new metric called Interaction to Next Paint (INP) that measures how quickly your website responds to user interactions. In March 2024, it will be one of the Core Web Vitals metrics that affects Google rankings.

In particular, Google replace First Input Delay (FID) in March 2024 with Interaction to Next Paint (INP).

So What is Interaction to Next Paint, How is it different from FID, and what can be done to make it better ? I will guide you all in this post.

What Is Interaction to Next Paint (INP)?

Interaction to Next Paint (INP) is a responsiveness metric from Google that measures how quickly your web page responds to user interactions.

It specifically focuses on the time it takes for a user's input to result in a visual response on the screen.

Low INP detracts from the user experience, which raises the possibility of a higher bounce rate and, eventually, lost sales.

Explain Interactions

The term interaction in the context of INP refers to any user action that triggers a change on the webpage. These interactions can include:

Clicking on buttons, links, or other elements.
Scrolling through content.
Typing in input fields.
Hovering over elements.

In summary, an interaction encompasses any activity that engages with the webpage and prompts a visual change. The goal is to ensure that these interactions happen smoothly and without noticeable delays for an optimal user experience!

Comparing FID to INP

Let’s compare First Input Delay (FID) and Interaction to Next Paint (INP):

1. First Input Delay (FID):

FID measures the delay between a user’s first interaction (e.g., clicking a button) and the browser’s response.
It reflects how quickly a page becomes interactive after a user action.
FID should be less than 100 milliseconds for a responsive experience.
Optimization: To improve FID, optimize JavaScript execution, reduce main-thread work, and prioritize critical tasks.

2. Interaction to Next Paint (INP):

INP Measures the time between a user’s interaction and the next visual update on the page.
It ensures a smooth transition from user input to visible changes.
INP should be 200 milliseconds or less.
Achieve this by optimizing event handlers and minimizing main-thread workloads.

In summary, both FID and INP contribute to a better user experience by reducing delays and providing responsiveness. While FID focuses on the initial interaction, INP considers subsequent visual updates. Web developers should aim to optimize both metrics for optimal performance!

What Is a good Interaction to Next Paint (INP) score?

An Interaction to Next Paint (INP) score measures how quickly a webpage responds to user interactions. It’s an essential metric for assessing web performance. Here are the thresholds for INP scores:

An INP below or at 200 milliseconds is considered good, indicating that your page has responsive interactions.
Scores between 200 and 500 milliseconds are okay but could benefit from improvement.
Anything exceeding 500 milliseconds should be addressed as a significant web performance problem.

Remember, a lower INP indicates better responsiveness, enhancing the overall user experience!

Why Is Google Switching to INP?

In March 2024, INP will take the place of FID as one of Google's three Core Web Vitals metrics. The other two metrics are Cumulative Layout Shift, which determines whether the page layout remains stable after loading, and Largest Contentful Paint, which gauges how quickly a page's main content appears.

According to Google, 90% of a user's time on a page is spent after it loads, based on Chrome usage data. This means that measuring the delay until the first event on a page (FID) is insufficient; instead, we must measure the delay for each interaction that takes place (INP).

Essentially, FID lost its ability to measure delays, which meant it was less accurate in identifying negative user experiences.

How to Measure and Improve Interaction to Next Paint (INP)?

A few tools are available for measuring Interaction to Next Paint, such as:

Measure Your INP with the web vitals library in javascript

The web-vitals library can be used to measure INP programmatically in JavaScript. By doing this, you can get measurements from actual users and provide them back to your analytics company.

Using a script tag, you can load the library in this way:

<script src="https://unpkg.com/web-vitals@3/dist/web-vitals.iife.js">

You can then use the onINP method on the webVitals object to see when the Interaction to Next Paint value changes.

webVitals.getINP(function (info) {
  console.log(info)
}, { reportAllChanges: true });

Optimize Interactions

1. Minimize JavaScript Runtime

Reduce the number of JavaScript scripts on your pages and give the most important ones priority.
To minimise their size, minify and compress JavaScript files.
For non-essential scripts, use asynchronous and deferred loading to prevent blocking the main thread.

2. Optimise Layout and CSS

Reduce amount of time required for layout computations, minimise and optimise CSS.
Avoid clear of superfluous or excessive CSS, as this could cause rendering to lag.
To stop layout thrashing, make CSS transitions and animations more efficient.

3. Compress and Optimize Images

Images can be compressed to save file size without sacrificing quality.
Make use of contemporary image formats with improved compression and performance, such as WebP.
Use responsive image design to present the right size image according to the user's device.

4. Reduce DOM size

Avoid poorly coded plugins and themes
Minimize JavaScript-based DOM nodes
Move away from page builders that generate bloated HTML
Don’t copy/paste text into the WYSIWYG editor
Break down your one-page website into multiple pages
Don’t hide unwanted elements using display:none
Avoid using complicated CSS declarations and JavaScript

5. Avoid excessive or unnecessary work in requestAnimationFrame callbacks

By calling a designated function just prior to the subsequent repaint, the browser is informed that you want to perform an animation through the use of the requestAnimationFrame method.

Before the next frame can be shown, the requestAnimationFrame() callback, which is a component of the event loop's rendering phase, must be completed. It is important to realise that you may be delaying the rendering of the next frame if you are using requestAnimationFrame() for tasks unrelated to UI changes.

6. Avoid Large, Complex Layouts and Layout Thrashing

Rendering times may be slowed down by intricate layouts with nested elements. To enhance rendering performance, reduce superfluous nesting and simplify your page structure. Furthermore, take note of layout thrashing, which occurs when reflows are triggered repeatedly by frequent changes to element dimensions. Combine batch updates to reduce layout thrashing and improve efficiency.

7. Balance Client-Side Rendering

Although client-side rendering (CSR) can offer dynamic and interactive experiences, if not used carefully, it may have an adverse effect on performance. Depending on your particular use case, strike the ideal balance between server-side rendering (SSR) and CSR. Make use of methods such as caching, code splitting, and effective data fetching to maximise performance when rendering on the client side.

8. Prioritize Critical Resources

Use resource hints (e.g., preload, prefetch, etc.) to prioritize the loading of critical resources.
Preload CSS and JavaScript required for rendering above-the-fold content.

9. Continuous Improvement

Remain up to date on the most recent recommendations for optimising websites and best practices.

Keep abreast of Google's performance improvement guidelines and Core Web Vitals.

Optimising a website's performance is a continuous process. As a result, you must constantly review and learn how to improve your website's INP and other CWV metrics.

Conclusion

First Interaction Delay (FID) will be replaced in 2024 by a new Core Web Vitals metric called Interaction to Next Paint (INP). It shows you how quickly a user engages with your website. Less time between events improves performance.

Since Google's ranking algorithm takes Core Web Vitals into account, I highly advise you to optimise your INP by lowering CPU processing on your website by implementing the above-mentioned strategies.

While you're at it, check out my other recommendations for speeding up your website and enhancing user experience, as well as Core Web Vitals.

Techstackkit