Core Web Vitals is changing

What is Core Web Vitals?

Core Web Vitals is a set of metrics that measure real-world user experience for loading performance, interactivity, and visual stability of the page.

It is made of three metrics that became a ranking signal* back in June 2021:

1. Largest Contentful Paint (LCP)
2. Cumulative Layout Shift (CLS)
3. First Input Delay (FID)

In March 2024 a new metric is coming to replace First Input Delay, say “hello” to Interaction To Next Paint (INP)!

*Ranking factors are signals search engines use to sort the search results according to their quality and relevance to the particular query.

What is Interaction To Next Paint (INP)?

The Interaction to Next Paint (INP) metric serves as a crucial indicator of the delays users encounter while navigating your website. It measures how much time elapses between a user interaction (like a click or touch input) and the “next paint” that visually updates the website.

The following interactions are counted for INP:

• Mouse clicks
• Taps (on a touch screen)
• Key presses

The following interactions do not count:

• Hovering
• Scrolling

How is Interaction to Next Paint measured?

INP is gauged in milliseconds, and an ideal INP is characterised by a value under 200 milliseconds. On the flip side, if the INP surpasses the 500-millisecond mark, it’s considered poor and can lead to frustrating user experiences. In most scenarios, INP flags the most substantial delay, thereby spotlighting the worst user input (UI) response time. However, in cases where a webpage encounters multiple interactions, INP hones in on just one of the slowest responses, providing a comprehensive yet concise overview of the website’s performance.

INP measures the time elapsed between user input and the next UI update (like clicks and key processes), this elapsed (or delayed) time consists of three components:

1. 1. Input delay

This is the delay between your user clicking a button and the user getting a response from that button.

1. 1. Processing time

Processing Time is the time spent running your code in response to a user interaction.

1. 1. Presentation delay

The time your browser spends calculating where and how new content should appear. This can include anything from colours to fonts, and any content in between.

Optimising Interaction To Next Paint (INP)

Failing to optimise INP can lead to poor website speed, user experience, and in turn, organic traffic performance.

Optimised INP leads to significant business benefits including the potential to reduce bounce rate by 50%, meaning visitors are more likely to stay and explore content.

Reducing presentation lag time involves optimising rendering and layout processes. To achieve this optimisation it is essential to minimise render-blocking resources – think external CSS and JavaScript files – which can delay the rendering of a page.

You should still prioritise critical CSS, but can also able to use asynchronous loading techniques** for non-critical JavaScript to help prevent delays in visual updates.

In addition, you should certainly leverage browser caching techniques in order to store static assets like CSS and JavaScript files in the user’s browser which reduces the need for repeated downloads.

**To implement asynchronous loading on a web page, you can use the “async” or “defer” attribute in the HTML code of the page.

The best way to reduce INP is to minimise how much CPU processing that happens on your page. To reduce the Input Delay component of INP, reduce and break up background CPU activity on the main thread – which can slow down your website.

What is the main thread?

The main thread is:

Where the browser processes most of the tasks related to your page load, like rendering/painting content or handling user interaction.

Some of the browser tasks executed on the main-thread include, among others:

• Handling layouts
• Parsing CSS and HTML
• Building the Document Object Model (DOM)
• Executing all the JavaScript (by default)

Minimising main-thread work frees up your browser to handle other tasks essential for your page load.

Final thoughts

While the “old” First Input Delay metric often failed to identify poor user experiences when they happened, Interaction To Next Paint improves on the metric twofold:

1. FID only really considers a small part of the overall delay, while INP takes into account the whole time between the user interaction and the next visual update on the page.
2. FID only looks at the first user interaction. INP considers all page interactions.

As FID only considers the first time the user interacts with the page, the improvement will enable us to see how the page defines the user’s experience during the whole interaction rather than a snapshot of it.