Interaction to Next Paint (INP)

Nov 16, 2023

Interaction to Next Paint (INP)

Interaction to Next Paint (INP) is a web performance metric that measures user interface responsiveness i.e. how quickly a website responds to user interactions. When you click a button or type in a form, INP tracks how long it takes before you see the visual result of your action.

INP measures how much time elapses between a user interaction (like a click or touch input) and the "next paint" that visually updates the website.

INP measures how much time elapses between user input, like clicks and key presses, and the next UI update. This delay consists of three components:

  • Input Delay: Waiting for background tasks on the page that prevent the event callback/handler from running.
  • Processing Time: Running event handlers in JavaScript.
  • Presentation Delay: Handling other queued-up interactions, recalculating the page layout, and painting page content.

INP will become one of the Core Web Vitals metrics that impact Google rankings in March 2024.

A good INP is less than 200 milliseconds. An INP over 500 milliseconds is poor.

FID vs INP

There are two differences between FID and INP: FID only measures the initial processing delay while INP measures the full amount of time between user input and the UI update. FID only counts the first user interaction on a page, while INP looks at all the interactions and reports the worst delays.

What user interactions does INP consider?

The following interactions are counted for INP:

  • Mouse clicks
  • Taps (on a touch screen)
  • Key presses

The following interactions do not count:

  • Hovering
  • Scrolling
💡

When optimizing interactions, it's important to understand that each browsing context will have its own main thread. This means that the top-level page will have a main thread, but each <iframe> element on the page will have its own main thread as well. INP will be reported at the page-level, including any slow interactions on the page or any iframes within that page.

Optimizing INP

  • Identify and reduce input delay: Avoid long JS tasks that block the main thread.
  • Optimize event callbacks: Do as little work as possible inside event callbacks if possible. Or only update the UI and defer the execution of computationally expensive tasks inside setTimeout.
  • Minimize presentation delay: By minimizing the DOM size, use content-visibility to lazily render off-screen elements.
Manak Upadhyay