INP: What Is Interaction to Next Paint and How to Optimize This Core Web Vitals Metric

Interaction to Next Paint (INP)

Interaction to Next Paint (INP) is the most recent Google’s Core Web Vitals metric.

It measures the responsiveness of a webpage during all interactions. Starting in March 2024, INP replaced First Input Delay (FID), which has until then measured the delay in response to a user command.

Let’s dive deeper into how this new metric works.

How Interaction to Next Paint (INP) Works

An interaction occurs when a user clicks or scrolls a page, prompting visible changes on the screen. INP measures the time from when the user interacts with the page to when the next visual update occurs after all associated events have executed. This duration is the sum of the following intervals:

1. Input delay: Time between the user interaction and when associated events start execution.
2. Processing time: Total time required to execute the associated event code.
3. Presentation delay: Time between the completion of event execution and when the browser renders the next frame.

A low INP value ensures reliable page responsiveness, which is a strong signal for Google.

Optimal INP Values

To meet the Core Web Vitals standards for Interaction to Next Paint, the 75th percentile of recorded page loads must stay below 200 milliseconds. Specifically:

• Good INP: ≤ 200ms
• Needs Improvement: 200ms to 500ms
• Poor INP: > 500ms

Measuring Interaction to Next Paint

To measure INP, real user interactions are required, meaning that the metric reflects actual user experiences rather than synthetic tests. Google captures these interactions on web pages through Chrome’s usage data, tracking how users engage with elements such as buttons, links, and scrolling actions.

This data is then aggregated and stored in the Chrome User Experience Report (CrUX), which serves as the official dataset for Core Web Vitals metrics.

The CrUX dataset provides valuable insights into the real-world performance of a website, helping site owners identify areas of improvement based on how their pages respond to user actions across a wide range of devices and network conditions.

Tools for Official INP Metrics

• PageSpeed Insights: Displays the 75th percentile score from the past 28 days.
• CrUX Dashboard and Google BigQuery: Provide historical context and deeper insights.

Measuring INP in the Current Session

• Lighthouse in “timespan” mode: Run a Lighthouse audit in Chrome for session-based measurements.
• Core Web Vitals Visualizer: Offers a visual representation of INP data.
• Google Web Vitals Library: Log metrics programmatically:
  html<script type="module">
import { onINP } from 'https://unpkg.com/web-vitals@3/dist/web-vitals.attribution.js?module';
onINP(console.log);
</script>

Improving Interaction to Next Paint

Improving INP involves addressing its three components: input delay, processing time, and presentation delay. Below are actionable strategies:

1. Minimize Input Delay

Most pages are less responsive during the initial load. To optimize:

• Eliminate unused code: Use tree shaking to remove dead code and code splitting to load small chunks on demand.
• Defer non-essential code: Load widgets like chat tools only when idle.
• Optimize slow scripts: Rewrite heavy scripts to make them more efficient.
• Simplify rendering: Avoid excessive DOM size, large images/videos, and unnecessary CSS animations.

2. Reduce Processing Time

For user-triggered actions (e.g., form submissions), provide immediate feedback rather than waiting for server confirmation. For instance:

• Display a message like “Submitting…” while processing.
• Yield to the main thread by breaking up JavaScript execution. Use setTimeout() to allow the browser to render intermediate updates.

Example:

javascript
formEl.addEventListener("submit", (evt) => {
evt.preventDefault();
formFeedbackEl.innerText = "Submitting...";
fetch("/form-endpoint", { method: "POST", body: new FormData(formEl) })
.then(response => response.json())
.then(json => {
formEl.reset();
formFeedbackEl.innerText = json.message;
});
setTimeout(() => otherCode(), 0);
});

3. Minimize Presentation Delay

Presentation delay occurs when the browser updates visible content. Strategies include:

• Keep the DOM small: Simplify the HTML structure to improve rendering speed.
• Use content-visibility: Delay rendering off-screen elements to focus resources on visible content.

Example:

css
.offscreen {
content-visibility: auto;
}

Simplifying Core Web Vitals Optimization with Tuurbo

As seen from these recommendations, optimizing Core Web Vitals, including INP, can be complex and technically demanding. Factors such as your site’s structure and CMS play a significant role in determining the difficulty of implementation.

To streamline this process, we developed Tuurbo, a tool designed to tackle these challenges automatically. With Tuurbo, you can enhance INP and other Core Web Vitals metrics in just 48 hours - eliminating the need for extensive development or costly technical consultations.

Explore our guides and discover how Tuurbo can help you create a faster, more responsive web experience.

Does it seem like magic?

You don’t believe it, do you?! Try it!

Try our solution, enjoy the results, and decide how long to keep your subscription active.