How to be prepared for Google's new Web Vitals update in March 2024

How to prepare your website for Interaction to Next Paint (INP)

Google is set to make its biggest change to core web vitals since it was introduced in 2020. In March 2024 Google is replacing First Input Delay (FID) with Interaction to Next Paint (INP). This change will affect site owners worldwide and website owners should take the necessary steps to improve their INP.

If you want to improve your search engine rankings and user experience then understanding your INP is crucial. If the necessary steps are not taken to improve your INP then your site may rank lower in search engine results when this update becomes official.

This article will break down Google’s new Interaction to Next Paint INP metric and how you can optimise it and be prepared for March 2024.

To understand this change we first need to understand Google Core Web Vitals and how these metrics play a part in Google analysing your website.

What is Google Core Web Vitals

Introduced in 2020, Google's Core Web Vitals are a set of specific metrics that Google considers important in a webpage's overall user experience. They are intended to help website owners and developers understand and improve the performance of their sites.

What are the current metrics of Google Core Web Vitals?
Largest Contentful Paint (LCP): This measures loading performance. It specifically looks at the render time of the largest image or text block visible within the viewport when a page loads. An LCP score below 2.5 seconds is considered good.

First Input Delay (FID): This measures interactivity. It gauges the time it takes for a page to become interactive, allowing users to click buttons or fill in forms. An FID score below 100 milliseconds is considered good.

Cumulative Layout Shift (CLS): This measures visual stability. It looks at the amount of unexpected layout shifts that occur during the loading of a page. A CLS score below 0.1 is considered good.

These metrics give website owners and developers insights into how real users experience the loading and interaction with their web pages. Google has also integrated Core Web Vitals into its ranking algorithm, which means that they can affect a webpage's position in search results.

Why is page performance so important?
A fast-loading page provides a smoother, more enjoyable experience for visitors. Slow pages can frustrate users, leading to higher bounce rates and lower engagement. Google states that when a site meets the Core Web Vitals thresholds, research showed that users were 24% less likely to abandon page load.

What is Interaction to Next Paint (INP)?

Interaction to Next Paint (INP)
The Interaction to Next Paint (INP) metric provides insight into the delays users may encounter while interacting with your website. INP specifically gauges the time gap between a user's interaction, such as a click or touch input, and the subsequent visual update on the website, known as the "next paint." For example, if a user clicks a button and experiences a half-second delay before the page updates, the INP value would be 500 milliseconds. During this interval, the browser allocates time to process the website code and generate the updated page display.

Google define INP as the following:
INP assesses responsiveness using data from the Event Timing API. When an interaction causes a page to become unresponsive, that is a poor user experience. INP observes the latency of all interactions a user has made with the page and reports a single value which all (or nearly all) interactions were below. A low INP means the page was consistently able to respond quickly to all—or the vast majority—of user interactions.

Why is Google replacing First Input Delay (FID) with Interaction to Next Paint (INP)?

Google is introducing INP (Interaction to Next Paint) as a replacement for FID (First Input Delay). Google is taking this action to offer users a more comprehensive understanding of how responsive a website is to their inputs and how swiftly they can witness the outcomes of their actions.

Also, INP provides a more accurate and uniform method for assessing user experience across various devices and network conditions. It is advised that website owners and developers focus on optimising their web pages for INP to enhance overall user satisfaction.

Here’s a video from Google showing good vs bad responsiveness

Video from https://web.dev/articles/inp

What is an interaction?

An interaction with a website starts with the user input. For example, a user clicking a button or toggling a dropdown. When a user input starts the browser then reacts to this input. This involves the input delay, processing time and the presentation delay before the next paint occurs and the new frame is presented. The new frame is the screen that appears after the interaction is complete.

Image from https://web.dev/inp/#whats-in-an-interaction

An interaction is composed of these three serialised durations

1. Input delay (time the browser takes to start the interaction)
2. Processing time (time the browser takes to process the interaction)
3. Presentation delay (time the browser takes to present the interaction to the frame)

Complex interactions can often take longer than simpler solutions and Google understands this. Although a complex interaction may take longer to respond than others, that doesn’t mean that the user experience has to be affected. Visual feedback to let the user understand what is happening could be presented back. For example, on an eCommerce website if a user clicks the ‘Add to cart’ button and it takes a short period of time to update the cart then a loading animation could be applied to the button to give the user visual feedback that something is happening. Therefore INP is not measuring the response time of the entire interaction, but rather the response time until the website provides some visual feedback to the user. You do not have to complete the interaction entirely, you just have to showcase that visual feedback is being presented to the user.

It is very important for every website to have a great user experience and in turn, have a good INP score. If your website has a poor INP score this ultimately results in a bad user experience which affects bounce rate, revenue & leads.

E-commerce websites need to pay particular attention to poor INP scores and bad user experience as this could potentially result in loss of revenue and conversions.

Will the update to INP impact the ranking of your website?

Google has made it clear that the incorporation of INP as a Core Web Vitals metric will influence search rankings. Websites that offer a seamless and engaging user experience, with prompt visual feedback following interactions, are subject to receive a ranking boost. Conversely, websites that exhibit substantial delays between user inputs and visible feedback may see a detrimental effect on their rankings.

By prioritising the optimisation of INP and providing a fluid and interactive user experience, website owners and developers can significantly increase their likelihood of achieving higher rankings in search results.

How to Optimise Interaction to Next Paint (INP)

How to figure out what’s causing poor INP scores

1. Find slow interactions in the field.
2. Diagnose slow interactions in the lab.
3. Identify and reduce input delay.
4. Optimise event callbacks.
5. Minimise presentation delay.

It is important to identify what is causing your INP score to be low so you can take the necessary steps to improve and optimise your interactions.

Step 1: How to measure your INP?

If you are unsure of how to measure your Google Core Web Vitals then a good place to start would be to look at the reports provided in either Google Search Console or PageSpeed Insights. These reports will show you the pages of your website that need optimising.

Once you know what pages of your website need optimising you can then use any of the methods below to understand the slow interactions on your website, which are affecting your INP score:

1. Testing manually in Chrome DevTools
2. Using real user monitoring (RUM)

1. Testing manually in Chrome DevTools
To discover INP issues on your website you can use Chrome DevTools to understand interactions. DevTools can provide a deep analysis of what is happening on your website and everything that may be affecting it.

The "Performance" tab in DevTools allows you to record an interaction and then analyse it in detail.

Steps to see your interactions

1. Open the DevTools Performance tab.
2. Click the Start Recording button.
3. Click on a UI element on the page.
4. Stop the recording.
5. Open the “Interactions” lane of the performance profile.
6. Review the “Main” lane to see the CPU work that was executed, including the specific tasks that are responsible for the delay.

Any ongoing work on the main thread is what is blocking the next paint. For more detailed information on how to review the data from Chrome DevTools visit this link.

Once you understand what interactions on your page need optimising then make sure you profile the performance and document which interactions need improvement.

You can then utilise the profile and documentation to take the correct steps in optimising and improving your interactions.

2. Using real user monitoring (RUM)

There are many free and paid tools to measure your INP but it’s best to do so in the field using real user monitoring. Using field data will accurately allow you to measure your INP from real website visitors.

One of the best places to get accurate and reliable field data is the Chrome UX Report. This provides user experience metrics for how real-world Chrome users experience popular destinations on the web. However, if your website is not included in the CrUX dataset then no data or information will be displayed.

If your website does not qualify to utilise the Chrome UX report then you can use either of the following tools:

1. New Relic
2. Pingdom
3. Raygun

If you're short on time or resources to gather field data, I suggest using the PageSpeed Insights tool. What makes PageSpeed Insights particularly useful is that it leverages data collected by Google from real-world usage as well as laboratory data to assess your INP.

Step 2: Optimising your interactions

Once you've located the interactions responsible for a delay, you can recreate it in DevTools and generate a performance profile that offers specific insights into what requires attention.

Addressing these issues will typically require collaboration with your development team or your website platform provider.

Interaction to Next Paint (INP) issues often revolve around third-party code causing CPU blocking or the need for optimising the performance of custom sliders or menus.

Every interaction can be broken down into three distinct stages:

1. Input delay
2. Processing time
3. Presentation delay

Since each stage contributes to the overall delay, optimising Interaction to Next Paint (INP) involves minimising the CPU processing required at each of these stages.

Optimising Input Delay:

Prioritise optimising JavaScript. This involves actions like minimising JavaScript files, enabling GZip compression, utilising JavaScript frameworks like React, and employing Content Delivery Networks (CDNs) to serve JavaScript files from servers closer to your audience.

Minimise thread activity. When there's high activity on your page (e.g., images, videos), it can slow down input responsiveness. Utilise web workers to run independently from the main thread of your site.

Address interaction overlap. This occurs when a visitor interacts with one element and then another before the initial interaction has been fully rendered. It's common in situations like typing into autosuggest-powered form fields. Resolve this issue by debouncing inputs to reduce callbacks and use AbortController to cancel outgoing fetch requests.

Optimising Processing Time:

Make event callbacks (processes triggered by user input) as lightweight as possible. Delete unnecessary event callbacks wherever feasible.

If callbacks are essential, break down the tasks into separate steps, and ensure that only essential processes needed for visual updates are executed first. Utilise setTimeout to run callbacks in a separate task. For practical guidance, refer to Google's detailed guide on optimising long tasks.

Optimising Presentation Delay:

Trim down the size of the DOM (Document Object Model) to expedite presentation speeds. The DOM connects web pages to scripts and programming languages. Smaller DOM sizes lead to quicker event rendering, whereas larger DOM sizes result in longer rendering times.

You can reduce the DOM size by:

1. Minimise the use of frameworks and libraries: Use lightweight frameworks or libraries if possible, and only include the components you really need. Some libraries and frameworks can introduce a lot of unnecessary DOM elements.
2. Limit the use of Third-Party widgets and plugins: Third-party widgets and plugins often come with their own set of DOM elements. Use them sparingly and consider if there are lighter alternatives available.
3. Avoid nesting too many elements: Each nested element increases the complexity of the DOM tree. Try to keep the HTML structure as flat as possible.
4. Use virtual DOM techniques: Some JavaScript frameworks, like React, use a virtual DOM to efficiently update the real DOM. This can help reduce the number of actual DOM updates.
5. Lazy load images and content: Load images and content only when they are actually needed, especially if they are below the fold or not immediately visible on the page.
6. Use CSS animations instead of JavaScript: CSS animations are often more performant than JavaScript animations, which can lead to fewer DOM changes.
7. Optimise images and media: Use compressed and appropriately sized images and media files to reduce the overall file size of your web page.
8. Avoid excessive event listeners: Be mindful of attaching too many event listeners, especially if they are not necessary. Consider event delegation for handling events on multiple elements.
9. Avoid excessive data binding: If you're using a framework that supports data binding, be cautious about binding too many elements. This can lead to a large number of watchers and increased memory usage.
10. Remove unused or redundant code: Regularly review your codebase and remove any unused or redundant HTML elements, CSS styles, or JavaScript functions.
11. Consider Server-Side Rendering (SSR) or Static Site Generation (SSG): Depending on your project's requirements, using SSR or SSG can help reduce the initial load time and keep the initial DOM size smaller.
12. Use performance profiling tools: Tools like Chrome DevTools or other performance profiling tools can help you identify areas where you can optimise your DOM size.

Sometimes interactions can be very complex and generally take longer time than others, in this scenario be sure to let the user know what is going on for a good user experience.

Certain interactions such as submitting a form with multiple data inputs, can lead to noticeable delays in response. This is where immediate feedback becomes crucial. This approach provides users with a visual confirmation that the website has received and is processing their request.

Immediate feedback ensures users aren't left wondering whether their input has been registered. It creates the perception of quicker performance, even if it doesn't actually reduce the processing time.

Here are some examples of cues for immediate feedback:

1. Loading indicators: Display a spinner or progress bar when a process is in progress, particularly when loading data or transitioning to a new page.
2. Acknowledgement pop-ups: When a user performs an action like adding an item to a cart, it's beneficial to present a message confirming the successful completion of the action.
3. Form field validation: If a user enters an improperly formatted email address, for instance, show an error message right away instead of waiting until they submit the form.

Interaction to Next Paint (INP) FAQ’s

What Is a good INP score?
A good INP score according to Google is equal to or less than 200 milliseconds. Anything between 200 and 500 milliseconds needs improving and anything higher than 500 milliseconds is considered poor.

Conclusion

Interaction to Next Paint (INP) will become a stable Core Web Vital metric in March 2024 and will replace First Interaction Delay (FID). To recap, INP is a measure of how long it takes for your site to respond to a user's interaction/input.

It is highly recommended that all site owners review this Core Web Vital metric as well as other Core Web Vitals to improve the user experience of their website.

As mentioned above, improving the user experience of your website will ultimately result in your website visitors having a better and more enjoyable experience. Furthermore, this will lead to increased performance and a higher possibility of conversion.

What does Google recommend for Site Owners?
‘We highly recommend site owners achieve good Core Web Vitals for success with Search and to ensure a great user experience generally’

My advice would be not to ignore this upcoming change, and ensure the performance of your website is good for its users. Almost 50% of internet users don't give a webpage more than three seconds to load before they move on to another site. Understand all of the issues that are affecting low INP and Core Web Vitals scores and fix those issues. After all, taking the necessary steps to fix these issues will ensure a better user experience all around and increased conversion. Happy debugging 😀!