How To Find & Fix Interaction to Next Paint (INP) Issues

Core Web Vitals are a set of three metrics that measure a webpage’s performance based on the speed, interaction and stability. These metrics are considered important factors for search engine optimization (SEO).

Core Web Vitals Three Metrics Are:

1. Largest Contentful Paint (LCP)
2. Cumulative Layout Shift (CLS)
3. Interaction to Next Paint (INP)

Improving these metrics help’s user to rank their website high on the search results. Each metric has set of rules and properties to improve it.

What Is Interaction to Next Paint (INP)?

Interaction to Next Paint (INP) is a metric that tracks the time when the interacts with a page (such as: clicking on buttons with a mouse, tapping on a device with mobile). Once the user interaction is done, we get the interaction time.

For examples, if a user enters the webpage and performs these interactions:

1. Clicks drop down, Next paint occurs 60ms.
2. Clicks the Login button, Next paint occurs 80ms.
3. Click the Submit button, Next paint occurs 300ms.

The INP measurements for this particular session would be 300ms to match the slowest response time.

Interaction to Next Paint (INP) Values

As per Google’s documentation:

1. INP below or equal to 200 miliseconds means that your page has good responsiveness.
2. INP below above 200 miliseconds and below or equal to 500 miliseconds means that your INP needs improvement.
3. INP above 500 miliseconds means that your INP is poor.

How To Find INP Issues

Step 1: To find the INP issue, reload the website, then select the inspect tool and go to the performance tab and select 3G from the Network dropdown and click on Enable advanced paint instrumentation. Now, click on the record button.

Step 2: Click on the burger icon, subscribe button and scroll down the page and click on other clickable event items. Once the actionable items are done, click on the stop button.

Step 3: Now, check the interaction field, here we will see all the interaction results that we performed. Each interaction results will appear here, hover over the bars and check the results of the INP.

How to improve your INP

• Split the large tasks: The tasks that take more than 50ms, break them into multiple tasks.
• Optimise and Remove JavaScript: Remove the un-necessary javascript code and minify it.
• Avoid third-party scripts: Try to avoid the external scripts and write the custom code, that would save the redundant amount of code what we receive in the external scripts

Once, these changes are implemented as suggested, you would see improvement in your INP issues.