Why INP is the Future of Core Web Vitals

Introduction to Interaction to Next Paint (INP)

In March 2024, the new metric “Interaction to Next Paint” (INP) became a central part of Google’s Core Web Vitals. This metric replaces the previous “First Input Delay” (FID) and offers a more comprehensive and precise measurement of interaction latency. INP measures the browser’s response time to user interactions, contributing to a better assessment of page experience.

What is INP, and why is it important?

INP captures the time span from user interaction to the next visual change on the screen, covering all interactions throughout a webpage visit. The highest measured value is used as the INP value. A low INP indicates a fast and smooth user experience, positively impacting website ranking.

Measuring INP Values

INP is measured in three steps:

1. Input Delay: Time from input to event execution.
2. Processing Time: Duration of event execution.
3. Presentation Delay: Time until the next frame is displayed.

Websites with fewer than 50 interactions are assessed based on the highest interaction latency, while for more interactions, the 98th percentile is used.

The Three Most Important Core Web Vitals Metrics

In 2021, Google introduced Core Web Vitals to evaluate user experience on websites, directly impacting site ranking and enabling targeted optimization.

Loading Speed (LCP – Largest Contentful Paint):

LCP measures the time taken by the browser to load the largest visible element, such as images, videos, or text. The ideal loading time is up to 2.5 seconds.

Visual Stability (CLS – Cumulative Layout Shift):

CLS evaluates the layout stability of a website, considering whether layout elements shift or reload during use. An optimal value is up to 0.4.

Interactivity (FID – First Input Delay):

FID measures the time from the first user interaction to the website’s response. An acceptable reaction time is up to 100 milliseconds.

These metrics provide valuable insights and action recommendations for website operators to continuously improve usability and performance.

Comparison between INP and FID

Unlike FID, which only considers the first user interaction, INP encompasses all interaction latencies and processing times, leading to a more accurate evaluation of overall user interaction and enabling specific optimizations.

Optimizing INP Values

To improve INP values, Google recommends:

• Removing unnecessary JavaScript code to reduce loading times.
• optimizing third-party scripts by minimizing active scripts.
• Delaying the execution of less important tasks and prioritizing crucial ones during low activity periods.

Good INP Values

According to Google, the following INP values are guidelines:

• Good response time: under 200 milliseconds.
• Needs improvement: between 200 and 500 milliseconds.
• Poor response time: over 500 milliseconds.

Monitoring INP Values in the Google Search Console

The Google Search Console provides an overview of INP values and recommendations for optimization. This feature will be introduced in 2023, replacing the previous FID measurement.

Conclusion: The Relevance of INP Optimization

For us, INP is particularly exciting. Previously, the focus was mainly on the initial loading time of a website, which can be strongly influenced by technologies like server-side rendering or static site generation. However, runtime performance has been overlooked. Websites built with React (or meta-frameworks like Next.js) are usually “fast enough,” but high interactivity or large sites can lead to framework-related delays that may be reflected in the INP metric. This can be another argument for opting for more performant frameworks like Solid.js.