Google Core Web Vitals : Définition, mesure et optimisation

L’optimisation de l’expérience utilisateur est essentielle au succès à long terme de tout site Web. Si vous êtes propriétaire d’une entreprise, spécialiste du marketing ou développeur, Web Vitals vous aidera à mesurer l’expérience de votre site et à détecter les domaines à améliorer.

Google a récemment modifié le rapport de vitesse dans Google Search Console, qui s’appelle désormais « Core Web Vitals google ». Il tire des données du nouveau moteur Web Vitals de Google publié le 5 mai 2020.

Le nouveau rapport de google Core Web Vitals est similaire à l’ancien rapport de vitesse, mais il inclut plusieurs nouvelles mesures clés : la plus grande peinture de contenu (LCP), le délai de première entrée (FID ) et le décalage de mise en page cumulatif (CLS).

Ensuite, dans un article de blog de Google Webmasters Central le 28 mai 2020, Google a annoncé une fusion des principales métriques Web Vitals avec leurs signaux actuels d’évaluation de l’expérience utilisateur.

J’ai donc décidé de m’y atteler, de lui donner un sens et de tout mettre en place. J’espère que cela aidera nos lecteurs à comprendre ce qui se passe, ce qui a changé et comment vous pouvez planifier cette mise à jour.

c’est quoi le Core Web Vitals google ?

Core Web Vitals Google est le projet de Google visant à fournir des instructions précises sur les signaux essentiels pour offrir une meilleure expérience utilisateur. Au fil des ans, Google a développé des outils pour quantifier et rendre compte des performances Web. Certains développeurs sont habiles à utiliser ces outils, tandis que d’autres trouvent que tous ces outils et mesures sont lourds et difficiles à suivre.

Cependant, pour nous aider à nous préparer à ces changements, ils ont mis à jour les outils utilisés pour mesurer la vitesse des pages, notamment PSI, Google Lighthouse et Google Search Console Speed ​​Report.

Core Web Vitals, sont trois mesures qui évaluent l’expérience d’un utilisateur lors du chargement d’une de vos pages Web. Ces mesures évaluent la rapidité avec laquelle le contenu de votre page se charge, la rapidité avec laquelle un navigateur chargeant votre page Web peut répondre à l’entrée d’un utilisateur et l’instabilité du contenu lors de son chargement dans le navigateur.

Que sont les éléments de Google Core Web Vitals ?

Google Core Web Vitals est une composante de l’initiative Web Vitals qui s’applique à toutes les pages Web. Ils doivent être mesurés par tous les webmasters et seront présents dans tous les outils Google. Chacun des Core Web Vitals reflète un aspect unique de l’expérience utilisateur. Ces aspects sont quantifiables, mesurables et tentent de refléter l’expérience du monde réel.

Google met l’accent sur l’importance de Core Web Vitals par rapport aux autres indicateurs de performance, car ils sont cruciaux pour toutes les expériences Web.

Les attentes des utilisateurs en matière d’expérience Web peuvent varier en fonction du site et du contexte, mais certaines restent cohérentes quel que soit l’endroit où ils se trouvent sur le Web.

On peut le dire ainsi :

Les Core Web Vitals sont les exigences de tous les sites Web pour répondre aux attentes des clients.

Google identifie spécifiquement les principaux besoins en matière d’expérience utilisateur comme le chargement, l’interactivité et la stabilité visuelle.

Et ses métriques sont :

• La plus grande peinture de contenu.
• Délai de première entrée.
• Changement de disposition cumulatif

LCP – La plus grande peinture de contenu :

LCP mesure la vitesse de chargement et trace le point dans la chronologie de chargement de la page où le contenu de la page principale est susceptible de se charger. Pour offrir une bonne expérience utilisateur, le LCP doit se produire dans les 2,5 secondes suivant le chargement de la page. Pour la plupart des utilisateurs, le 75e centile des charges mobiles et de bureau est un seuil raisonnable à mesurer pour s’assurer que vous atteignez cet objectif.
Comme mentionné dans la plus grande API de peinture à contenu, les éléments pris en compte sont :

• Les éléments img
• Les éléments img dans un élément svg
• Éléments vidéo (l’image de l’affiche est utilisée)
• Un élément avec une image de fond chargée via la fonction url() (par opposition à un dégradé CSS)
• Éléments de niveau bloc contenant des nœuds de texte ou d’autres enfants d’éléments de texte de niveau en ligne.

FID – Délai de première entrée :

Le FID mesure la réactivité et le délai d’expérience de l’utilisateur lorsqu’il essaie d’interagir avec la page en premier. Les pages doivent avoir un FID inférieur à 100 millisecondes pour offrir une bonne expérience utilisateur. Pour vous assurer que vous atteignez cet objectif pour la plupart des utilisateurs, le 75e centile des charges mobiles et de bureau est un bon seuil à mesurer, tout comme le LCP. 

Le FID est la première impression de l’utilisateur sur le temps de réponse de votre site, et les premières impressions sont essentielles pour former notre impression globale de la qualité et de la fiabilité d’un site Web.

Le FID est une métrique qui mesure la réponse d’une page lors du chargement. En tant que tel, il se concentre exclusivement sur les événements d’entrée avec un comportement spécifique tels que les clics, les touchers et les pressions de touche.

D’autres interactions, telles que le défilement et le zoom, sont des actions constantes avec des restrictions de performances totalement différentes (en outre, les navigateurs peuvent souvent masquer leur latence en les exécutant sur un thread séparé).

CLS – Changement de mise en page cumulatif :

CLS mesure la stabilité visuelle et mesure la quantité de changements inattendus de mise en page du contenu de la page. Pour avoir une bonne expérience utilisateur, les pages doivent maintenir un CLS inférieur à 0,1.

Mais qu’est-ce que CLS exactement ? Essayons de comprendre.

Les changements de disposition se produisent chaque fois qu’une entité visible change sa position de départ (par exemple, les positions supérieure et gauche dans le mode d’écriture par défaut) entre deux images. De tels éléments sont considérés comme instables.

Veuillez noter que les changements de mise en page ne se produisent que lorsque les éléments existants changent d'emplacement de départ. Si un nouvel élément est ajouté au DOM ou qu’un élément actuel change de taille, cela ne compte pas comme un changement de mise en page tant que le changement ne modifie pas la position de départ des autres éléments visibles.

Il y a un élément dans l’image ci-dessus qui prend la moitié de la vue dans un cadre. Ensuite, l’élément se décale de 25 % de la hauteur de la fenêtre dans l’image suivante. Le rectangle en pointillé rouge 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, sa fraction d’impact est de 0,75.

Le navigateur examine la taille de la fenêtre et le mouvement des éléments instables entre deux images rendues pour calculer le score de décalage de mise en page. Le score de décalage de mise en page est le produit de deux mesures de mouvement : la fraction d’impact et la fraction de distance.

layout shift score = impact fraction * distance fraction

6 outils pour faire le test de google core web vitals

Voici ma liste des 6 outils que j’utilise pour faire le test et mesurer le google Core Web Vitals pour mes sites Web sous WordPress :

1. Rapport d’expérience utilisateur

Le rapport sur l’expérience utilisateur Chrome fournit des mesures sur la façon dont les utilisateurs Chrome du monde réel perçoivent les sites Web.

Les données utilisateur réelles déterminent les métriques du rapport sur l’expérience utilisateur Chrome. En conséquence, les résultats représentent l’expérience des utilisateurs réels de l’origine visitée. Par rapport aux tests virtuels ou locaux dans des environnements définis et simulés, le résultat capture l’ensemble complet des variables externes qui forment et conduisent à l’expérience utilisateur finale.

Par exemple, les variations de la population d’utilisateurs qui ont accès à une origine particulière peuvent contribuer considérablement à l’expérience utilisateur. Si davantage de visiteurs visitent le site avec des appareils modernes ou via un réseau plus rapide, les résultats peuvent apparaître « plus rapidement » même si le site n’est pas optimisé.

En comparaison, une plate-forme bien optimisée qui attire une plus petite base d’utilisateurs ou une plus grande communauté d’utilisateurs sur des appareils ou des réseaux plus lents peut sembler « lente ».

PS Le rapport sur l’expérience utilisateur Chrome est disponible en tant que projet public Google BigQuery. Pour y accéder, vous aurez besoin d’un compte Google et d’un projet Google Cloud.

2. PageSpeed Insights

PageSpeed ​​Insights (PSI) est un outil de test de vitesse qui analyse le contenu d’une page Web, puis fournit des suggestions pour améliorer la vitesse. PSI a maintenant été mis à niveau pour utiliser Lighthouse 6.0, qui permet de mesurer les éléments essentiels du Web dans les sections de laboratoire et de terrain du rapport.

3. Search Console

Le rapport Search Console affiche les performances des URL regroupées par statut, type de métrique et groupe d’URL (groupes de pages Web similaires).

Il est basé sur trois métriques Core Web Vitals : LCP, FID et CLS. Si une URL n’a pas de données de rapport minimales pour l’une de ces métriques, elle est omise du rapport. Une fois qu’une URL a un seuil de données pour n’importe quelle métrique, le statut de la page est le statut de sa métrique la plus faible.

4. Lighthouse

Lighthouse est une plate-forme open source pour améliorer les performances du site Web. Vous pouvez l’exécuter pour n’importe quelle page Web, publique ou privée. Il comporte des audits de performance, des tests d’utilisabilité, un audit progressif d’applications Web, un référencement, etc.

Vous pouvez exécuter Lighthouse à partir de la ligne de commande dans Chrome DevTools ou en tant que module de nœud. Vous donnez à Lighthouse une URL d’audit, exécutez une série d’audits sur la page, puis générez un rapport sur les performances de la page. Utilisez les audits échoués comme indicateurs pour améliorer la page. Chaque audit a un document de référence expliquant pourquoi et comment corriger l’audit.

Récemment, Lighthouse a été mis à jour vers la version 6.0, qui inclut des audits supplémentaires, de nouvelles métriques et un nouveau score de performance.

5. Outils de développement Chrome DevTools

Chrome DevTools est une suite d’outils de développement Web directement intégrés à Google Chrome. DevTools peut vous aider à modifier rapidement des pages à la volée et à résoudre les problèmes afin que vous puissiez éventuellement créer de meilleurs sites Web plus rapidement.

Chrome DevTools a également été mis à jour pour aider les propriétaires de sites à trouver et à résoudre les problèmes d’instabilité visuelle sur une page pouvant entraîner un décalage de mise en page cumulatif (CLS).

Sélectionnez un changement de mise en page à afficher dans l’onglet Résumé. Pour visualiser où le changement lui-même s’est produit, survolez les champs Déplacer vers. Chrome DevTools teste également le temps de blocage total (TBT), ce qui est très utile lors de l’optimisation du délai de première entrée (FID).

TBT s’affiche dans le pied de page du panneau Chrome DevTools Performance lors du test des performances de la page.

6. Extension Chrome Web Vitals

Les trois principales métriques Web Vitals sont désormais disponibles dans une nouvelle extension Chrome que vous pouvez télécharger ici .

Cette extension mesure Core Web Vitals, fournissant des commentaires en temps réel sur les métriques de chargement, d’interactivité et de changement de mise en page. Cela est cohérent avec la façon dont Chrome teste ces métriques et rapporte aux autres outils de Google.

Lorsqu’il est activé, il affiche une icône de badge d’état désactivé avant que vous ne naviguiez vers une URL. À ce stade, le badge vert ou rouge sera mis à jour selon que l’URL dépasse les seuils de métriques Core Web Vitals.
Le badge a plusieurs états :

• Désactivé-marron
• Passage vert
• Échec d’une ou plusieurs métriques-rouge

En cas de dysfonctionnement d’une ou plusieurs métriques, le badge animera ces métriques.

Comment améliorer le Core Web Vitals de votre site

Une fois que vous avez extrait votre rapport, il est temps d’apporter quelques modifications.

Vous pourrez améliorer le LCP en limitant la quantité de contenu que vous affichez en haut de la page Web aux informations les plus critiques. Si ce n’est pas d’une importance critique pour un problème que le visiteur essaie de résoudre, déplacez-le vers le bas de la page.

L’amélioration du FID est simple, et il y a quatre problèmes principaux que vous devrez résoudre :

1. Réduisez l’impact du code tiers : si vous avez un tas de processus différents qui se déroulent simultanément, il faudra plus de temps pour que l’action commence à fonctionner.
2. Réduisez le temps d’exécution de JavaScript : envoyez uniquement le code dont vos utilisateurs ont besoin et supprimez tout ce qui est inutile.
3. Minimiser le travail sur le fil principal : le fil principal fait la plupart du travail, vous devez donc réduire la complexité de votre style et de vos mises en page si vous rencontrez ce problème.
4. Gardez le nombre de demandes bas et les tailles de transfert réduites : assurez-vous que vous n’essayez pas de transférer des fichiers volumineux.

L’amélioration de CLS nécessite de prêter attention aux attributs de taille et aux éléments vidéo sur tous les supports. Lorsque vous laissez suffisamment d’espace pour un élément de contenu avant qu’il ne se charge, vous ne devriez pas rencontrer de changement de page pendant le processus.

Cela aide également à limiter les animations de transformation car beaucoup d’entre elles déclencheront des changements de mise en page, que vous le vouliez ou non.

Core Web Vitals – FAQs

Conclusion

Savons-nous exactement quel est l’impact des éléments essentiels du Web sur nos rangs ? Non, nous ne le faisons pas. Mais Google accorde beaucoup plus d’attention à l’expérience sur la page.

Les propriétaires de sites ne devraient pas avoir à être des gourous de la performance pour comprendre la qualité de l’expérience de leurs utilisateurs. L’initiative Web Vitals de Google est une tentative de rendre ce paysage un peu plus simple pour tout le monde et d’aider les sites à se concentrer sur la métrique la plus critique Core Web Vitals google (au moins dans les temps à venir).

Cette mise à jour devrait sortir en 2021, et Google a confirmé qu’il n’était pas nécessaire de prendre des mesures immédiates.

Votre site Web suit-il les meilleures pratiques pour Core Web Vitals ? Faites le nous savoir!