How to Optimize Interaction to Next Paint (INP)

Our Core Web Vitals journey is coming to an end — we’ve already discussed LCP and CLS.

In this article, we will focus on the Interaction to Next Paint (INP) metric and how to optimize it.

Let’s get started!

Overview

The INP measures the interactivity of the page.

How is INP measured?

INP tracks the latency of all interactions (clicks, taps, keyboard input, etc.) of a page throughout its lifespan, and reports the longest duration (ignoring outliers).

A low INP value means the page is highly responsive toward user interaction.

What’s a good INP?

INP is measured in milliseconds (ms).

Anything below 200ms is Good. Anything between 200ms and 500ms Needs Improvement. Lastly, 500ms or higher values are considered Poor.

What affects INP?

The main causes of poor INP are:

• inefficient code that blocks the main thread, which is responsible for rendering a web page

• interactions that require a lot of processing time which results in delayed responses

• not responding to an interaction

Steps to Optimize INP

Now that we know what can cause poor INP, we can discuss what can we do to improve it!

The steps are pretty simple:

• Minify your files and enable GZip compression. This results in a smaller bundle size and thus reduces loading time.

• Optimize your code. Pay attention to the complexity of the code that is executed in response to the user’s interaction.

• Use web workers to transfer some of the workload from the main thread to these independent background services.

• Break down long tasks into smaller ones. One way to do this is by using the setTimeout built-in JavaScript function that schedules a specified task to run after a certain delay in milliseconds.

• Provide feedback as soon as possible. Some interactions may require more time to process. In such cases, provide immediate initial feedback, like a loader or a message. This lets users know that the page has received and is processing their request.

Conclusions

In this article, we discussed how INP is measured, what affects it, and how to improve it.

This is the last article in the Core Web Vitals series. If you made it this far, congratulations!

Thank you for reading!