What is Interaction to Next Paint (INP)?
Definition Interaction to Next Paint (INP) is a Core Web Vitals metric that measures responsiveness: the time from a tap, click or key press until the browser paints the next frame showing a response. A page's INP is roughly its slowest interaction during the visit. It is good at 200 ms or less and poor above 500 ms, at the 75th percentile. INP replaced First Input Delay (FID) as a Core Web Vital on March 12, 2024.
Related guide: Page Weight: How to Reduce Page Size for Mobile
How is INP measured?
The browser times every click, tap and keyboard interaction while the page is open. Each interaction's latency has three parts:
- Input delay: waiting for the main thread to finish whatever it was doing, such as a long script;
- Processing time: running your event handlers;
- Presentation delay: recalculating styles and layout and painting the next frame.
INP reports the longest interaction, ignoring one outlier for every 50 interactions, so a page with many interactions isn't judged by a single freak value. Scrolling and hovering aren't interactions for INP.
Why INP replaced FID
First Input Delay measured only the input delay of the first interaction. Most sites passed it easily, while users still met sluggish menus and buttons later on. INP covers all interactions and the full time until something visible happens, so it reflects how responsive a page feels much better.
What makes INP slow?
- long JavaScript tasks (over 50 ms) blocking the main thread, often from third-party scripts;
- event handlers that do too much work before updating the screen;
- very large DOMs that make every style and layout recalculation expensive.
Phones have slower CPUs than the laptops pages are built on, so INP problems show up mostly on mobile, especially mid-range Android devices.
Example
Show feedback first, then do the heavy work in a later task so the browser can paint:
button.addEventListener('click', () => {
button.classList.add('is-loading'); // visible right away
setTimeout(() => runExpensiveUpdate(), 0);
});In Chromium browsers, scheduler.yield() does the same job more cleanly.
How do I measure INP?
INP needs real interactions, so it is a field metric: check it in PageSpeed Insights or Search Console (Chrome UX Report data), or collect it from your own visitors with the web-vitals JavaScript library. In the lab, Total Blocking Time is the usual proxy. MobileCheck doesn't measure INP; it reports lab LCP, CLS and page weight, which are part of the Core Web Vitals picture.
Related terms
Guides and tools
- Page Weight: How to Reduce Page Size for Mobile
- Largest Contentful Paint: How to Improve LCP on Mobile