What is INP

INP is a metric used by Google to evaluate how quickly a website responds to user actions. In this article, I will discuss what INP is, its effects, how it is calculated, and how to improve it.

NP evaluates the response of the interface during the entire user session, not just the first action. An interaction can include multiple events:

1. Removing a finger from the device screen.
2. Releasing a button on an input device (mouse or trackpad).
3. Pressing a button on an input device (mouse or trackpad).

How to calculate Interaction to Next Paint

INP measures the time between user input, such as clicks and keydowns, and the next UI refresh.?

This delay has three components:

1. Input delay means waiting for background processes to run on the page that prevent the event handler from launching. For example, the site may be loading content when you first visit it, which is why the site interface does not respond to clicks, scrolling, etc.
2. Processing time means launching event handlers in JavaScript. For example, an HTML web page has loaded, an input field in HTML has changed, or a user has clicked a button.
3. Presentation delay means processing other queued interactions, recalculating the layout, and rendering the page content.

A good response time is less than 0.2 seconds. A response time greater than 0.5 seconds is considered poor.

How to check Interaction to Next Paint

1. Launch the developer tool in the browser.

2. From the console, go to the Performance tab.

If you have a fast computer, you can emulate CPU slowness in Chrome DevTools:

2.1. In DevTools, open Settings from the gear icon in the top right corner.

2.2. Select "4x" or "6x" CPU emulation.

3. Launch event tracking from the page using the on-screen icon or Command+E on Mac or Ctrl+E on Windows, Linux, and Chrome OS.

4. Start interacting with the page: click on buttons, open the menus, etc.

When you get the results, you'll see which elements or events take the most time to process. Once you have identified the most time-consuming elements on the page, you can make a plan to improve them.

Read more here