Is your site ready for the Interaction to Next Paint (INP) metric, launching in March 2024 by Google?

Is your site ready for the Interaction to Next Paint (INP) metric, launching in March 2024 by Google?

January 12, 2024
To improve user experience and web performance, Google announced that it is replacing the First Input Delay (FID) (a part of Core Web Vitals) with the Interaction to Next Paint (INP) metric in March 2024. While FID measures the reduced delays in user input (when a user taps or clicks something), INP provides the metric for the overall responsiveness of the page. This transition from FID to INP is likely to impact SEO rankings, as websites with faster responsiveness to users’ interaction (measured by INP) will rank better on the search engine results page. Now, Google may not directly penalize a website for meeting INP. However, it might affect the user experience, and if the site doesn’t respond well to user interaction, they might leave for other sites. This increases the bounce rate of a website, ultimately affecting the site’s ranking.

Limitation of First Input Delay (FID)

The reason Google introduced INP is due to certain limitations of FID, failing to provide an accurate picture of user experiences.

The limitations of First Input Delay (FID) as a metric:

Scope Limitation
FID only looks at the delay in event processing during page load, not the time it takes for the browser to update the page or the event processing time itself. This means it doesn’t give the full picture of the user experience, focusing only on how quickly the page responds during loading.
Limited to Discrete Actions
FID pays attention to specific actions like clicks and taps but ignores continuous actions such as scrolling and zooming. These continuous actions have different performance considerations that FID doesn’t account for.
Dependency on Pre-Trained Models
FID uses a pre-trained Inception-v3 model in its process, which might not suit all types of media or neural network setups.
Reliance on Statistical Analysis
FID uses statistical analysis to determine certain metrics, and with small sample sizes, there’s a risk of overestimating the actual FID.
Insensitivity to Global Structure
FID, along with other metrics like KID, might not accurately represent the quality of generative models in some cases because they don’t account well for the overall structure of the data distribution. Despite these limitations, FID is still valuable for evaluating how responsive a page is during load, especially in terms of web performance and user experience, as well as an integral part of core web vitals including CLS, and LCP.

How does INP Measure Web Performance?

Interaction to Next Paint (INP) is a metric that assesses a page’s overall responsiveness to user interactions by observing the tap and keyboard interactions that occur throughout the lifespan of a user’s visit to a page.

INP (Interaction to Next Paint) is calculated through the following factors:

  • Mouse clicks
  • Taps on the touchscreen
  • Key presses on a keyboard

Interactions that INP cannot count:

  • Hovering
  • Scrolling
  • Changes to the INP definition
On the other hand, FID focuses on the input delay metric, which is the time between a user’s initial interaction and when the browser’s main thread can process the event. It measures the delay or any lag the user may experience during the first interaction with a web page.

What is an Ideal INP Score?

According to Google, a score below or equal to 200 milliseconds indicates good responsiveness for Interaction with Next Paint (INP). An INP above 200 milliseconds and below 500 milliseconds means that the page’s responsiveness needs improvement, and an INP above 500 milliseconds is classified as poor, indicating that the page has poor responsiveness.

Note: INP is still an experimental metric, and its definition may change over time.

INP Vs. FID

Both INP and FID measure user interactivity on web pages. However, the way, they analyze web performances is quite different.

The main differences between INP and FID are:

Scope

INP keeps an eye on everything that happens on a webpage, while FID is mainly concerned with how fast the first action you take on a page is.

For instance, INP generates a metric based on all the buttons you click, forms you fill, and scrolls you make. FID only looks at how quickly the page responds after the first click or tap.

Performance Aspects

INP wants websites to respond instantly during interactions like clicking a button or typing in a search box. FID is more focused on making sure there’s no annoying delay when you interact with a webpage for the first time.

For example, INP is about making sure the whole website runs smoothly during the whole time, while FID is about making sure the buttons or page doesn’t lag when you click or tap for the first time.

Optimization

You can make both INP and FID better at the same time. To do this, avoid making the webpage do really long tasks, using too much unnecessary code, or updating the screen in a big way.

Let’s explain this in a simple and easy-to-understand Example: It’s like cleaning up your room. You make sure there’s nothing in the way (like long tasks), throw away stuff you don’t need (unnecessary code), and organize things so you can find them quickly (small updates to the screen).

As of March 2024, Google will focus more on INP and won’t show FID details in its reports. But it’s still important for website owners and developers to make both INP and FID better. This is because they help your website be liked by search engines (good for SEO) and make visitors happier (good for user satisfaction).

How to optimize your website for a good Interaction-To-Next-Paint Score?

Here’s a step-by-step guide on how to implement the optimization strategies mentioned for Interaction-to-Next-Paint (INP) on a website:

Code Splitting:
    • Utilize tools like Webpack to break down large code bundles into smaller, manageable chunks.
    • Identify key entry points and split code accordingly for different sections of your website.
    • Implement lazy loading for components that are not immediately required.
Asynchronous Loading:
    • Load non-essential assets asynchronously using the async or defer attributes for script tags.
    • Utilize JavaScript libraries or frameworks that support asynchronous loading for improved page rendering.
Image Optimization:
    • Use image compression tools to reduce file sizes without compromising quality.
    • Convert images to modern formats like WebP for better compression and browser support.
    • Set image dimensions in HTML attributes to prevent layout shifts during loading.
Analyze Rendering:
    • Use browser developer tools and tools like Google Lighthouse to analyze the rendering process.
    • Identify and address forced synchronous layouts by optimizing CSS and layout structures.
Interaction Tracing:
    • Implement performance markers in your JavaScript code to measure the time-to-interaction for specific user actions.
    • Utilize browser performance APIs to capture timestamps for relevant interactions.
Reduce Browser Reflows:
    • Design flexible components using CSS flexbox/grid to minimize layout changes.
    • Avoid frequently adjusting styles or dimensions after the initial page load.
Server Response Optimization:
    • Implement server-side compression (e.g., Gzip) to reduce the size of transmitted data.
    • Utilize caching mechanisms to store and retrieve frequently accessed data.
    • Consider using a Content Delivery Network (CDN) for faster content delivery to users globally.
Prefetch DNS/TCP:
    • Add <link rel=”preconnect” href=”https://example.com”> in the HTML head to prefetch DNS and establish a TCP connection in parallel.
    • Consider using <link rel=”dns-prefetch”> for additional DNS prefetching.
Code Split JS Frameworks:
    • Dynamically import JavaScript framework code using the import() syntax for modules.
    • Utilize frameworks that support dynamic imports for better control over when code is loaded.
Continual Measurement:
    • Implement monitoring tools like Google Analytics or other performance-tracking tools.
    • Regularly analyze performance metrics, including Interaction-to-Next-Paint, and identify areas for improvement.
    • Actively seek user feedback and address any reported performance issues.
Conclusion

While this transition suggests that INP will take centre stage in evaluating web performance, it’s important to note that the move doesn’t diminish the significance of FID entirely. Website owners and developers are encouraged to continue tracking and optimizing both metrics. INP and FID share common optimization strategies, such as avoiding long tasks, unnecessary JavaScript, and large rendering updates, and improvements in one metric can positively impact the other.