Interaction to Next Paint (INP) tool support

Brendan Kenny

Elizabeth Sweeny

We are thrilled to have the first round of tooling support for the new pending responsiveness metric, Interaction to Next Paint (INP). To learn about the metric itself, check out the official INP metric guide.

Suggested measurement

The goal of measuring INP is to understand how fast your page responds to user input. The only way to get realistic data is to measure how your page is responding for real users visiting your site using data from the field.

Measuring INP in the lab then helps to better understand event timings and where optimizations need to happen. Lab tools won't automatically interact with the page, so they either need manual input while they measure, or they need to be scripted with an automation tool like Puppeteer. When key interactions are identified from typical user journeys, they can be tried out to identify issues or scripted, and put in CI tests to prevent regressions.

Discover what your real users are experiencing (field data)

Visit PageSpeed Insights

PageSpeed Insights pulls field data from the Chrome User Experience (CrUX) Report API, and gives a snapshot of your page and origin's performance over the previous 28 days. This data now includes INP:

Try it out at PageSpeed Insights.

Collect your own INP values from the field

If you'd like to collect INP data for a site yourself, the easiest way to do so is the web-vitals library, which now has full INP support in its beta release.

import {onINP} from 'web-vitals';

onINP(({value}) => {
  // Log the value to the console, or send it to your analytics provider.
  console.log(value);
});

Read more about web-vitals and how to measure in the DevTools console.

Web Vitals Chrome extension

The Web Vitals extension gives both an overview of your users' page experience (from the CrUX API) and the real-time values of CWV and key metrics of the current visit to the page.

Install the Web Vitals extension for Chrome.

Diagnose performance issues (lab data)

Use Lighthouse User Flows

The new timespan mode in the Lighthouse Panel in DevTools lets you start Lighthouse, interact with your test page however you wish, and then get a report of what happened during that time. This report now includes INP and an audit to help diagnose any responsiveness issues.

The same series of interactions can be automated by using Lighthouse user flows. INP is available in user flows as of Lighthouse 9.6.

Tool availability details

• Chrome User Experience Report (CrUX)
  • BigQuery: INP available as interaction_to_next_paint
  • CrUX API: INP available as interaction_to_next_paint
  • CrUX Dashboard: Includes INP data
• PageSpeed Insights
  • pagespeed.web.dev: Page-level and origin-level INP field data from the CrUX API surfaced as 'Interaction to Next Paint'
  • PSI API: INP available as INTERACTION_TO_NEXT_PAINT_MS
• web-vitals JS library
  • web-vitals includes INP support
• Web Vitals Chrome extension
  • Includes local INP measurement and INP field data when available from the CrUX API
• Lighthouse
  • Lighthouse panel in DevTools: INP measurement available in 'timespan' mode in Chrome Canary (104)
  • Lighthouse npm module: INP measurement available in timespans (use puppeteer for synthetic input)

Future work and request for feedback

Moving forward, Chrome tooling teams will continue to invest in debugging capabilities and optimization recommendations for INP.

If you have feedback on anything from the metric's usefulness, to ease of measurement, please bring it to the web-vitals-feedback Google group.