Three actions to prepare for the INP, the (highly likely) future Core Web Vitals metric

Three actions to prepare for the INP, the future Core Web Vitals metric (very likely).

The FID, for First Input Delay, should soon give way to a new evaluation criterion, the Interaction to Next Paint, which is more difficult to satisfy.

Google still seems to be searchingr the right indicators to give greater relevance to Core Web Vitals. So the INP, for Interaction to Next Paint, should eventually replace the FID, for First Input Delay, or first input delay.

Remember, the FID represents the time it takes a browser to respond to a visitor’s first interaction. It doesn’t make much sense because it’s validated by almost all sites. The INP instead measures the time that elapses between the moment of the user interaction and the moment of the next update of the user interface. So the INP tries to represent the overall responsiveness of a page. It would become a full-fledged Core Web Vitals metric. The Mountain View company, in fact, announces to “provide more concrete guidelines on this measure in 2022-23”. Here are several ways to prepare for the arrival of the INP.

1. Measure INP

The INP measures interactions, such as clicking an interactive element, pressing the keyboard or screen, for touchscreens, or tapping an interactive element on a device with a touchscreen. The longest of these interactions, with a few exceptions, is chosen as the page’s INP value.

For Google to respond well to your page, the INP must be less than or equal to 200 ms. This means for the search engine that the page responds securely at all times. Beyond the 500ms response time, Google thinks your page is slow. Between 200 ms and 500 ms, it needs to be optimized.

But it is not necessarily easy to know the INP time, due to the difficulty of the measurement. To work around this, you can use several methods and even combine them. For example with the use of field data, which is based on visits from real users. According to Google, this data must be collected between different users to get a consistent average. Laboratory data, collected by simulating navigation, can also help. They are generally used to identify a problem or confirm an improvement.

It’s up to you to choose from the tools offered, such as CrUX (the Chrome User Experience Report), Google PageSpeed ​​Insights, Web Vitals JavaScript Library, or Web Vitals Extension for Chrome.

In addition to the development tools and the Search Console, Dave Lyall, digital marketing manager of Cannabis Clinic, uses, for example, Lighthouse, a laboratory tool that measures the quality of web pages, to know the INP. The “Duration” mode allows you to measure exactly what happens when a page is loaded.

Arjen Karel, web performance engineer at DPG Media, prefers the field method. “Currently, coredash.app is the only tool that measures the INP of real users,” he says.

Screenshot of coredash.app. © coredash.app

2. Take action on the site

Getting a better grade at the INP requires different actions, which require the intervention of web performance specialists, according to Arjen Karel. “Improving the INP is one of the most technical things you can do. It requires a 360-degree perspective and a lot of experience. You need to know JavaScript to know which instructions or functions are expensive and which are not. “But SEO has a voice too. It can consult these metrics and convert them into concrete actions. It can also ensure that the technical aspect does not take precedence over SEO criteria.

To improve the INP, you need to consider JavaScript. This programming language runs in the browser of the person consulting a website. Allows you to change what you want on the page, such as responses when a button is clicked or data entered on forms. Unfortunately, this enrichment also slows down the page load time for the browser because JavaScript modifies the original content.

“The first step in improving INP is making sure the browser’s main thread is idle enough to respond quickly to user input,” says Arjen Karvel. “So you have to be smart with JavaScript. This is about prioritizing critical scripts (such as visually striking libraries or third-party scripts that cannot be deferred) for rendering. And by injecting non-critical scripts just-in-time or when the browser is idle. Second, to ensure that there is always an immediate response to user input. For example, when submitting a form, give instant feedback “submit your form” and change the feedback once it is done to “Your form has been submitted”.

For Arjen Karvel, the use of the JavaScript React library should lead to the creation of a “suspense” to improve the INP. “Suspense” is a state that lies between the interaction and the final result. “Simply put, with this concept you can use a placeholder while the actual data is loaded. So while a user is waiting for a result, such as when they clicked on a search query, you can immediately show a placeholder. “

Screenshot of coredash.app. © coredash.app

Similarly, Dave Lyall improves INP by deferring scripts and removing resources, used resources that block the view, such as text and still images. “I put all the CSS and JS above the fold.”

3. Evaluate your SEO benefits

Improving INP, like other user experience criteria, shouldn’t break the fundamentals of SEO. But he could choose between two comparable sites of equal quality. For Arjen Karel “The revision of this indicator will mainly improve the UX. This is the main goal. The site will respond faster to user input and provide immediate feedback. This UX improvement will ultimately improve your SEO ”.

According to Dave Lyall, “Every single component is a cog in the Core Web Vitals.” In other words, improving your INP won’t do wonders for your SEO. Rather, these changes are part of many elements that need to be worked on to improve overall natural benchmark performance. Please note that all industries may be affected by this change. “This is for anyone who appreciates good UX,” for Arjen Karel. It should also be noted that the duration of these promotions varies according to the sites. “Some can be fixed quickly, others require a complete rewrite of the code,” analyzes Arjen Karel.

Leave a Reply

Your email address will not be published. Required fields are marked *