Understanding INP: The New Core Web Vital Metric

When users interact with your website, every millisecond matters. A delayed response can lead to frustration, while a quick interaction keeps them engaged. That's where Interaction to Next Paint (INP) comes in—Google's new Core Web Vitals metric for measuring your site’s responsiveness. 

In this article, we’ll explore how INP works, why it replaced FID, and practical ways to measure and optimize it.

What Is Interaction to Next Paint (INP)?

Interaction to Next Paint (INP) is a Core Web Vitals metric introduced by Google to measure how responsive a web page is to user interactions. It tracks the time between when a user interacts with a page—like clicking a link or tapping a button—and when the next visual update (or "paint") appears on the screen.

INP reflects the overall responsiveness of your site. For example, if there's a noticeable delay after clicking a drop-down menu before it opens, that delay is considered poor INP performance. Such lags can lead to a frustrating user experience, as users may keep clicking or think the page is broken.

A good INP score means your page responds quickly and smoothly to interactions, which helps maintain engagement and can positively influence your search rankings.

How Interaction to Next Paint (INP) Works?

INP measures the delay between a user’s interaction with a web page and the next visual update that reflects that interaction. Here's how it works in steps:

• When a user interacts with your site (like clicking a button, tapping a menu, or typing in a form), the browser starts tracking that interaction.
• INP looks at all these interactions during a user’s visit and records how long each one takes to visually respond.
• Rather than measuring every interaction, INP focuses on the slowest (or nearly slowest) meaningful interaction to reflect the worst-case responsiveness.
• It specifically measures the time from when the user input is received to when the browser finishes updating the screen with a new frame (visual feedback).
• This includes input delay, processing time, and presentation delay — all the steps involved from interaction to visible change.

Let’s say your website has these user actions:

• Clicking the navigation menu (responds in 80ms)
• Typing in a search bar (responds in 60ms)
• Clicking a “Load More” button (responds in 300ms)

INP = 300ms

It uses the slowest response time to show how bad the experience can get.

Why did INP replace FID?

Google replaced First Input Delay (FID) with Interaction to Next Paint (INP) because FID only measured the delay before the browser started processing a user interaction, not the full experience.

INP officially replaced FID on March 12, 2024, with widespread adoption and recognition continuing into 2025.

Here’s the difference:

How to Measure Interaction to Next Paint (INP)?

To measure INP, you need to track the time between the user's interaction and the next visual update appearing on the screen. Various tools and methods can help you do this.

Here are the most common 2 ways to measure INP:

1. Google Search Console

Google Search Console provides performance data based on user interactions, including INP, under the Core Web Vitals section.

• Log in to your Google Search Console.
• Go to the Core Web Vitals report under the Experience section.
• Check for INP data in the performance summary for both mobile and desktop.

2. Google PageSpeed Insights

Google’s PageSpeed Insights tool provides INP data as part of its Core Web Vitals report.

• Visit PageSpeed Insights.
• Enter your website URL.
• Check the Core Web Vitals section in the report.
• Look for the INP score, which is listed alongside other performance metrics.

How to Optimize for Interaction to Next Paint (INP)?

1. Optimize JavaScript Execution

JavaScript plays a crucial role in many web pages by adding interactive features, but it can also negatively impact site performance.

When JavaScript is executed, it runs on the main thread, which is responsible for rendering the webpage. If the code is inefficient, it can block this thread, causing the page to become unresponsive to user interactions.

To improve responsiveness, you can optimize your JavaScript through the following methods:

• Minify JavaScript files: Reducing the size of JavaScript files helps them load faster.
• Enable GZip compression: This popular technique reduces the size of site files and data, making them quicker to load.
• Use a JavaScript framework: Frameworks like AngularJS and jQuery help structure and optimize JavaScript code for better efficiency.
• Utilize a CDN (Content Delivery Network): A CDN distributes your JavaScript files from servers near your audience, improving loading times.

2. Use Web Workers

Web workers allow JavaScript to run in the background, separate from the main thread. This helps perform complex tasks without slowing down the main user interface.

For example, on a WordPress site with many images, videos, and data, web workers can handle heavy JavaScript tasks in the background, preventing the site from freezing.

To use web workers, you’ll need two JavaScript files:

• main.js: This file starts the web worker and manages tasks.
• worker.js: This file contains the tasks the web worker will perform.

3. Break Up Long Tasks

Breaking up lengthy JavaScript tasks is a good strategy to prevent blocking the main thread.

For example, consider an eCommerce site where shoppers are browsing products. If large amounts of product data and images are processed all at once, the main thread has to handle everything simultaneously, which uses a lot of time and resources.

During this process, the main thread is occupied, causing the website to load slowly and making it unresponsive to user actions.

By splitting long tasks into smaller chunks, the browser can process them one at a time, freeing up the main thread for more important tasks.

You can break up long tasks using two types of code:

• setTimeout: A JavaScript function that schedules a task to run after a specified delay (in milliseconds). It helps defer tasks, reducing the time the main thread is blocked.
• requestIdleCallback: This API ensures tasks run during idle time. It’s more efficient and allows you to set a deadline for the task, so it doesn’t interfere with more critical processes.

4. Prioritize Input Readiness

Input readiness means ensuring a webpage is ready to respond to user actions. If the page isn’t responding quickly, it usually means the browser's main thread is busy with other tasks.

Here’s how you can prioritize input readiness to improve INP (Interaction to Next Paint):

• Defer non-essential JavaScript: Run unnecessary JavaScript after the page loads to let the browser focus on user interactions first.
• Throttling: Limit how often a function runs (e.g., during scrolling) to reduce browser strain.
• Debouncing: Delay a function’s execution until the user stops an action (e.g., resizing a window) for a set time.

Passive event listeners: Allow the browser to keep processing tasks without waiting for event handlers to finish (e.g., during scrolling or tapping).

5. Provide Immediate Feedback

Sometimes when you click a button or submit a form with lots of information, there might be a short delay while the website processes everything. During that time, it’s important to show users that something is happening so they don’t get confused or think the site is broken.

This is called immediate feedback — small signals that tell the user, "We got your input and we're working on it."

Here are a few simple ways websites can give this feedback:

• Loading spinners or bars: These show up while something is loading or being processed, so users know to wait.
• Pop-up messages: For example, after clicking “Add to cart,” a message appears saying the item was added successfully.
• Instant form checks: When someone enters an incorrect email format, the site must display an error immediately rather than making them submit the entire form.

6. Real-User INP Monitoring

INP is a field metric, which means it measures real users' experiences. Tools like Lighthouse can’t fully capture how real users interact with your site. To truly track and improve INP, you should use real-user monitoring tools like the Web Vitals JavaScript library.

This helps you gather actual data from users, which is crucial for understanding and improving INP in a live environment.

7. Avoid Expensive Rendering

Complex styles, like heavy box shadows, filters, or deep DOM structures, can slow the rendering process and delay user interactions. To enhance performance, simplify your DOM structure, and reduce complex CSS effects. A cleaner DOM and optimized CSS can improve page rendering speed and reduce input delay.

INP highlights how responsive your site feels to real users. Keeping it optimized ensures your visitors stay engaged and your site stays competitive.