Skip to main content

Interaction to Next Paint

Interaction to Next Paint (INP) is a web performance metric that measures responsiveness – how quickly a website responds to user interaction.

INP currently is an experimental metric developed by Google, and could become one of the Core Web Vitals in the future.

What is Interaction to Next Paint?​

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

  • Input Delay: any background tasks on the page that prevent the event handler from running
  • Processing Time: time spent running event handlers in JavaScript
  • Presentation Delay: Time spent recalculating the page layout and painting the page elements

This diagram shows an example timeline of different CPU tasks, and how they add up to INP activity.

Interaction to Next Paint Diagram

The processing time can be made up of multiple event handlers, for example keydown and keyup events.

What's a good Interaction to Next Paint value?​

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

How to optimize Interaction to Next Paint​

To reduce the Input Delay component of INP, reduce and break up background CPU activity on the main thread. Long background tasks are captured in the Total Blocking Time metric.

To optimize the processing and presentation delay, first identify common user interactions on your page. Then try them out while collecting a Performance recording in Chrome. This will allow you to identify interactions that result in a large amount of CPU activity.

How you then optimize that CPU activity will depend heavily on your app. In a React app, you might be able to avoid unnecessary rerenders of your components. If a lot of CPU activity consists of layout work, check if you can reduce relayouts.

How is INP different from First Input Delay?​

There are two differences between FID and INP: FID only measures the initial processing delay and it only counts the first user interaction on the page.

First Input Delay measures how long it takes for the browser to start processing user input. The actual time spent responding to the event or updating the UI isn't included.

As the name suggests, FID only considers the first time the user interacts with the page. Especially for pages that stay open for a long time, like single-page apps, this first interaction might not be representative of the overall user experience.

Interaction to Next Paint generally measures the worst input delay on the page. However, if there are many user experiences outliers will be ignored, and Google will measure the 98th percentile of interaction delay. So if the INP on a page is 250 milliseconds, 2% of user interactions had a latency greater than 250 milliseconds.

Why is INP a field metric?​

The Interaction to Next Paint metric requires user input to measure, and so is generally available in field data collected from real users.

You could script a user interaction in a lab environment. Keep in mind that each page interaction can have different performance characteristics, depending on what UI element the user interact with and when that interaction happens.

How to measure INP​

INP is an experimental metric, and not all tools support it yet.

Interaction to Next Paint in DebugBear​

DebugBear shows URL-level INP values from CrUX in the Web Vitals tab of your test results.

Learn more about monitoring Core Web Vitals with DebugBear.

Interaction to Next Paint in DebugBear

Origin-level INP in Treo​

Interaction to Next Paint is included in Google's CrUX dataset, containing field data collected from Chrome users. Treo Sitespeed can show you what delays users are experiencing on your website.

INP on Treo

DebugBear is a site speed monitoring service. Start tracking Lighthouse scores and Core Web Vitals in minutes.
Start monitoring your websiteGo to app