ThisCalculator

Everyday

Interaction to Next Paint: What It Measures & How to Improve

Updated · Standard formula, shown below

Interaction to Next Paint: What It Measures & How to Improve

Interaction to Next Paint (INP) is a Core Web Vital that measures a page’s responsiveness by tracking the time from when a user interacts with the page (click, tap, or keypress) to when the browser paints the next visual update. This article explains what INP actually measures, why it matters, and how to improve it.

What INP Measures (and What It Doesn’t)

INP measures the latency of every interaction—click, tap, keypress—during the entire page lifecycle. It replaces First Input Delay (FID) because FID only measured the delay to the first interaction, not the responsiveness of subsequent ones. INP captures the full picture: the time from the user’s input to the next frame painted, including event handler execution, layout, and paint.

It does not measure scrolling or hovering (those are not interactions). It also doesn’t measure the time to load the page; that’s LCP. INP is about how quickly the page responds to user actions.

Why INP Matters

Responsiveness directly affects user experience. A page that lags when you click a button feels broken. Google uses INP as a Core Web Vital (since March 2024), meaning it affects search ranking. A good INP is 200 ms or less; poor is over 500 ms. The 75th percentile is used because it’s a good balance—it ignores the occasional slow interaction but catches most real issues.

How to Measure INP

You can measure INP in two ways:

  • Field data: Use the Chrome User Experience Report (CrUX) or a Real User Monitoring (RUM) tool to see actual INP from real users. This is the most accurate.
  • Lab data: Use Lighthouse (in Chrome DevTools) or PageSpeed Insights. Lab data uses a simulated slow device and may not reflect real user conditions, but it helps debug.

In the field, INP is reported as a single number (the 75th percentile). In the lab, you might see a distribution. Always check the field data for the final word.

Common Causes of Poor INP

High INP usually comes from one of these:

  • Long main-thread tasks: JavaScript that blocks the main thread for more than 50 ms prevents the browser from painting.
  • Large DOM size: A huge DOM makes layout and paint slower.
  • Complex event handlers: Handlers that do heavy work (e.g., parsing JSON, manipulating the DOM) delay the next paint.
  • Third-party scripts: Ads, analytics, and social widgets can hog the main thread.
  • Forced reflows: Reading layout properties (e.g., offsetHeight) after writing to the DOM forces synchronous layout.

How to Improve INP

Here are concrete steps to reduce INP:

  1. Break up long tasks: Use setTimeout or requestIdleCallback to split tasks into chunks under 50 ms.
  2. Use web workers: Move heavy computation off the main thread.
  3. Debounce or throttle event handlers: For scroll/resize, but for clicks, make them fast.
  4. Simplify event handlers: Do only what’s necessary; defer the rest.
  5. Reduce DOM size: Aim for under 1,500 nodes.
  6. Optimize CSS: Avoid complex selectors and large layout thrash.
  7. Lazy load third-party scripts: Load them after the main content.

Also, consider using content-visibility: auto for off-screen content to skip rendering work.

Common Mistakes and Misconceptions

  • Mistaking INP for FID: FID only measured the first delay; INP measures every interaction. Don’t assume a good FID means a good INP.
  • Ignoring the 75th percentile: The median (50th) might be fine, but the 75th could be poor. Always look at the right percentile.
  • Only testing on fast devices: Real users may have slower phones. Use field data.
  • Forgetting keyboard interactions: INP includes keypresses, not just clicks. Test with keyboard.

Frequently Asked Questions

What is a good INP score?

A good INP is 200 milliseconds or less. Between 200 and 500 ms needs improvement, and above 500 ms is poor. This is based on the 75th percentile of interactions.

How is INP different from FID?

FID measured only the time from the first user interaction to the browser’s first response. INP measures every interaction’s latency to the next paint. INP is more comprehensive and replaces FID as a Core Web Vital.

Can I improve INP without changing my JavaScript?

Sometimes. Reducing DOM size, optimizing CSS, and lazy-loading third-party scripts can help. But if your JavaScript is heavy, you’ll likely need to refactor it.

Does INP affect SEO?

Yes, INP is a Core Web Vital, and Google uses Core Web Vitals as a ranking signal. A poor INP can hurt your search rankings, especially for mobile.

What tools can measure INP for free?

Chrome DevTools (Lighthouse), PageSpeed Insights, and the Web Vitals JavaScript library. For field data, use the CrUX dashboard or PageSpeed Insights’ field section.

Why is my INP high on mobile but fine on desktop?

Mobile devices have slower CPUs and less memory. Heavy JavaScript and large DOMs have a bigger impact. Also, mobile network latency can affect the time to next paint if you’re waiting for resources.

Related

Method: the standard formula for this calculation, rounded as each result states. See how the calculators work or report an error.