Qu’est-ce que le Core Web Vitals ?

La finalité des Core Web Vitals est de mesurer l’expérience réelle de l’utilisateur, en effet Google prendra davantage en compte cet indicateur de performance dans le positionnement des pages web.

De quoi sont constitué les Core Web Vitals ?

Afin d’améliorer l’expérience des internautes, Google a mis en place 3 indicateurs.

• LCP – Largest Contentful Paint : Représente le temps de chargement nécessaire pour afficher le contenu le plus large sur la page.
• FID – First Input Delay : Mesure le temps entre le moment où un utilisateur interagit pour la première fois avec une page (c’est-à-dire lorsqu’il clique sur un lien, appuie sur un bouton ou utilise un contrôle personnalisé alimenté par JavaScript) jusqu’au moment où le navigateur est réellement en mesure de commencer à traiter les gestionnaires d’événements en réponse à cette interaction.
• CLS – Cumulative Layout Shift : Mesure la stabilité visuelle, autrement dit la totalité des changements de mise en page inattendus se produisant sur la durée de vie entière d’une page (ex un bouton qui se déplace quand on veut cliquer dessus).

Comprendre le CLS

Il prend tous les points auxquels les changements de disposition se produisent et calcule la gravité de ces mouvements. Google considère que tout ce qui est inférieur à 0,1 est bon, tandis que tout ce qui est compris entre 0,1 et 0,25 a besoin de travail. Vous pouvez considérer tout ce qui est au-dessus de 0,25 comme mauvais. 

Comment est-il calculé ?

Pour calculer le score de décalage de mise en page, le navigateur examine la taille de la fenêtre et le mouvement des éléments instables dans la fenêtre entre deux images rendues. Le score de décalage de mise en page est le produit de deux mesures de ce mouvement : la fraction d’impact et la fraction de distance (toutes deux définies ci-dessous).

layout shift score = impact fraction * distance fraction

Fraction d’impact

La fraction d’impact mesure l’ impact des éléments instables sur la zone de la fenêtre entre deux images.

L’union des zones visibles de tous les éléments instables pour l’image précédente et l’image actuelle, en tant que fraction de la surface totale de la fenêtre, est la fraction d’impact pour l’image actuelle.

Dans l’image ci-dessus, il y a un élément qui occupe la moitié de la fenêtre dans une seule image. Ensuite, dans l’image suivante, l’élément se déplace vers le bas de 25 % de la hauteur de la fenêtre. Le rectangle rouge en pointillé indique l’union de la zone visible de l’élément dans les deux cadres, qui, dans ce cas, représente 75 % de la totalité de la fenêtre, donc sa fraction d’impact est 0.75.

Fraction de distance

L’autre partie de l’équation du score de décalage de mise en page mesure la distance de déplacement des éléments instables par rapport à la fenêtre. La fraction de distance est la plus grande distance parcourue par un élément instable dans le cadre (horizontalement ou verticalement) divisée par la plus grande dimension de la fenêtre (largeur ou hauteur, selon la plus grande).

Dans l’exemple ci-dessus, la plus grande dimension de la fenêtre est la hauteur et l’élément instable s’est déplacé de 25 % de la hauteur de la fenêtre, ce qui fait que la fraction de distance est de 0,25.

Ainsi, dans cet exemple, la fraction d’impact est 0.75et la fraction de distance est 0.25, donc le score de décalage de mise en page est 0.75 * 0.25 = 0.1875.

Comment optimiser le référencement SEO avec les Core Web Vitals ?

Grâce à des outils comme PageSpeed Insights, web.dev ou l’extension Lighthouse pour Google Chrome, il vous est possible de mesurer les Core Web Vitals de chacune des pages de votre site web. Ces outils digitaux vous offrent de précieuses informations sur votre score en expérience utilisateur, que ce soit sur ordinateur ou sur mobile.

Ci-dessous, une analyse de Youtube avec PageSpeed Insights.

Pour chaque page de votre site, il faut essayer d’obtenir un score d’au moins 50/100 sur desktop, et d’au moins 15/100 sur mobile pour être dans la moyenne. Si possible, il faut toujours veiller à faire encore mieux que ces scores afin de vous classer devant vos concurrents.
Ces outils vous prodiguent de nombreux conseils sur les différents points d’amélioration qui vous permettraient d’augmenter votre score si cela s’avère nécessaire.

Les principes directeur du CLS

• Incluez toujours des attributs de taille sur vos images et éléments vidéo, ou réservez l’espace requis avec quelque chose comme des boîtes de rapport d’aspect CSS. Cette approche garantit que le navigateur peut allouer la bonne quantité d’espace dans le document pendant le chargement de l’image. Notez que vous pouvez également utiliser la stratégie de fonctionnalité de média non dimensionné pour forcer ce comportement dans les navigateurs qui prennent en charge les stratégies de fonctionnalité.
• N’insérez jamais de contenu au-dessus d’un contenu existant, sauf en réponse à une interaction de l’utilisateur. Cela garantit que tous les changements de mise en page qui se produisent sont attendus.
• Préférez les animations de transformation aux animations de propriétés qui déclenchent des changements de mise en page. Animez les transitions de manière à fournir un contexte et une continuité d’un état à l’autre.
• Supprimer le CSS inutile : il arrive souvent que du CSS (langage de programmation permettant de mettre en forme le langage HTML) soit présent sur le site alors qu’il est inutile. Pensez donc à détecter ces passages et à les supprimer.
• Réduire le JavaScript inutile : le JavaScript (ou JS pour les intimes) est lui aussi un langage de programmation. Parfois, certaines lignes de code de ce JS ne sont pas utiles et peuvent être supprimées.
• Utiliser des plugins légers : certains plugins peuvent paraître intéressants de prime abord, mais attention à ce qu’ils ne ralentissent pas trop votre site…