24 avril 2021

Core Web Vitals : un guide des signes vitaux Core Web Vitals de Google

Comment mesurer Google Core Web Vitals pour augmenter dans le classement des pages Google.

Guide des bannières Google Core Web Vitals
Print Friendly, PDF & Email

Il est devenu de plus en plus difficile pour Google de quantifier la qualité de l'expérience utilisateur d'un site Web, ce qui a conduit à la création et au développement d'outils pour mesurer chaque aspect de l'expérience utilisateur. Les outils souvent utilisés pour mesurer l'expérience utilisateur sur un site Web incluent PageSpeed Insights, Lighthouse et Google Search Console.

Afin de permettre aux webmasters de suivre et d'améliorer plus facilement leurs expériences utilisateur, Google a dévoilé le rapport " Vitaux Web de base "Le 5 mai 2020 dans la console de recherche Google. Le rapport tire ses données du moteur Web Vital, simplifiant le paysage de l'expérience Web en trois mesures homogènes. Google les appelle "les trois métriques les plus importantes pour toutes les expériences Web".

La mise à jour vise à faciliter (au moins en théorie, mais nous verrons que ce n'est pas le cas) pour les webmasters et les propriétaires de sites d'apporter des améliorations à leurs sites Web sans avoir à engager des gourous de la performance ou à passer par de nombreux rapports d'analyse complexes. Il vise également à aider Google à classer les sites Web pour leur UX dans les recherches.

Quels sont les principaux paramètres vitaux du web, je Vitaux Web de base ?

Les trois Vitaux Web de base représentent les trois phases distinctes de l'expérience utilisateur : dans un ordre relatif on peut les définir, l'expérience de chargement, l'interactivité du site et la stabilité visuelle du contenu d'une page du site. Les trois sont conçus pour être des améliorations quantifiables et cohérentes de ces métriques qui, en fin de compte, améliorent l'expérience utilisateur dans le « monde réel ».

À l'aide de la console de recherche Google, vous pouvez analyser un site Web pour voir combien d'URL sont jugées « médiocres », « à améliorer » ou « bonnes ». Cela rend l'analyse assez simple pour les webmasters novices et les propriétaires de sites Web pour comprendre le rapport de performance .

Quelles métriques sont mesurées dans Vitaux Web de base?

Selon Google, les trois mesures décrites ci-dessous sont utilisées comme éléments essentiels du Web. Cependant, Google a également déclaré que ces métriques devraient évoluer au fil du temps et, par conséquent, il est important de se tenir au courant des dernières métriques de Google. Les trois mesures sont ;

  • La plus grande peinture riche en contenu  (PCL)
  • Décalage de mise en page cumulatif  (CLS)
  • Premier délai d'entrée (FID)

Traduit pour améliorer l'idée :

  • Le temps de chargement du contenu   (PCL)
  • Décalage cumulatif de la mise en page   (CLS)
  • Délai de première entrée (FID)

Peinture à grand contenu (LCP)

Première métrique analysée dans les signes vitaux de tout site Web en ligne, LCP mesure les performances de charge ; le temps moyen nécessaire pour charger le plus grand élément du contenu de la page dans la vue.

La taille de l'élément est principalement déterminée par sa taille visible par l'utilisateur dans la fenêtre. Tout contenu en dehors de la vue de l'utilisateur, recadré ou invisible, ne sera pas pris en compte pour quantifier la taille de l'élément. En outre, seules des catégories d'éléments spécifiques sont considérées comme faisant partie du LCP :

  • Éléments de l'image
  • Éléments avec des images d'arrière-plan chargées via la fonction URL au lieu du dégradé CSS
  • Éléments d'image dans un élément SVG
  • Éléments vidéo
  • Éléments de niveau bloc contenant des nœuds de texte ou tout autre élément de niveau ligne

Étant donné que le plus grand élément d'une page peut changer au fur et à mesure du chargement de la page, Google considère l'élément le plus récent et le plus grand jusqu'à ce que la page soit complètement chargée ou que l'utilisateur commence à interagir avec le contenu de la page.

Délai de première entrée (FID)

Le FID est une métrique qui mesure l'interactivité d'un site Web. Mesure le temps nécessaire au navigateur pour répondre au clic d'un utilisateur sur un bouton, un lien ou un contrôle basé sur JavaScript.

Cependant, le thread principal est parfois occupé et incapable de répondre aux commandes de l'utilisateur. C'est ce qu'on appelle la latence d'entrée, souvent causée par le fait que le navigateur de l'utilisateur est trop occupé à gérer des fichiers JavaScript lourds. Lorsque le navigateur est en latence d'entrée, il y a un délai entre l'entrée et l'action.

Le premier délai d'entrée est conçu pour se concentrer uniquement sur les événements contrôlés par l'utilisateur tels que les tapotements, les clics et les pressions sur les boutons au lieu des interfaces sur la page telles que le zoom et le défilement.

Changement de mise en page cumulatif - Changement de mise en page cumulatif (CLS)

Avez-vous déjà été à un clic de sélectionner une image, une vidéo ou un lien sur une page et soudain, elle grimace, se met à jour ou se déplace et vous êtes soudainement dans l'AppStore ? Ce mouvement / cette secousse est causé par un changement cumulatif de mise en page ou en termes simples ; combien une page bouge pendant le chargement. Google a fermement l'intention d'empêcher CLS d'être une expérience utilisateur négative qui peut être agacée.

Le navigateur mesure CLS en évaluant deux cadres séparés pour la taille de leurs fenêtres respectives par rapport au mouvement des éléments instables dans les fenêtres. Le résultat est un produit de la fonction de distance et de la fonction d'impact. Fondamentalement, Google sera en mesure de dire quand les éléments d'une page vont trop loin et de les classer plus bas sur les pages de résultats de recherche.

Quels outils pouvez-vous utiliser pour mesurer les principaux Vitaux Web de base?

Étant donné que les trois principaux éléments vitaux du Web sont un élément fondamental dans la mise à jour de l'expérience de la page, Google intègre des métriques dans les outils couramment utilisés pour optimiser les pages par les webmasters et le référencement. Étant donné que nous devons tous mesurer le succès de la Vitaux Web de base de nos sites, il est normal d'avoir les bons outils pour le travail.

PageSpeed Actualités

PageSpeed Informations Google est l'un des outils les plus utilisés pour mesurer la vitesse des pages. En plus de permettre au webmaster de voir le score de leur page, ils incluent également des métriques de Vitaux Web de base qui sont utiles pour l'utilisateur car ils lui donnent des informations sur la qualité de la page.

PageSpeed Insights est un excellent outil pour mesurer le succès des efforts de référencement . Cependant, ce n'est pas la meilleure option si vous avez l'intention d'optimiser votre site pour Vitaux Web de base car il manque de nombreux détails dans l'outil. Par exemple, pour vérifier les pages qui doivent être améliorées sur des éléments vitaux de base spécifiques au Web, vous devrez revenir à console de recherche Google.

Google Search Console

Lorsque vous essayez de vérifier une page particulière pour son Vitaux Web de base, connectez-vous simplement à la console de recherche Google de votre site Web et sélectionnez le bouton Vitaux Web de base sur la barre latérale de la console et un rapport apparaîtra.

Si vous souhaitez vérifier le rapport, cliquez sur « Type » et la console de recherche Google vous montrera les pages actuellement en cours d'exécution « Mauvais », « A besoin d'amélioration » ou « Bon ». Une fois que vous avez identifié les pages qui nécessitent une optimisation pour les données vitales clés de Google, vous pouvez maintenant utiliser PageSpeed Insights pour voir des conseils sur la façon d'optimiser ces pages spécifiques.

Rapport sur l'expérience utilisateur de Chrome

Ce rapport sur l'expérience utilisateur de Chrome fournit des mesures réelles sur la façon dont les utilisateurs de Chrome perçoivent les sites Web.

Les métriques sont principalement basées sur des données réelles. Le rapport compare l'expérience utilisateur réelle d'un site Web avec des tests locaux ou virtuels dans des environnements simulés et définis. Avec cette comparaison, vous pourrez voir clairement l'ensemble des variables qui se forment et conduisent à une bonne expérience utilisateur.

Outils de développement Chrome

Chrome Dev Tools est une suite d'outils de développement de sites Web intégrés à Google Chrome. Avec ces outils, vous pouvez modifier rapidement des pages Web à la volée et corriger les erreurs pour créer des sites Web de qualité plus rapidement.

De plus, Chrome Dev Tools permet au propriétaire du site ou au webmaster de rechercher et de résoudre les problèmes liés à l'instabilité visuelle sur une page Web, ce qui peut entraîner un décalage de mise en page cumulatif (CLS).

Extension Web Vitals

Les métriques Vitaux Web de base sont également disponibles pour les webmasters et les propriétaires de sites dans une nouvelle extension. En fournissant des commentaires en temps réel sur les trois principaux paramètres Web essentiels, cette extension est cohérente avec les tests et les rapports de Chrome utilisant des métriques sur Google et d'autres outils. Non seulement cela aidera le webmaster à diagnostiquer ses pages Web lors de vos déplacements, mais cela aidera également à mesurer les performances des pages d'un concurrent que vous souhaitez égaler ou battre. Vous pouvez gagner du temps, vous adapter plus rapidement aux situations du marché et devenir plus efficace avec vos commandes en utilisant l'extension Web Vitals.

Comment analyser les scores vitaux du Web pour ordinateur de bureau et mobile

L'analyse indépendante sur Web Vitals est accessible sur les ordinateurs de bureau / portables et les appareils mobiles. Dans certains des outils décrits ci-dessus, vous pouvez exécuter un test ou une requête sur une catégorie d'appareils spécifique et, lorsque les deux sont disponibles sur le même outil (comme Google PageSpeed Insights), vous pouvez facilement basculer entre eux. Le paramètre par défaut pour PageSpeed Insights sont des statistiques mobiles, et vous devrez passer à l'onglet Bureau pour voir la différence entre les deux catégories d'appareils sur vos pages.

La console de recherche Google présente désormais des métriques pour Vitaux Web de base lorsque les données d'expérience utilisateur Chrome sont disponibles. Lorsque vous vous connectez à Vitaux Web de base, les deux catégories d'appareils sont affichées dans le tableau de bord de la console Google. De là, vous pouvez afficher les groupes de pages qui rencontrent des problèmes.

Pour voir les scores vitaux de votre ordinateur de bureau et du Web mobile dans le nouveau rapport Chrome User Experience (CrUX), vous devez configurer « ordinateur de bureau » ou « smartphone » comme facteurs de forme d'appareil dans les instructions SQL.

Quel bon score est dans Vitaux Web de base?

En plus de l'évaluation en trois étapes (« Mauvais », « Besoin d'amélioration » et « Bon »), Google définit davantage chaque évaluation avec un seuil convenu pour aider les webmasters à progresser. Les seuils suivants déterminent chaque élément vital :

  • La plus grande peinture contentieuse (LCP) : Pour une bonne expérience utilisateur, le LCP doit se produire dans les 2,5 secondes suivant le chargement de la page.
  • Premier délai d'entrée (FID) - Les pages doivent avoir un score FID inférieur à 100 millisecondes pour une bonne expérience utilisateur sur une page.
  • Décalage de mise en page cumulatif (CLS) : Pour une bonne expérience utilisateur, les pages doivent conserver moins de 0,1 CLS.

Pour vous assurer que vos pages atteignent les scores recommandés, Google recommande de mesurer le 75 centile de chargements de pages sur les plates-formes mobiles et de bureau.

Les principaux paramètres vitaux du Web affecteront-ils mes notes de recherche Google ?

Votre score sur Vitaux Web de base affectera votre note de recherche à partir de 2021. Actuellement, les pages ne sont pas classées en utilisant Vitaux Web de base. En 2021, Vitaux Web de base il combinera la sécurité, l'optimisation mobile, la sécurité et l'absence de fenêtres contextuelles en tant que signaux pour mesurer l'expérience globale de la page utilisateur. Les webmasters et les propriétaires ont un préavis de 6 mois avant que Google ne commence à utiliser Vitaux Web de base comme signal de positionnement. Cependant, vous pouvez mesurer et améliorer les métriques dès maintenant.

Conseils pour améliorer votre score Vitaux Web de base

La plupart des correctifs courants pour la vitesse globale de la page seront également accompagnés d'un élément d'amélioration des principales données vitales Web de votre page. Selon Google, vous pourriez améliorer le vôtre Vitaux Web de base:

  • Réduire la taille de la page à moins de 500 Ko
  • Limitation des ressources de page à 50 pour améliorer les performances des appareils mobiles
  • Utiliser AMP pour améliorer la vitesse de chargement des pages

Web.dev propose des suggestions de métriques Vitaux Web de base précise qu'il s'agit d'une excellente ressource que tout webmaster travaillant dans le référencement ou le développement Web devrait utiliser souvent :

Vous pouvez également utiliser le Outil de test PageSpeed Actualités pour suivre les modifications apportées. Il est excellent dans ce domaine car il vous permet de valider vos modifications Vitaux Web de base à partir de la page du rapport.

Utilisateurs de PageSpeed Les informations de longue date peuvent déjà être familières avec des métriques similaires, dont la plupart ne manqueront pas de rester. Vitaux Web de base est le point culminant de ces métriques et a l'intention de sortir de la complexité de l'expérience développeur avec eux. Les principaux éléments vitaux du Web sont simples à éliminer et apportent de la clarté entre un nombre plus ou moins grand de métriques à suivre.

Données de laboratoire et de terrain

Selon les conditions disponibles, les scores peuvent varier considérablement, changeant littéralement au fur et à mesure que les utilisateurs parcourent les pages. Il est essentiel de savoir comment chaque score est tabulé dans un environnement donné. Cependant, les scores ne peuvent être interprétés qu'après avoir déterminé si les données étaient des données de terrain ou de laboratoire.

Les données du laboratoire Vitaux Web de base ils sont collectés à l'aide de l'API du navigateur en tant que minuteurs d'événements de chargement de page et estimations mathématiques qui simulent l'interactivité de l'utilisateur. Bien que les données de terrain de Vitaux Web de base se composent de métriques similaires, sont collectées à partir d'expériences utilisateur réelles lors de la navigation sur des pages Web tandis que les valeurs de minuterie d'événement résultantes sont transmises à un référentiel.

Utilisation de PageSpeed Insights, Chrome Dev Tools et la nouvelle extension de navigateur Vitaux Web Chrome, les développeurs et les professionnels du référencement ont accès aux données de laboratoire en temps réel. En comptant le temps des scripts de blocage de threads, PSI et WebPage Test génèrent des scores d'interactivité de page à partir d'événements de chargement de page.

Ces outils de données de laboratoire sont inestimables pour votre workflow de reporting et pour l'amélioration des scores Vitaux Web de base et ils devraient toujours être dans votre arsenal de référencement. À moins que vous ne remarquiez des problèmes dans les données de terrain, ces données de laboratoire peuvent également être tout ce dont vous avez besoin en tant que développeur si votre site Web est basé sur quelques modèles.

La librairie Web Vitals JavaScript il peut également être utile dans le flux de travail lorsqu'il est utilisé comme pipeline de test. La bibliothèque est disponible via CDN et peut être incluse dans la production HTML et configurée pour transmettre des données de terrain collectées indépendamment aux centres de comparaison pour la création de rapports.

Lighthouse propose au webmaster différents points d'accès particulièrement utiles dans le workflow de développement. Il comprend plusieurs tests qui vous aident à garantir le respect des normes Web établies. Lighthouse peut également vous aider à déboguer les situations où vous dépannez Vitaux Web de base.

Comparaison des données de terrain avec les résultats de laboratoire

Chrome, Firefox, Safari, Opera mini et d'autres navigateurs modernes mesurent la façon dont les utilisateurs perçoivent vos sites Web en temps réel à partir de leurs appareils via l'API JavaScript intégrée. Comme indiqué, Google collecte et rapporte ses données de terrain auprès des utilisateurs de Chrome via le rapport CrUX en utilisant parfois les mêmes API de navigateur.

Il est beaucoup plus facile d'accéder aux données de terrain réelles après avoir vérifié que vos pages contiennent des données de terrain dans CrUX. Cela se fait en vérifiant la propriété de votre site Web sur la console de recherche Google. Le tableau de bord de la Search Console affiche les données de champ sur une interface qui vous permet d'explorer en profondeur en utilisant des clics au lieu d'écrire des requêtes SQL.

Alternativement, vous pouvez utiliser PSI, qui utilise des données de terrain datant de 28 jours. L'API qui gère le rapport de récence est une bibliothèque JavaScript open source autonome qui peut être insérée dans votre workflow de développement ou utilisée pour contrôler un tableau de bord d'application. PSI peut également agir comme une application autonome où un développeur a déjà créé une excellente interface pour l'application.

Comment résoudre les problèmes de rapport de données vitales

En raison de la nature de certains moments des rapports et de la manière dont les données ont été collectées, il sera nécessaire de vérifier les données de laboratoire en les corrélant avec les données de terrain et les écarts de débogage. Par exemple, les chargements de page suivants peuvent varier les scores de résultats lors de la surveillance de Web Vitals à l'aide de l'extension. Il peut y avoir plusieurs raisons derrière cela.

Le navigateur a la possibilité de rassembler des valeurs interactives via l'extension tout en faisant défiler une page d'une manière similaire aux données de terrain du monde réel. En utilisant son propre cache, le navigateur est également capable de collecter des ressources plus rapidement lors de la mise à jour.

Pour obtenir les données les plus précises et les résultats locaux lors de l'optimisation pour Vitaux Web de base en utilisant Chrome Dev Tools et Web Vitals Extension, n'oubliez pas de vider le cache ou de le contourner en appuyant sur Maj-Actualiser sur le navigateur Web dans votre flux de travail. Une autre astuce géniale consiste à charger la page « à peu près vierge » avant de démarrer une session de surveillance et d'enregistrement des performances dans les outils de développement pour commencer proprement à rédiger un rapport.

Les données de terrain et de laboratoire sont généralement très similaires et pour une bonne raison. Chaque fois que vous apportez des modifications importantes aux deux, vos résultats de laboratoire seront en avance sur les données de terrain ou vice versa. Par conséquent, si vous remarquez que vos tests échouent sur le terrain et que vous avez déjà amélioré vos scores de laboratoire pour les réussir, vous devez être suffisamment patient pour permettre aux données de terrain de rattraper les données de laboratoire, ou envoyer les données sur le terrain . indépendamment via Analytics, vérifiez-le.

Bien qu'il puisse sembler assez évident que CLS soit le score de données de terrain le plus compliqué à faire correspondre localement, ce n'est pas nécessairement le cas. Vous pouvez utiliser l'extension Chrome pour définir l'option d'appliquer une superposition de Vitaux Web de base, afin que vous puissiez observer les changements de partition lorsque vous naviguez et interagissez avec la page.

Il en va de même pour le FID. Votre score devient l'interaction sur la première page (défilement, clic, zoom ou saisie au clavier) une fois que les activités de blocage de fil ont été ajoutées au moment.

Les informations très détaillées disponibles dans Chrome Dev Tools vous permettent de résoudre les problèmes CLS à un niveau miniaturisé avec la lecture et l'enregistrement des performances. Cliquez sur la section « Expérience » qui reproduit les changements CLS dans l'enregistrement. Vous pouvez également mettre en évidence les changements dans l'affichage à l'aide d'un paramètre qui fait clignoter les éléments en bleu lorsqu'ils se déplacent et les enregistre sur les résultats.

Vitaux Web de base mineur

Bien LCP, FID et CLS Les signes vitaux Web CORE sont pris en compte, il existe d'autres mesures mineures qui peuvent être utilisées pour offrir une excellente expérience utilisateur. Ils sont communément appelés éléments vitaux Web secondaires ou simplement éléments vitaux Web.

conclusion

Optimisation pour Vitaux Web de base est forcément un gros problème si vous voulez que vos pages soient bien classées dans les SERP l'année prochaine. Étant donné que les trois principaux paramètres vitaux du Web sont par essence techniques, de nombreux webmasters peuvent être moins bien informés sur cet aspect particulier.

Cependant, il existe de nombreux développeurs et experts SEO expérimentés, des techniciens et des ingénieurs système qui vous aideront à cet égard.

Nous espérons vous avoir donné un aperçu clair des signes vitaux de Google Web Core.

N'hésitez pas à nous contacter si vous souhaitez améliorer significativement votre score.

Vous avez des doutes ? Vous ne savez pas par où commencer ? Contactez-nous


Nous avons toutes les réponses à vos questions pour vous aider à faire le bon choix.

Discute avec nous

Discutez directement avec notre support avant-vente.

0256569681

Contactez-nous par téléphone pendant les heures de bureau 9h30 - 19h30

Contactez-nous en ligne

Ouvrez une demande directement dans l'espace contact.

INFORMATIONS

ManagedServer.it est le premier fournisseur italien de solutions d'hébergement hautes performances. Notre modèle d'abonnement est abordable et prévisible, afin que les clients puissent accéder à nos technologies d'hébergement fiables, à nos serveurs dédiés et au cloud. ManagedServer.it offre également d'excellents services d'assistance et de conseil sur l'hébergement des principaux CMS Open Source tels que WordPress, WooCommerce, Drupal, Prestashop, Magento.

JUSTE UN MOMENT !

Souhaitez-vous voir comment votre WooCommerce fonctionne sur nos systèmes sans avoir à migrer quoi que ce soit ? 

Entrez l'adresse de votre site WooCommerce et vous obtiendrez une démonstration navigable, sans avoir à faire absolument quoi que ce soit et entièrement gratuite.

Non merci, mes clients préfèrent le site lent.
haut