Que sont les Core Web Vitals (CWV) ?

Que sont les Core Web Vitals (CWV) ?

Les Core Web Vitals (CWV) sont un ensemble de trois mesures de la performance web.Le moteur de recherche de Google mesure ces trois paramètres et les intègre dans ses décisions concernant les pages à afficher dans les résultats de recherche. Cela signifie que les praticiens de l'optimisation des moteurs de recherche (SEO) doivent optimiser les éléments vitaux de leurs pages Web dans le cadre d'une stratégie holistique visant à améliorer le classement de ces pages.

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.

Qu'est-ce que la mise à jour de l'expérience des pages de Google ?

Alors que le temps de chargement des pages est depuis longtemps un élément important du référencement, Google a annoncé en 2020 que les CWV feraient partie de son algorithme de classement à la mi-2021. C'est ce qu'on appelle la mise à jour de l'expérience des pages de Google.

Dans son annonce, Google a déclaré que les CWV seraient pris en compte dans les signaux d'expérience des pages qui permettent de déterminer le classement d'une page dans les résultats de recherche. Parmi les autres facteurs liés à l'expérience de la page, citons HTTPS-security, la convivialité mobile et l'absence ou la présence d'interstitiels intrusifs (comme les fenêtres pop-up). L'objectif de cette mise à jour était de récompenser les pages web qui offrent une expérience positive aux utilisateurs.

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 exactement dans quelle mesure LCP, FID et CLS affectent le référencement, car Google garde ses algorithmes de classement secrets. Mais les CWV ont un impact significatif sur le référencement. De nombreux observateurs du secteur ont réalisé des études de cas démontrant des améliorations ou des pertes de classement dans les moteurs de recherche en fonction des modifications des 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 intègre-t-il les performances Web dans les décisions de classement ?

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) ?

Largest Contentful Paint mesure le temps qu'il faut pour charger le plus gros morceau d'une page Web, qui est généralement une image ou un bloc de texte.

Selon les directives de Google, une mesure du LCP est considérée comme « bonne » si elle est inférieure à 2,5 secondes. Cependant, il est toujours préférable d'être plus rapide.

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.

Une version antérieure de la mesure LCP est le First Meaningful Paint (FMP) qui mesure le moment où le contenu principal d'une page devient visible. Google a constaté que cette mesure n'était pas fiable et l'a depuis supprimée de certains de ses outils de reporting.

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

Le délai de première entrée 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 DIF quantifie la rapidité avec laquelle une personne peut cliquer sur l'écran et faire quelque chose. Selon les directives de Google, un « bon » DIF est de 100 millisecondes ou moins.

Pour un exemple de FID, supposons qu'Alan visite une page web intitulée « Comment cirer vos chaussures. » Il voit un carrousel de photos de cirage 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.

Notez que le FID est une « métrique de terrain », c'est-à-dire quelque chose qui est mesuré sur la base de l'observation d'utilisateurs réels plutôt que de façon hypothétique ou dans un « laboratoire ».

Parmi les alternatives de « métrique de laboratoire », citons le temps de blocage total (TBT) et le temps d'interaction (TTI). Le TBT mesure le temps qui s'écoule entre la première peinture contenue (FCP) et le TTI. Le PCF mesure le temps entre le début du chargement et le moment où les éléments se chargent sur l'écran de l'utilisateur. Comme son nom l'indique, le TTI mesure le temps nécessaire pour que les éléments semblent avoir été chargés et pour qu'un utilisateur puisse effectivement interagir avec eux.

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

CLS mesure la quantité de sauts d'une page web « à » pendant son chargement. Plus précisément, il mesure le plus grand « burst » des décalages dans la mise en page de la page. Selon les directives de Google, une « bonne » mesure CLS est égale ou inférieure à 0,1.

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 mesurer Core Web Vitals

Il existe de nombreux outils qui peuvent être utilisés pour vérifier les CWV. Les offres suivantes sont toutes proposées directement par Google :

• Chrome UX Report (CrUX) offre des données de terrain rapportées par les utilisateurs de Chrome, donnant aux propriétaires de sites des données sur la façon dont les utilisateurs réels vivent leur site Web.
• Google Lighthouse est un outil gratuit qui fournit des mesures de laboratoire sur les CWV. Il offre des informations exploitables pour améliorer les performances, le référencement, l'accessibilité, etc.
• Google PageSpeed Insights combine les fonctionnalités de CrUX et de Lighthouse, offrant à la fois des données de terrain et de laboratoire sur les CWV et d'autres vitales du web. Les utilisateurs peuvent vérifier les performances des sites Web, qu'ils en soient ou non propriétaires, grâce à PageSpeed Insights. Voici un exemple de rapport PageSpeed Insights.
• Google Search Console se base en partie sur les données du champ CrUX et fournit des données de performance CWV par URL ou groupes d'URL.

Comment améliorer Core Web Vitals

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.
• Mettre en œuvre le chargement paresseux : Dans le cadre du chargement paresseux, les ressources du site Web ne sont chargées que lorsque l'utilisateur en a besoin.Cela rend le chargement des sites Web plus efficace jusqu'à un certain point, mais les recherches suggèrent qu'une utilisation excessive de cette fonction est corrélée à une baisse du LCP.C'est pourquoi Google suggère de limiter les images de chargement paresseux « sous le pli » ou aux parties de la page Web que l'utilisateur doit faire défiler pour les voir.

Comment améliorer le FID

• 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.
• Supprimez les outils et les scripts tiers inutiles :
Le chargement d'outils supplémentaires sur votre site web peut également ralentir les performances. La réduction du nombre d'outils tiers sur un site web peut améliorer le DIF et la vitesse du site en général.

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.

Quels sont les autres indicateurs de performance importants ?

Si les CWV sont les mesures que Google a indiqué aux spécialistes du référencement qu'ils devaient privilégier, ce ne sont pas les seules vitales du web qui existent.First Contentful Paint (FCP), DOMContentLoaded (DCL), Time to Interactive (TTI), et Time to First Byte (TTFB) n'ont pas le même impact sur le référencement, 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).

Comment Cloudflare peut aider à améliorer les CWVs

Cloudflare offre une variété de services qui peuvent aider à stimuler les CWV :

• Le réseau de diffusion de contenu (CDN) de Cloudflare met en cache du contenu statique et dynamique sur un réseau mondial couvrant plus de 330 villes dans plus de 120 pays. Cela permet aux sites web de se charger plus rapidement, ce dont bénéficient les trois CWV.
• Cloudflare Images offre une fonctionnalité de redimensionnement qui permet de compresser les images et d'augmenter encore la vitesse de chargement des sites Web, notamment pour LCP.
• Cloudflare Zaraz charge les ressources tierces dans le nuage et loin du navigateur, améliorant ainsi les mesures telles que FID et CLS.