C'est quoi les "Core Web Vitals" ?
Les Signaux Web Essentiels
Définition
À l’école, les professeurs notent les copies que les élèves leurs remettent, en fonction de critères précis. Si les éléments attendus sont bien présents, alors la copie se voit attribuer une bonne note.
Sur Internet, cela fonctionne un peu de la même manière : Google est le professeur qui va lire votre site, évaluer s’il respecte les critères demandés, et lui attribuer une note qui influencera son classement dans les résultats de recherche.
Ces critères sont regroupés sous la désignation : « Core Web Vitals » ou, en français, « Signaux Web Essentiels ».
Raison d'être des Core Web Vitals
L’objectif principal de Google reste toujours la satisfaction de ses utilisateurs.
D’une manière générale, lorsqu’on navigue sur le web, on n’y pense pas (parce que les sites sont, pour la plupart, bien conçus) mais il est important de pouvoir accéder rapidement, et de manière simple et sécurisée, au contenu que l’on recherche.
Le respect des Core Web Vitals permet d’atteindre cet objectif.
Description des Core Web Vitals
Google va analyser chaque page de votre site pour déterminer des notes qui seront relatives à la page concernée. Notez que sur un même site, une page (en fonction de sa construction et des éléments qu’elle contient) peut obtenir un bon résultat, alors qu’une autre fera un score inférieur.
Les Signaux Web Essentiels sont regroupés en 4 grandes catégories : les performances, l’accessibilité, les bonnes pratiques, et le SEO.
Chaque catégorie se voit attribuer une note sur 100.
de 0 à 49 : doit être amélioré
de 50 à 89 : améliorations souhaitables
de 90 à 100 : bon
Je vous propose ci-dessous des listes de critères importants relatifs aux Core Web Vitals. Ces listes ne sont pas exhaustives.
Les performances
First Contentful Paint (FCP)
« Première peinture de contenu » : mesuré en secondes, c’est le délai entre le début du chargement de la page, et le moment où le visiteur va pouvoir commencer à la consulter.
Certains éléments, comme les images, mettront généralement plus de temps à apparaître que les textes, qui pèsent beaucoup moins lourd. Pour ce critère, l’optimisation des pages prend tout son sens car elle peut grandement influer sur le FCP.
Largest Contentful Paint (LCP)
« Plus grande peinture de contenu » : il s’agit ici du temps nécessaire à l’affichage de l’élément le plus lourd apparaissant à l’écran, au moment d’arriver sur la page.
Une page internet est constituée de « blocs » : un titre peut être un bloc, tout comme un paragraphe, une image isolée, ou un ensemble d’images… Cela dépend des choix que fait le développeur qui construit le site. Selon la teneur de ces blocs, et leur optimisation, le temps d’affichage peut varier considérablement.
Le LCP se mesure, lui aussi, en secondes.
Total Blocking Time (TBT)
« Temps de blocage total » : c’est le délai entre l’affichage de la page, et le moment où le visiteur peut interagir avec celle-ci.
En effet, le rendu visuel de la page peut être terminé, sans que vous ne puissiez immédiatement entrer votre mot de passe, ou obtenir une réponse instantanée en cliquant sur un lien… Ici on ne parle plus de l’affichage, mais de l’interactivité.
La mesure du TBT se fait en millisecondes.
Cumulative Layout Shift (CLS)
Une traduction littérale serait : « changement de mise en page cumulé ».
Le score CLS est déterminé en tenant compte de 2 facteurs : la quantité de contenu qui se déplace (de manière inattendue) sur la page, et l’ampleur des changements que cela entraîne.
Cette métrique a été mise en place car les mouvements sur la page peuvent perturber la navigation, par exemple en détournant l’attention du visiteur alors qu’il lit un paragraphe.
Un score satisfaisant ne doit pas dépasser 0.25 (il n’y a pas d’unité de mesure définie pour la métrique CLS).
Speed Index
« Index de rapidité » : c’est la vitesse à laquelle le contenu s’affiche au chargement de la page.
Cet index ne doit jamais dépasser 5.8 secondes.
L'accessibilité
Attribut "alt"
Il s’agit du « texte alternatif » associé à une image. Lorsqu’un visiteur souffrant de déficience visuelle utilise un lecteur d’écran, c’est ce texte qui va être prononcé. De plus, si, pour une raison quelconque, une image ne peut être affichée à l’écran par un navigateur, elle sera remplacée par le contenu de cet attribut « alt ».
Affichage responsive
Vos pages doivent s’afficher aussi bien sur smartphone que sur tablette, ou ordinateur. Contrairement à ce qu’on pourrait penser, cette adaptation n’est pas automatique. Si le fait de passer par un CMS (Content Management System), comme WordPress, facilite les choses, il est nécessaire de retravailler chaque page en fonction de chaque type de terminal susceptible d’être utilisé par le visiteur.
Éléments cliquables
Les lecteurs d’écran ne « voient » pas les pages : ils lisent le code qui permet l’affichage des pages. C’est pour cette raison que le code des éléments cliquables (c’est-à-dire tous les liens présents sur un site, sous forme de texte, d’image, ou autre) doit bien indiquer qu’il s’agit d’un lien.
De la même manière, le visiteur lambda doit pouvoir, lui aussi, repérer facilement ce qui est un lien sur la page.
Attribut "aria"
Le code HTML (grâce auquel le contenu est inséré sur les pages) contient plusieurs types de balises dont certaines sont dites « sémantiques » : elles ont un sens pour Google et pour les lecteurs d’écrans. Elles annoncent ce qu’est l’élément qu’elles englobent. Or, le recours à l’attribut « aria » peut masquer la sémantique d’un élément, ce qui va inévitablement nuire à l’accessibilité, et donc au référencement. Cet attribut est donc à utiliser avec précautions.
Les bonnes pratiques
HTTPS
Chaque page internet a une URL (adresse web) qui lui est propre. Chacune de vos URL doit avoir le protocole HTTPS, pour HyperText Transfer Protocol Secure. Ceci indique que toutes les transactions de données sont chiffrées, protégeant ainsi vos visiteurs contre un vol d’informations.
Un bon affichage des images
Il est important que les images s’affichent dans des proportions proches de leur format d’origine : il faut éviter de déformer les images pour qu’elles s’adaptent aux emplacements où on souhaite les afficher, ce qui pourrait entraîner un mauvais rendu et, de fait, des pénalités au niveau des « bonnes pratiques ».
Un autre point à prendre en compte est la qualité des images : les dimensions qu’on leur donne sur la page doivent être adaptées à leurs dimensions d’origine.
Le SEO
Pour cette partie, je vous invite à consulter la page principale sur le référencement naturel.