Core Web Vitals, les nouvelles mesures de l'expérience utilisateur de Google, sont composées de trois mesures que les webmasters et les référenceurs devront garder à l'esprit à l'avenir: chargement, interactivité et stabilité visuelle. Étant donné que Core Web Vitals est basé sur l'expérience utilisateur, ils sont mesurés avec des données de terrain différentes des données de laboratoire précédemment utilisées qui identifient un moment spécifique pendant le processus de chargement de la page. En combinaison avec d'autres composants liés à la sécurité du site Web et à la convivialité, Core Web Vitals sera ajouté au facteur de classement de l'expérience de page en mai 2021. Lisez la suite pour découvrir tout ce que vous devez savoir sur Core Web Vitals, y compris des conseils d'optimisation et une étude de cas .

Nous pouvons vous aider avec votre stratégie de référencement et de contenu – contactez l'un de nos experts pour discuter de solutions pour votre entreprise.

Entrer en contact

Core Web Vitals basé sur un ensemble de trois indicateurs de base

Début mai 2020, Google a annoncé le lancement prochain de ses nouveaux Core Web Vitals, des indicateurs clés qu'ils utiliseront pour classer l'expérience utilisateur sur les sites Web. Lors du lancement de Google Core Web Vitals en mai 2021, ils comprendront trois mesures qui, combinées à d'autres variables, constitueront un nouveau facteur de classement pour une expérience utilisateur stable et sûre sur les sites Web. Vous trouverez plus de détails sur le facteur de classement de l'expérience de page dans l'article lié.

Vitaux Web de base
Le nouveau facteur de classement de l'expérience de page est basé sur les métriques Core Web Vitals en combinaison avec d'autres KPI pour une expérience utilisateur en ligne sécurisée et stable.

Les principaux Web Vitals sont mesurés avec des données de terrain fournies par Google dans plusieurs rapports et outils, notamment Lighthouse, Page Speed ​​Insights et Google Developer Tools. Core Web Vitals est composé de trois métriques qui incluent:

  • La plus grande peinture riche en contenu
  • Premier délai d'entrée
  • Décalage cumulatif de la disposition

Au fil du temps, Core Web Vitals sera adapté aux derniers développements techniques et aux changements de comportement des utilisateurs. À la lumière de cela, Google réévaluera chaque année les Core Web Vitals. Cela signifie que les métriques de base peuvent également changer.

L'accent mis sur trois indicateurs de base clairs et cohérents apporte un certain nombre d'avantages. Google peut analyser des sites Web sur la base de KPI clairement communiqués. Cela donne aux webmasters, aux développeurs Web et aux référenceurs une base solide pour défendre leur position par rapport à des emplois et des budgets spécifiques avec les clients. ou leur gestion, à qui on peut montrer la preuve des résultats positifs sans équivoque des vitales Web de base optimisées.

Où puis-je accéder au rapport Core Web Vitals?

Les Core Web Vitals de Google ont déjà été intégrés dans tous les outils d'analyse de Google. Par exemple, Core Web Vitals est accessible via PageSpeed ​​Insights, qui comprend également le score de vitesse de page (entre zéro et 100) généré à partir de Lighthouse. Les résultats des Core Web Vitals sont présentés, d'une part, sous la forme de données de terrain et de données de laboratoire. Les données de terrain sont des données anonymisées utilisées pour afficher des sites Web sur des navigateurs utilisés par de vrais utilisateurs sur divers appareils et à différentes vitesses de connexion. Les données de laboratoire, quant à elles, sont basées sur un chargement de page simulé sur un seul appareil dans des conditions de réseau définies. C'est pourquoi les valeurs peuvent différer.

Les résultats des Core Web Vitals sont également accessibles dans la Google Search Console sous la forme d'un aperçu direct des métriques pour le domaine donné, indiquant combien et quelles URL sont considérées comme bonnes (vert), qui doivent être améliorées (jaune), ou qui sont pauvres (rouge). Les données de la Search Console sont basées sur le rapport d'expérience utilisateur dans Chrome et reflètent les données utilisateur réelles pour le site Web respectif pour les utilisateurs du monde entier:

Core Web Vitals: Google Search Console

Les trois KPI initiaux des Core Web Vitals sont décrits plus en détail ci-dessous. Des conseils d'optimisation et d'autres liens sont également inclus.

Google évalue séparément Core Web Vitals pour ordinateur et mobile

Pendant ce temps, l'analyste Google Webmaster Trends, John Mueller, a apporté quelques ajouts aux Core Web Vitals dans les heures de bureau allemandes de Google le 29 octobre 2020. Selon cela, des mesures supplémentaires pour le temps de chargement, telles que déterminées en détail dans Google Lighthouse, par exemple, ne jouer un rôle pour l'expérience de la page en tant que facteur de classement. En outre, les statistiques Web de base de Google seraient déterminées séparément pour les mobiles et les ordinateurs de bureau. Dans la plupart des cas, les valeurs mobiles pour les Core Web Vitals sont pires que pour la page de bureau. Google évalue ensuite cela séparément; pour la page, il n'y a alors aucun effet négatif sur le classement dans les résultats de recherche sur ordinateur, mais peut-être pour le classement mobile, a poursuivi Mueller.

Largest Contentful Paint (LCP): À quelle vitesse ma page se charge-t-elle?

Core Web Vitals: la plus grande peinture de contenu

Le LCP (Largest Contentful Paint) mesure le temps qui s'écoule jusqu'au chargement du plus grand élément de contenu d'une page. Il peut s'agir d'images, de blocs de texte ou d'éléments avec une image d'arrière-plan. Pour LCP, des temps de chargement allant jusqu'à 2,5 secondes sont bons, tout ce qui se situe entre 2,5 et 4 secondes doit être amélioré – et tout ce qui est inférieur à 4 secondes est médiocre. Le LCP d'une page est déterminé sur la base de l'état de chargement de la page – car, dans la plupart des cas, le plus grand élément est chargé à la fin. Jetons un œil à l'exemple du site Web CNN ci-dessous:

Core Web Vitals: exemple CNN

Google a fait de son mieux pour rendre la documentation sur chaque Core Web Vitals aussi détaillée et claire que possible. Plus d'informations et la base exacte des calculs peuvent être trouvées dans la documentation Google sur le plus grand contenu de peinture.

Optimisation pour la plus grande peinture de contenu

  • Le serveur répond trop lentement: Plus le navigateur a besoin de temps pour recevoir le contenu du serveur, plus il faudra de temps pour que la page se charge pour l'utilisateur. C'est pourquoi Google recommande d'utiliser un framework comme React au lieu d'un fichier HTML entier, afin que le contenu d'une page soit envoyé au navigateur de manière dynamique. Il peut également être utile d'établir un réseau de diffusion de contenu (CDN) pour permettre l'envoi des demandes à partir du serveur le plus proche de l'utilisateur. En plus d'une mise en cache efficace, il est judicieux de configurer des connexions tierces tôt afin d'éviter un retard évitable dans la dernière partie du chargement de la page.
  • Blocage du rendu JavaScript et CSS: Avant que le navigateur puisse réellement rendre les éléments de contenu, c'est-à-dire les visualiser pour l'utilisateur, le balisage HTML doit être analysé dans ce que l'on appelle un modèle d'objet de document (DOM). Le problème ici, cependant, est que l'analyseur HTML s'arrête chaque fois que des feuilles de style CSS ou des ressources JavaScript doivent être chargées. Pour éliminer ce problème, Google recommande de minimiser les fichiers CSS ou JavaScript, de différer les styles non critiques ou JS et d'incorporer les attributs CSS critiques.
  • Chargement des ressources trop lentement: Les images, les vidéos ou les blocs de contenu peuvent souvent entraîner un chargement trop lent des ressources. Ici, Google recommande de réduire les images à la taille nécessaire, par exemple en utilisant des formats de fichiers plus récents qui ont une compression d'image supérieure tels que JPEG 2000, JPEG XR ou WebP. Une autre approche serait de pré-charger les ressources principales et de compresser les fichiers HTML, CSS ou JavaScript à l'aide de Gzip. L'adaptation du service peut également vous aider ici, en vous donnant la possibilité de configurer la page pour ne charger qu'une petite image plutôt qu'une vidéo si la vitesse de connexion est inférieure à 4G, par exemple.
  • Rendu côté client: Le rendu côté client, où les pages Web sont rendues dans le navigateur directement à l'aide de frameworks JavaScript tels que React ou Angular, est un moyen efficace de garantir que le plus grand contenu de peinture se charge plus rapidement pour l'utilisateur.
  • Autres conseils d'optimisation: Dans un article de blog dédié, Google fournit un certain nombre de conseils pour améliorer la plus grande peinture de contenu.

Premier délai d'entrée (FID): Quand l'utilisateur peut-il interagir avec une page?

Core Web Vitals: premier délai d'entrée

Le premier délai d'entrée (FID) mesure le temps entre le moment où un utilisateur interagit pour la première fois avec un site et le moment où le navigateur est capable de répondre à cette interaction. Souvent, les utilisateurs accèdent à un site Web et cliquent immédiatement sur du texte ou cliquent sur un bouton sans attendre que la page se charge complètement en premier. Très souvent, rien ne se passe car le navigateur est en train de charger la page. Le diagramme ci-dessous montre les différents paramètres et métriques impliqués dans le chargement de la page Web:

Core Web Vitals: exemple de chargement de site Web

Pour empêcher les utilisateurs de s'impatienter et de quitter à nouveau la page parce que le navigateur ne répond pas à leur entrée, la métrique FID mesure le délai qui se produit entre l'entrée de l'utilisateur et la réponse du navigateur. Selon Google, tout ce qui est inférieur à 100 millisecondes est bon, tout ce qui se situe entre 100 et 300 millisecondes doit être amélioré, tandis que les valeurs FID supérieures à 300 millisecondes sont considérées comme médiocres. Les détails sur le premier délai d'entrée peuvent être trouvés dans la documentation Google sur le premier délai d'entrée.

Optimisation pour le premier délai d'entrée

  • Répartir de longues tâches: Les retards sont souvent causés par l'exécution de JavaScript, ce qui signifie que les utilisateurs peuvent ne pas être en mesure d'interagir avec le site Web. La répartition des tâches peut vous aider. Pour Google, les tâches longues sont celles où un morceau de code bloque le thread principal pendant plus de 50 millisecondes.
  • Prioriser l'interactivité: En d'autres termes, donner la priorité au code qui est essentiel pour l'interactivité du site, c'est-à-dire qu'il est chargé en premier.
  • Utilisation d'un Web Worker: Avec un Web Worker, les fichiers JavaScript lourds peuvent être exécutés dans un thread séparé, ce qui signifie que le thread principal n'est pas bloqué.
  • Réduction des temps d'exécution de JavaScript: Tous les fichiers JavaScript qui sont exécutés lors du chargement d'un site Web doivent être examinés en vue de différer ceux qui ne sont pas essentiels.
  • Autres conseils d'optimisation: Dans un article de blog dédié, Google fournit également divers conseils sur la façon d'améliorer le premier délai d'entrée.

Cumulative Layout Shift (CLS): stabilité visuelle sur un site Web

Core Web Vitals: changement de disposition cumulatif

Le décalage de mise en page cumulatif (CLS) fait référence à la stabilité visuelle pendant l'interactivité sur un site Web. Lorsqu'un site Web se charge, des changements de mise en page peuvent se produire en poussant des éléments vers le bas de la page, par exemple, pendant le chargement de l'élément suivant ci-dessus. Lorsque le contenu change lors du chargement d'une page et que l'utilisateur interagit déjà avec le site, cela peut avoir des effets indésirables, comme le montre la vidéo de démonstration Google suivante:

En d'autres termes, le décalage de mise en page cumulatif indique si et dans quelle mesure des changements de mise en page (décalages) inattendus se produisent pendant que l'utilisateur interagit avec le site Web. Par exemple, lorsqu'un nouvel élément de contenu est visualisé et qu'un bouton change soudainement de position sans que l'utilisateur ne fasse défiler. Plus cette métrique est basse, mieux c'est. Dans le cadre de Core Web Vitals, la métrique Cumulative Layout Shift est calculée comme suit:

Fraction d'impact x Fraction de distance = Score de décalage de disposition

La fraction d'impact est le pourcentage de l'écran affecté par un décalage, tandis que la fraction de distance décrit le pourcentage de la hauteur de la fenêtre par laquelle l'élément de contenu s'est déplacé vers le bas en raison du décalage de mise en page. La fraction d'impact et la fraction de distance sont toutes deux données sous forme de valeurs comprises entre 0 et 1. Le score de décalage de mise en page est le produit de ces deux valeurs et se situe entre 0 et 1.

Pour Google, tout ce qui est inférieur à 0,1 est bon et tout ce qui est supérieur à 0,25 est médiocre. Tout ce qui se trouve entre les deux doit être amélioré. Vous trouverez des détails sur le décalage de mise en page cumulatif dans la documentation Google sur le décalage de mise en page cumulatif.

Optimisation pour le décalage de mise en page cumulatif

  • Spécifiez la taille des images et des éléments vidéo: La spécification de la taille exacte (L x H) des images et des vidéos garantira qu'il n'y aura pas de mauvaises surprises pour les utilisateurs. Alternativement, l'espace nécessaire pour ces éléments peut également être défini en utilisant le rapport hauteur / largeur avec CSS. De cette façon, le navigateur conservera l'espace exact nécessaire pour l'image ou la vidéo pendant le chargement.
  • Annonces sans données de hauteur / largeur: Selon Google, les publicités sont l'une des raisons les plus courantes de changement de mise en page sur les sites Web. En effet, les réseaux publicitaires, y compris Google Ads, utilisent souvent des formats d'annonces dynamiques. Les éléments d'espace réservé peuvent être utiles ici – les données historiques vous permettront de sélectionner la taille la plus probable pour un certain espace publicitaire.
  • Éléments de contenu dynamique: Des éléments tels que des newsletters ou des bannières d'offres spéciales, des blocs de contenu associés ou des informations RGPD positionnés comme des blocs dans le contenu principal d'une page peuvent entraîner des changements de mise en page. Ici aussi, Google recommande d'utiliser des éléments d'espace réservé. Cela éliminera les surprises désagréables pour l'utilisateur si le contenu change pendant le chargement d'une page.
  • Polices Web: Le téléchargement et le rendu des polices Web peuvent entraîner des changements de disposition, par exemple lorsque la police de remplacement est remplacée par la police Web personnalisée. C'est pourquoi il est conseillé de précharger les polices. Les polices Web utilisées peuvent également être enregistrées sur votre propre serveur.
  • Autres conseils d'optimisation: Dans cet article de blog, Google lui-même fournit divers conseils sur la façon de réduire ou d'empêcher le décalage cumulatif de la disposition.

Étude de cas: la maison de mode Chloé optimise pour Core Web Vitals

La vidéo ci-dessous montre une étude de cas de la maison de couture Chloé et décrit comment l'entreprise a réussi à optimiser Core Web Vitals pour sa page d'accueil, en l'amenant au niveau «vert» dans les graphiques de Google. Par exemple, la métrique Largest Contentful Paint a été réduite de 2,9 à 1,5 secondes, par exemple en optimisant le CSS du chemin critique ou via la compression d'image. Le responsable de l'ingénierie Google, Addy Osmani, vous présente les Core Web Vitals au cours de ce parcours pratique:

Conclusion: Google fait sa part – les référenceurs doivent eux aussi s'intensifier

Les principales statistiques Web de Google sont en passe de devenir les indicateurs de base pour mesurer l'expérience utilisateur. Core Web Vitals sera initialement lancé avec trois métriques de base pour le chargement (la plus grande peinture de contenu), l'interactivité du site (premier délai d'entrée) et la stabilité visuelle (décalage de mise en page cumulatif). De plus, Core Web Vitals sera fusionné avec des facteurs de classement existants tels que la convivialité mobile ou HTTPS pour vous offrir le tout nouveau facteur de classement de Google: l'expérience de la page!

Pour une plus grande transparence sur Core Web Vitals, Google a tout mis en œuvre et a publié une documentation approfondie qui donne aux webmasters, aux développeurs et aux référenceurs toutes les informations dont ils ont besoin pour comprendre pleinement comment les critères individuels sont définis, quels éléments sont cruciaux et bien plus. surtout, comment les sites Web peuvent désormais être optimisés pour les nouveaux Core Web Vitals.

Si vous ne l'avez pas déjà fait, nous vous recommandons d'utiliser la Search Console pour effectuer une vérification appropriée de vos propres projets Web afin de voir comment ils fonctionnent sur le front Core Web Vitals. La majorité des sites Web peuvent être améliorés – et Google nous a donné les outils mêmes dont nous avons besoin pour y parvenir! Grâce à la documentation approfondie de Google et aux conseils d'optimisation pour Core Web Vitals associés à des outils d'analyse tels que Lighthouse, vous pouvez profiter au maximum du temps pendant que nous attendons le lancement du nouveau facteur de classement Expérience de page.

Nous pouvons vous aider avec votre stratégie de référencement et de contenu – contactez l'un de nos experts pour discuter de solutions pour votre entreprise.

Entrer en contact

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *