INP New main metric in Core Web Vitals

On March 12, Google will introduce a new essential web evaluation metric, INP(Interaction to Next Paint). Although this metric is not entirely new, as it was added in 2022 on an experimental basis, as of next March it will displace FID (First Input Delay) as the reference metric in Core Web Vitals.

For those who do not know the Core Web Vitals, they are a set of metrics that evaluate the user experience on web pages, which analyze from the performance or loading speed of the page, the responsiveness or interactivity of the page and the visual stability of the page when a user accesses the web.

Why are Core Web Vitals important?

Google has been trying to improve the user experience on the web for many years. Gone are the mobile versions of websites. Back in 2016 it announced mobile-first indexing and in February 2022 it announced that it was going to start taking into account the experience and performance of pages as a positioning factor.

All this interest in improving web interaction and loading times, does not respond to an altruistic spirit, but rather to a need for cost savings mainly. In a constantly growing environment, with thousands of websites created every day and hundreds of thousands of contents in different formats uploaded to the network, it needs to consume a large amount of resources just to crawl, analyze and index all the information. Although Google does not provide statistics, it is estimated that it receives around 99,000 search requests per second on its search engine.

This high demand for requests and the need, therefore, to continuously crawl the web to try to offer the best and current result possible, makes it essential that websites offer a quick response and load as soon as possible. In short, if we save processing time, we save costs to Google and it rewards us with a better valuation by the algorithm, which can lead to a better positioning and organic visibility of the web. That’s where SEOs come in as “Google’s cost managers”, trying to optimize web performance, interactivity and page stability to achieve a better positioning. But also because we believe that a really good user experience is essential to achieve the goals we set.

What is FID and what is INP?

FID (First Input Delay) translated would be something like the delay until the first user interaction with the page. This metric measures the time that elapses between the user’s first interaction with the page (scroll, click, tap, etc.) and the moment in which the browser can respond to that interaction. If too much time elapses between the two, it generates a bad experience as it gives the impression of a slow website.

INP (Interaction to Next Paint), which is the new metric launched this March and replaces FID, measures the responsiveness of the website to a user interaction. However, in this case, it evaluates the interaction time with a web element, pressing a button or clicking on a link and the browser’s reaction to that action.

So what does the change from FID to INP entail?

If we have previously taken performance into account and worked on the user experience on the page, we have a good starting point. Some adjustments may have to be made, because the parameters being analyzed are different.

If you have not worked previously, it will require a significant effort to adapt to these new standards.

We will see how it evolves and how much the change affects us. The conceptualization of which elements and events we load first on the pages may need to be changed. Since, from the SEO point of view, it would not be a priority that on websites with ads, display ads should be the first element of interaction or cookie notices on which to interact.

How do I optimize INP’s Core Web Vital?

Before we start minifying, refactoring, looking for the best CDN, analyzing page events, etc. we should analyze the point we are starting from and the real possibilities we have for optimization. There is no single solution that will allow us to improve this metric, since not all pages have the same type of interaction. A site with static image and text content, such as an online newspaper, is not the same as an online code editor, an online games website or a social network, which have many more interactions.

We must also bear in mind that each technology has both advantages and limitations. Working on an ad hoc development is not the same as working on a popular market standard, which may be more or less closed to making changes on its own core.

From the documentation provided by Google, some points can be taken into account for improvement:

1. Optimize JavaScript execution:

Break long tasks into subtasks: if a JavaScript task takes more than 50 minutes, it could be broken into smaller chunks to avoid blocking the main thread and delaying responses.

Use Web Workers: run scripts in the background separate from the main thread execution to improve responsiveness.

Reduce the impact of JavaScript: optimize, minimize and defer non-critical JavaScript to reduce its impact on initial page load and interaction time.

1. Optimize rendering:

-Avoid Layout Thrashing: avoid JavaScript that frequently modifies DOM elements in a way that forces the browser to recalculate layouts. This can seriously affect the INP.

-Optimize CSS: Minimize complex CSS selectors and animations as they can be rendering intensive.

-Efficiently load and render fonts: uses strategies to prioritize the loading and display of critical fonts efficiently.

1. Optimize the Input Delay:

Event Listeners: They must respond quickly and efficiently when a user interacts.

Prioritize interaction: make sure the browser processes user interaction before other tasks.

This whole process of performance optimization may make more or less sense, because of the effort it may involve, depending on the particular context of each site, sector and competition. What is undeniable is that we must always try to give the best possible user experience, if we want to have a good appreciation by the algorithm and the user.