Core Web Vitals : comment se préparer à la mise à jour Google du 12 mars

L’Interaction to Next Paint remplace le First Input Delay en tant que Core Web Vital

Le programme Web Vitals est une initiative de Google, qui vise à fournir « des conseils unifiés pour les signaux de qualité des pages web », peut-on lire sur les pages web.dev des équipes de Chrome, destinées aux développeurs. Ces signaux définissent la qualité de l’expérience utilisateur lors de la navigation. « Chacun des Core Web Vitals représente une facette distincte de l’expérience utilisateur » et est mesuré par Google. Trois aspects sont étudiés : le chargement, la stabilité visuelle et l’interactivité.

Mi-février 2024, Google a annoncé le futur remplacement de l’indicateur d’interactivité, le « First Input Delay », par une autre métrique, « l’Interaction to Next Paint », dès le 12 mars 2024. Le géant du numérique s’explique :

Le First Input Delay (FID) représentait l’aspect réactivité du programme mais, au fil du temps, il est devenu clair qu’une nouvelle mesure était nécessaire pour capturer les aspects de l’interactivité sur le web que le FID ne faisait pas.

Ainsi, en mai 2022, Google a introduit l’Interaction to Next Paint (INP) en tant que « mesure expérimentale. INP deviendra officiellement un Core Web Vital et remplacera FID le 12 mars de cette année (…) FID sera obsolète au cours de cette transition ». Jusqu’à présent, le FID mesurait le temps entre la première interaction d’un utilisateur avec un site (son premier clic) et le moment où le navigateur était capable de répondre à cette interaction. Ainsi, sous 100 ms de temps de réaction, le FID était considéré comme « bon » par Google, dont le système d’évaluation classait ce temps de réaction sous trois dénominations : bon, à améliorer, médiocre.

Comment se préparer à la mise à jour de Google relative aux Core Web Vitals

Déterminer la qualité de son INP

À partir du 12 mars 2024, le FID va donc disparaître au profit de l’INP, une métrique similaire, destinée à capter l’interactivité et la réactivité d’un site web, selon d’autres méthodes de diagnostic offrant un aperçu plus complet sur l’expérience utilisateur réelle. Mais Google ne laisse pas les développeurs sans ressource et offre quelques conseils leur permettant de se préparer à cette évolution. Leur première tâche sera de déterminer si l’INP de leurs sites web atteint le seuil de bonne qualité.

Pour cela, Google oriente vers l’utilisation de PageSpeed Insights, qui propose un rapport où figure « l’ensemble officiel des données du programme Web Vitals », appelé CrUX (Chrome user experience report). Il est aussi possible d’obtenir des données de performance grâce à l’utilisation d’un logiciel RUM (Real user monitoring) équipé d’un support INP. Cependant, Google prévient que les données issues du CrUX peuvent être légèrement différentes de celles acquises auprès d’un RUM. Si le diagnostic révèle que votre INP est bon, il est inutile d’engager immédiatement des actions. En revanche, qualifié de « à améliorer » ou « médiocre », votre INP devra faire l’objet d’une optimisation.

Quelles actions mettre en place en cas d’INP à optimiser ?

Tout d’abord, Google explique sur son blog que « les améliorations apportées pour la métrique FID constituent une bonne base pour améliorer l’INP et la réactivité de vos pages ». Dans un second temps, la firme liste les problèmes courants qui pourraient ralentir la réactivité des sites web, entraînant de fait la dévalorisation de l’INP et, donc, de l’expérience utilisateur. Ceux-ci peuvent inclure :

• Les longues tâches JavaScript, qui prennent beaucoup de temps sur le thread principal,
• Une activité excessive du thread principal lors du chargement d’une page,
• Une structure DOM complexe et volumineuse,
• Des sélecteurs CSS complexes,
• Un rendu HMTL côté client pouvant affecter l’interactivité…

Pour répondre à ces principaux problèmes, Google oriente notamment vers une rationalisation du code JavaScript, une réduction du délai d’entrée, la simplification de la structure DOM, ou encore une optimisation des sélecteurs CSS. Google conseille d’éviter les mises en pages complexes et volumineuses, pour éviter les inconvénients liés au rendu. Tous ces conseils, et bien d’autres, sont mis à disposition des utilisateurs sur le site des équipes Chrome dédié aux développeurs. Vous pouvez en retrouver le sommaire et les différentes rubriques en suivant ce lien.