What is INP?

Interaction to Next Paint (INP) is a pending Core Web Vital metric that will replace First Input Delay (FID) in March 2024.

INP observes the latency of all user interactions such as clicks, taps, and keyboard events throughout a user's session on the page. It does not observe the mouse hovering or scrolling. It reports a single millisecond value which most other interactions on the page were below. A low INP score,
The INP metric measures the full duration associated with each user interaction. The duration of an interaction includes:

1. Input Delay: The time the browser must wait before it can begin responding to a user interaction
2. Processing Delay: The time it takes for a site's event handling code to execute
3. Rendering Delay: The time the browser takes to render the next paint as a visual result of the interaction

For a video overview of INP, check out this Ezoic webinar going over the basics of the new metric.

How is INP different than FID?

FID measures the input delay of the first interaction a user makes on a page. INP observes all user interactions that occur on the page, and it measures the entire duration of each observed user interaction, rather than just the initial input delay.

Why is Google replacing FID?

INP is considered to be a more thorough and reliable indicator of a site’s overall user responsiveness. The INP metric was created to address known limitations with FID.

Measuring INP

INP field data from the Chrome User Experience Report (CrUX data) is now available in Leap's graphs:

The Worst Pages section of Leap, below the graphs on the page above, can be used to identify the pages with the worst INP scores:

Real User Monitoring (RUM) data is available in BDA. The Core Web Vital data in BDA is comprised of samples collected from real user page views.

Measuring INP in the lab

In a lab speed test, like Leap's Lab tab or PageSpeed Insight's test, both FID and INP are not available because they are field data metrics that require real, or simulated, user input.

In a lab setting, Google's recommendation is to use Total Blocking Time (TBT) as a substitute and optimize it to improve INP:

Total Blocking Time (TBT) is a lab metric that assesses page responsiveness during load, and it correlates very well with INP. If your page has a high TBT, that's an important signal that your page may not be very responsive to user interactions during the initial page load.

web.dev

Finding slow interactions on a page

Google provides various tools to help monitor your site speed, including INP. The Web Vitals Chrome Extension provides updating INP readings when you manually interact with a page that you're on:

Advanced use instructions are available on web.dev for logging information to your browser's developer console with the extension.

Lighthouse, accessible in a tab in the browser's developer tools, has a Timespan Mode that can be used to measure the INP score of a page by manually interacting with it. Full instructions are available on web.dev.

Once you end the timespan after you've interacted with the page, you'll receive an INP score and audits relevant to INP for the page:

Optimizing INP

Optimizing INP is an iterative process that involves:

1. Enabling relevant Leap settings 

Leap's optimization settings contain "tags" that signify which Core Web Vital metrics they are relevant to:

2. Focusing on reducing TBT scores in lab tests by addressing TBT-specific audits

3. Monitoring INP scores in field data (The graphs found in Leap and in BDA)

How does Leap optimize INP?

Two types of delays associated with user interactions, input delay and processing delay, can be minimized by optimizing JavaScript loading, parsing, and execution. This helps reduce long tasks that can occupy the browser for extended periods and delay its ability to process user interactions.

Leap’s script settings help the browser respond quickly to the first user interaction for FID by optimizing JavaScript to reduce input delay. The JavaScript optimizations that these settings perform also reduce processing delay associated with user interactions. Leap's Script Execution category settings are the most relevant ones for improving INP scores.

The final delay associated with user interactions, presentational delay, is caused by the time the browser spends recalculating the page's layout and rendering it. Reducing and simplifying CSS can optimize the browser's style recalculations and improve INP scores:

it's important to emphasize that reducing any part of the rendering phase inherent to interaction will reduce its total latency—style calculation included.

web.dev

Leap's CSS optimization settings help optimize the browser's style recalculations by removing unused CSS and minifying the CSS that is used.

Further INP optimization

1. Lighthouse's Timespan mode can provide INP-specific audits once you interact with the page. These audits can be examined for opportunities to speed up user interactions:

2. Identify slow interactions on the page by using the tools detailed above in the "Measuring INP" section, including which types of delays in those interactions are taking the longest. This information can help you more accurately address your user interactions and more quickly improve your INP scores if the user interactions cannot be improved by Leap.

Optimizations for INP

Most processing delays will come from how a site is built and may not be able to be fully addressed by Leap. For example, your site could have event handling code that performs a lot of work in response to a user interaction, delaying the browser's next paint, without any visual update like a loading icon. 

In a case like this, you would need to optimize this event handling code by speeding it up or offloading some of its tasks, or providing a visual update to the user faster, to improve the INP score.

You can also manually remove unused, or mostly unused, CSS, JavaScript, and plugins from their site to reduce delays and improve their INP scores.

Additionally, you can also reduce presentational delay by minimizing the DOM size of your site's pages:

There are several advanced recommendations for improving INP that publishers or developers can implement on their sites following the Optimize INP guide directly from Google.