How to optimize for Google’s new Core Web Vital INP

Effective March 12, 2024, Google replaced the First Input Delay (FID) metric with Interaction to Next Paint (INP) as a part of its Core Web Vitals. This change marks a significant shift in how web interactivity is measured, reflecting a more comprehensive view of user experience. This blog explores INP, strategies for optimization, and asks if FID is still a valuable metric. 

What is Interaction to Next Paint (INP) & why does it matter?

Interaction to Next Paint (INP) measures the time from a user’s interaction—like a click or keypress—to the next visual update on the screen.  

This metric captures the total duration of an interaction, providing a detailed assessment of a webpage's responsiveness. Google states that if a page’s INP exceeds 200ms, it needs optimization for better responsiveness.  

Since it’s designed to measure and understand user experience and satisfaction, a poor INP value can negatively affect your site’s search engine rankings, hindering your SEO strategy.   

INP vs FID: A comparison

FID measures the delay from when a user first interacts with a page to the time the browser can respond to that interaction. However, FID only looks at the initial input delay and doesn’t account for the total time to update the visual response.

INP addresses this gap by including the complete lifecycle of an interaction—input delay, processing time, and presentation delay—making it a more comprehensive metric.  

Key components of INP:

1. Input Delay: Time from user input to the start of event processing.
2. Processing Time: Time taken by the browser to process the event.
3. Presentation Delay: Time until the next frame is rendered and displayed.

How to measure INP

You can measure INP with both Real User Monitoring (RUM) and synthetic monitoring. Google recommends starting with RUM, as it reflects the experiences of actual users. This data is crucial for identifying slow interactions that need further investigation. By analyzing RUM data first, you can pinpoint specific performance issues that should be monitored closely through synthetic monitoring. This approach ensures you focus on the issues that matter most to your site’s performance.   

Now that INP is here, is it a case of ‘out with the old, in with the new’? Not quite.  

Is FID now irrelevant?

With the introduction of INP, some may wonder if FID has become obsolete. However, this isn’t entirely the case.

Why FID still matters

Although INP offers a more holistic measure of user interaction by including input delay, processing time, and presentation delay, FID still holds value because it complements INP analysis by isolating input delay.

For instance, a webpage might have a great FID but a poor INP due to extended processing or presentation times. Understanding FID can guide specific optimization efforts, making it easier to improve overall interactivity. If FID is good but INP is not, the problem likely extends beyond input delay. Conversely, a poor FID score indicates immediate attention is needed for the initial user input response.

To illustrate the complementary roles of FID and INP, let’s examine some real-world data:

Example 1

In a study of a web page’s performance, the FID values at the 95th percentile were measured at 100 ms, which falls within the “good” range. However, the corresponding INP value was 576 ms, far exceeding the ideal threshold of 200 ms (see Example Trend A chart below).  

This indicates that, although the page responds quickly to the first interaction, the overall interactivity suffers due to longer processing or rendering times.

Example 2

In some cases, FID issues can lead to or worsen poor INP performance, highlighting the interconnected nature of these metrics. In the scenario below, INP performance is poor, and FID is contributing to this degradation.

Both metrics are essential for a fast and responsive user experience.

Key steps to optimize INP

Now that we've covered why monitoring INP is essential to your user experience, let's consider some best practices to optimize the metric to improve performance.  

Here are six essential steps:

1. Use RUM: Identify slow interactions by tracking real user data. For instance, if users experience delays while adding items to a cart, RUM can highlight this issue.
2. Leverage Synthetic Testing: Once problem areas are identified, set up synthetic tests to monitor and diagnose the root causes.
3. Focus on JavaScript Optimization: Minify and defer non-essential scripts to reduce the load on the main thread. Both first-party and third-party scripts should be optimized.
4. Enhance Content Load Times: Improve how quickly content is loaded and rendered by optimizing images, using CDNs and other measures to decrease page weight. This directly affects how soon the page responds to user interactions.
5. Minimize Total Blocking Time (TBT): Monitor and reduce TBT to ensure the main thread is not blocked by long tasks, allowing faster responses to user interactions and improved INP.
6. Reduce CPU Load: Focus on minimizing CPU activity during user interactions. Optimize code to prevent the CPU from being overburdened and only load essential third-party assets.
7. Continuously monitor and iterate: Regularly monitor your INP scores and performance metrics. Use this data to make ongoing adjustments and improvements, ensuring your site remains fast and responsive as conditions and user behaviors change.

Let’s look at specific examples to see how these optimizations can improve INP.

Impact of JavaScript optimization on INP

In the example below, notice how optimizing JavaScript, specifically by minifying both first-party and third-party scripts, can significantly improve the Interaction to Next Paint (INP) metric.

This example vividly demonstrates the proportional impact that JavaScript optimization can have on INP. By reducing the size and complexity of JavaScript files through minification and selective loading, we see a significant improvement in the page’s responsiveness to user interactions.

Impact of Content Load Time Optimization on INP

In the chart below, notice how reducing the Content Load Time, which is the time taken to load the main content of a page, can significantly improve the INP score.

By making the main content load faster, the entire user interaction process becomes more responsive, leading to a better user experience.  

Measure and optimize INP with Catchpoint

Catchpoint brings together the best of both worlds by blending the gold standard web performance testing capabilities of WebPageTest with our industry-leading IPM Platform, with its AI-powered analytics, RUM, the largest Global Observability Network, and more!

Catchpoint Real User Monitoring (RUM) enables you to track all Core Web Vitals, including the new INP metric. It offers a detailed analysis with customizable data views and visualizations, helping you pinpoint areas for improvement. 

This dashboard shows that a high INP correlates with an increased bounce rate on the product detail pages (PDP). Such insights are invaluable as they pinpoint exactly where a website may be falling short.  

Catchpoint's WebPageTest provides insights into your site's performance by providing the most accurate and valuable performance metrics.  Recently, WebPageTest’s gold standard capabilities have been seamlessly incorporated into the Catchpoint portal, making it even easier to access comprehensive performance analysis tools in one place. Stay tuned for more updates and join our upcoming webinar to learn more. 

In addition to WebPageTest metrics, you'll find additional metrics, including INP, gathered from Google's CrUX report. CrUX provides you with your INP score, reflecting real user experiences, but to pinpoint and understand the root causes behind your score, you need RUM.

INP is not just another new metric to track; it’s a transformative approach to evaluating and enhancing user experience on the web. By diligently measuring, monitoring, and improving INP, you will not only have a better chance of ranking high on search results but also ensure your website meets the high standards of today’s internet—fast, responsive, and user-centric.

Visit our Website Experience Solution page to discover how the two solutions combined can make your website fast, reliable, and resilient, or contact us to learn more.