When it comes to page speed, you will hear a lot of acronyms like SEO, FID, FCP (First Contentful Paint), and Interaction to Next Paint (INP).

Google is in the process of Core Web Vitals update right now.

It has added INP (Interaction To Next Paint) and TTFB to the mix (Time to First Byte).

INP means how the page responds to specific user actions that are programmed into the overall INP metric. Google Chrome’s lab data and field data are used to measure this metric.

What is Interaction to Next Paint (INP)?

Interaction to Next Paint (INP) is a new and old experimental metric that measures how responsive a webpage is to all its interactions.

With a low Interaction with Next Paint, the page will always be able to respond.

To figure out the Interaction to Next Paint metric, the differences between what the user did and how the page looked afterward are saved.

The final Interaction to Next Paint (INP) metric will be the 98th percentile of all the interactions.

The Mechanics Of INP

(JavaScript) is usually the first sign that something is happening on a page.

There are other kinds of interactivity, such as radio buttons, check boxes, the HTML details<> element, and more.

INP, on the other hand, looks at the following kinds of interactions:

• You can do a mouse click to create an interaction.
• Any tap on a touch-screen device that interacts with a feature.
• When a key on a physical keyboard or an on-screen keyboard is pressed.

Several things could be called interactions. 

What’s a “good” INP value? 

Putting labels like “good” or “bad” on a responsiveness metric is hard. On the one hand, you want to promote ways of developing that put good responsiveness first.

On the other hand, you have to consider that the capabilities of the devices people use vary a lot to set realistic development goals.

To make sure you’re giving users well, responsive experiences, the 75th percentile of page loads recorded in the field, broken down by mobile and desktop devices, is a good measure:

• Your page responds well if your INP is at or below 200 milliseconds.
• If your INP is between 200 and 500 milliseconds, your page needs to be more responsive.
• If your INP is more than 500 milliseconds, your page doesn’t respond quickly enough.

Difference between Interaction To Next Paint and FID

INP looks at all page interactions, but First Input Delay (FID) only looks at the first one. It also only measures how long it takes for the first Interaction to happen, not how long it takes for event handlers to run or how long it takes to show the next frame.

Since FID is also a measure of how quickly page loads, the idea behind it is that a page has made a good first impression if the first Interaction during the loading phase has little or no noticeable input delay.

INP is about more than just how you look at first. By taking a sample of all interactions, responsiveness can be thoroughly evaluated. It makes INP a more accurate measure of overall responsiveness than FID.

How does INP (Interaction to Next Paint) work?

When a visitor clicks or taps on a page, that is an interaction. Because of that Interaction, the way things look on the screen might change.

The Interaction measures the time between the click and the presentation to Next Paint (INP).

The latency of a single interaction is the most extended duration of any event part of the Interaction. It is measured from when the user interacts with the page until the next frame is shown after all the event handlers have run. The total length of time is the sum of the following:

The input delay is how long it takes for event handlers to run after a user interacts with a page.

The processing time is the total amount of time it takes to run the code in the event handlers linked to it.

The presentation delay is the time between when event handlers finish running and when the browser shows the next frame.

How to improve INP?

If your website’s INP values are below the “good” threshold, you’ll want to figure out what you can do to improve things.

High INP values usually mean that there is a lot of JavaScript or other work on the main thread that isn’t JavaScript that may run at the same time as user interactions.

Improving INP during page startup

During page load, INP can be a factor because users may try to interact with a page while getting JavaScript to set up event handlers that give a runner the interactivity it needs to work.

According to the HTTP Archive, the relationship between Total Blocking Time (TBT) and INP is much stronger than between TBT and FID.

TBT is a lab metric, but if you see high TBT values in lab tools, it could mean that you will see higher INP values in the field.

Look into the following ways to improve responsiveness while a page loads:

• Using Chrome’s DevTools coverage tool, you can eliminate code that isn’t being used.
• To load javascript you have to find the place to split your code. You can make it more accessible with the coverage tool.
• Find any slow JavaScript from a third party that you may be loading at startup.
• Use the performance profiler to find long tasks that you can speed up.
• Make sure you don’t ask the browser to do too much rendering work when it starts up. Avoid big component tree re-renderings, big DOM sizes, big image decodes, CSS animations that take a lot of processing power, and so on.

Wrapping Up

It’s important to remember that improving your INP is not a surefire way to get immediate SEO success.

Instead, it is just one of several things that may need to be done as part of a group of quality changes that can help your SEO performance.

How do you plan to use repairing INP as part of your overall SEO plan?