Que sont les Core Web Vitals (CWV) ?

Les Core Web Vitals (CWV) sont trois mesures de performance web qui ont un impact sur l'emplacement d'un site web dans les résultats des moteurs de recherche : Largest Contentful Paint (LCP), First Input Delay (FID) et Cumulative Layout Shift (CLS).

Objectifs d’apprentissage

Cet article s'articule autour des points suivants :

  • Dressez la liste des trois Core Web Vitals
  • Décrire comment les vitales du Web ont une incidence sur l'optimisation des moteurs de recherche (SEO).
  • Savoir comment améliorer les Vitaux Web de base d'un site web

Copier le lien de l'article

Que sont les Core Web Vitals (CWV) ?

Les Core Web Vitals (CWV) sont un ensemble de trois mesures des performances web. Le moteur de recherche de Google mesure ces trois paramètres afin de déterminer les sites Web à afficher lorsqu'un utilisateur effectue une recherche. Si le temps de chargement des pages est depuis longtemps un élément important de l'optimisation des moteurs de recherche (SEO), Google se concentre spécifiquement sur les CWV dans le cadre de ses algorithmes de classement depuis mi-2021.

Les CWV sont :

  1. Largest Contentful Paint (LCP), qui mesure la vitesse de chargement.
  2. L'indicateur First Input Delay (FID), qui mesure l'interactivité.
  3. L'indicateur Cumulative Layout Shift (CLS), qui mesure la stabilité visuelle.

Comment les Core Web Vitals affectent-ils SEO ?

Tous les moteurs de recherche utilisent des bots, appelés robots d'indexation ou web spiders, pour analyser les sites Web. Ces bots déterminent la nature du contenu de chaque site Web et aident à déterminer quand ce site doit être affiché en réponse à une requête de recherche. Les performances du Web sont l'un des aspects d'un site Web que les bots de Google vérifient.

On ne sait pas précisément dans quelle mesure LCP, FID et CLS affectent le référencement, car Google garde ses algorithmes de classement secrets pour la plupart. Mais les CWV ont bel et bien un impact sur le SEO dans une large mesure. Google a annoncé l'incorporation de CWV dans son algorithme en juin 2021. Et de nombreux observateurs du secteur ont réalisé des études de cas démontrant des améliorations ou des pertes dans les classements de recherche en fonction des changements dans les CWV d'un site Web.

Comment cela se passe-t-il dans la réalité ? Supposons que Google doive choisir entre placer le site Web A et le site Web B en tête des résultats de recherche pour la requête « What is ARPANET ? » Les sites Web A et B sont tous deux réputés pour leur capacité à fournir des informations sur l'histoire de l'Internet, et tous deux fournissent des informations détaillées similaires sur le sujet ARPANET. Toutes choses égales par ailleurs, si le site Web A se charge plus rapidement, répond plus vite et saute moins de temps au chargement que le site Web B, l'algorithme de Google décidera probablement d'afficher le site Web A en tête des résultats de recherche, même si les sites Web fournissent un calibre similaire d'informations.

(Les classements des moteurs de recherche sont plus complexes que ce qui est décrit dans cet exemple, et des dizaines de facteurs influent sur l'endroit où un site web apparaîtra dans les recherches).

Pourquoi Google prend-il en compte les performances web ?

Les moteurs de recherche comme Google veulent fournir aux chercheurs les informations les plus pertinentes le plus rapidement possible. Les retards de chargement ont tendance à frustrer les utilisateurs - à l'inverse, les pages à chargement rapide augmentent les chances que les utilisateurs reviennent. Si Google détient aujourd'hui la grande majorité du marché de la recherche anglophone, une expérience utilisateur médiocre peut inciter les internautes à se tourner vers d'autres sources d'information.

Pour des raisons similaires, d'autres moteurs de recherche comme DuckDuckGo et Bing peuvent également prendre en compte les performances web - bien que, comme pour Google, on ne sache pas avec certitude comment fonctionnent leurs algorithmes de classement des pages.

Qu'est-ce que le Largest Contentful Paint (LCP) ?

LCP mesure le temps nécessaire pour charger le plus gros élément d'une page web, qui est généralement une image ou un bloc de texte.

LCP ne mesure pas le temps nécessaire au chargement d'une page web entière, mais il fournit un bon point de repère pour indiquer la vitesse de chargement d'une page web. En général, l'élément le plus important d'une page web est son contenu principal, de sorte que le moment où il se charge est souvent bien aligné avec le moment où l'utilisateur perçoit que la page est chargée.

Les experts suggèrent que le LCP devrait prendre 2,5 secondes au maximum. Cependant, plus vite est toujours mieux.

Qu'est-ce que le First Input Delay (FID) ?

Le FID est une mesure du temps qui s'écoule entre la première tentative d'interaction d'un utilisateur avec une page web et la réponse de celle-ci. En d'autres termes, le FID quantifie le moment où une personne peut cliquer pour la première fois sur l'écran et faire bouger les choses. Idéalement, le FID d'une page web est de 100 millisecondes ou moins.

Supposons qu'Alan visite une page Web intitulée « Comment cirer ses chaussures ». Il voit un carrousel de photos de produits de nettoyage pour chaussures en haut de la page et clique sur la flèche de droite pour passer à la photo suivante. Le FID est le temps qui s'écoule entre le moment où il clique sur la flèche et celui où la photo suivante commence à se charger.

Le FID ne mesure pas le temps nécessaire pour que l'événement demandé se produise réellement - le temps que met le navigateur d'Alan pour finir de charger la photo suivante. Il mesure uniquement le temps entre la demande et le moment où la demande commence à être satisfaite.

Qu'est-ce que le « Cumulative Layout Shift » (CLS) ?

CLS mesure l'ampleur des sauts d'une page Web lors de son chargement. Plus précisément, il mesure la plus grande explosion des déplacements dans la mise en page de la page.

On parle de changement de mise en page lorsque le contenu d'une page se déplace vers le haut, vers le bas ou dans toute autre direction par rapport à son emplacement initial. Dans le contexte de cette mesure, une rafale est un groupe de changements de mise en page qui se produisent tous à une seconde d'intervalle. Une rafale peut durer jusqu'à cinq secondes et contenir un nombre quelconque de changements de présentation.

Imaginez qu'après avoir chargé la page « Comment cirer ses chaussures », Alan essaie de cliquer sur la flèche droite pour voir l'image suivante dans le carrousel. Cependant, le carrousel d'images se déplace soudainement vers le bas de la page et Alan finit par cliquer sur le texte qui se charge au-dessus du carrousel. La page Web s'est déplacée parce qu'elle ne s'est pas chargée en même temps, et Alan ne sait plus où donner de la tête.

Une telle page Web a probablement un mauvais score CLS. Elle a manifestement beaucoup bougé, déplaçant le carrousel de photos vers le bas de plusieurs dizaines ou centaines de pixels.

Comment le CLS est mesuré

Google calcule les scores CLS à l'aide de l'équation suivante :

fraction d'impact * fraction de distance = score de décalage de disposition

  • Fraction d'impact est le pourcentage de l'écran qui change lorsqu'un changement de disposition se produit.
  • Fraction de distance mesure la distance à laquelle un élément se déplace à l'écran, également sous forme de pourcentage de l'écran.

Si une page Web se charge sur un écran de 400 pixels de haut, et que 200 de ces pixels se déplacent lorsqu'un nouvel élément se charge, la fraction d'impact est de 200/400, soit 50 %. Si le nouvel élément a déplacé un autre élément de 50 pixels vers le bas, la fraction de distance est de 50/400, soit 12,5 %.

Pour calculer le score de changement de disposition, prenez ces deux pourcentages et écrivez-les sous forme de décimales, puis multipliez-les ensemble :

0.50 * 0,125 = 0,0625

S'il s'agit de la plus grande quantité de mouvement que possède la page web, le score CLS de la page web est de 0,0625.

Bien que l'idéal soit qu'une page Web ne bouge pas du tout lors de son chargement, ce score reste correct. Les experts recommandent que les pages Web aient un score CLS de 0,10 ou moins.

Comment les développeurs peuvent-ils optimiser les sites web pour ces trois paramètres ?

Comment améliorer le LCP

  • Utilisez un réseau de diffusion de contenu (RDC) : les RDC mettent le contenu en cache dans des endroits situés dans le monde entier afin que le contenu parvienne plus rapidement aux utilisateurs.
  • Optimiser les images : les images sont souvent l'élément le plus volumineux d'une page. La réduction de la taille des fichiers d'image peut contribuer à accélérer le temps de chargement d'une image.

Comment améliorer le FIP

  • Réduisez la taille des fonctions JavaScript : les pages Web dynamiques à fort code peuvent entraîner des retards de saisie, car le navigateur doit attendre que tout le code soit chargé avant de pouvoir l'exécuter. La minimisation de JavaScript peut aider à accélérer ce processus.
  • Créez des pages Web statiques : les pages Web HTML statiques se chargent beaucoup plus rapidement que les pages dynamiques, surtout lorsqu'elles sont distribuées via un RDC. Découvrez les générateurs de sites statiques ou Jamstack, une philosophie de développement qui privilégie le contenu statique.

Comment améliorer le CLS

  • Réduisez au minimum les éléments tiers de la page : les éléments tiers d'une page se chargent à partir d'emplacements distincts par rapport au reste de la page. De ce fait, ils peuvent se charger à un moment légèrement différent, modifiant ainsi la mise en page de la page lors de leur chargement. En minimisant l'utilisation de ces éléments tiers, vous réduisez le nombre de modifications de la mise en page.
  • Réserver de l'espace pour le contenu intégré : de nombreux éléments tiers, tels que les publicités, sont essentiels à la fonctionnalité ou au modèle économique d'un site Web et ne peuvent être éliminés. Les développeurs peuvent réserver un espace sur la page Web pour le chargement de ces éléments avant que le navigateur ne récupère l'élément réel.
  • Veillez à ce que les images se chargent à la taille optimale : . il s'agit d'un processus légèrement différent de l'optimisation des images en général. Les ordinateurs de bureau, les tablettes et les smartphones ont tous besoin d'images de tailles légèrement différentes, car la taille de leurs écrans varie. Si un navigateur charge d'abord la grande image optimisée pour les ordinateurs de bureau, puis doit obtenir l'image optimisée pour les mobiles parce que l'appareil utilisé est un smartphone, le contenu de la page peut sauter lorsque l'image de taille différente se charge.
  • Indiquez la hauteur et la largeur des images et des vidéos : les propriétés hauteur et largeur indiquent aux navigateurs la taille d'une image afin qu'ils puissent réserver cet espace avant le chargement de l'image ou de la vidéo. Notre article sur la vidéo HTML5 contient des informations supplémentaires sur la manière de procéder pour la vidéo.
  • Utilisez les boîtes de rapport d'aspect CSS : Il existe un certain nombre de techniques CSS que les développeurs peuvent utiliser pour préserver l'espace d'un élément de page en utilisant les rapports d'aspect - pour en savoir plus.

Cloudflare propose également plusieurs services spécifiquement destinés à améliorer les Core Web Vitals. Consultez cet article pour en savoir plus : Comment utiliser Cloudflare pour optimiser votre site Web pour Core Web Vitals.

Quels sont les autres indicateurs de performance importants ?

Il existe un certain nombre d'autres Vitaux Web en plus des CWV. First Contentful Paint (FCP), DOMContentLoaded (DCL), Time to Interactive (TTI), et temps jusqu'au premier octet (TTFB) n'ont pas le même impact sur le SEO, mais ils peuvent aider les développeurs à identifier les problèmes qui ont un impact sur les CWV.

(En soi, le TTFB n'est pas une mesure particulièrement utile. Mais elle peut être une indication de problèmes supplémentaires que les développeurs doivent résoudre).

Ceux qui souhaitent en savoir plus peuvent télécharger ce livre blanc, qui contient un glossaire définissant un certain nombre de mesures de performance.