Table des matières de l'article :
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
Afin de faciliter le suivi et l'amélioration de l'expérience utilisateur pour les webmasters, Google a introduit le rapport « Indicateurs Web essentiels » le 5 mai 2020 dans Google Search Console. Ce rapport exploite les données du moteur Web Vitals et synthétise l'expérience web en trois indicateurs clés. Google les présente comme « les trois indicateurs les plus importants pour toute expérience 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 indicateurs clés de performance web (Core Web Vitals) représentent les trois phases distinctes de l'expérience utilisateur : par ordre d'importance, il s'agit de la vitesse de chargement , de l'interactivité du site et de la stabilité visuelle du contenu des pages. Ces trois indicateurs sont conçus pour être quantifiables et leur amélioration continue contribue à optimiser l'expérience utilisateur en situation réelle.
Grâce à Google Search Console, vous pouvez analyser un site web pour voir combien d'URL sont classées comme « médiocres », « nécessitant des améliorations » ou « bonnes ». Cela rend l'analyse assez simple pour les webmasters et les propriétaires de sites web novices, leur permettant de comprendre facilement 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.
Le LCP (Largest Contentful Paint) est l'un des trois indicateurs clés de performance web de Google qui mesurent la vitesse de chargement des pages web. Plus précisément, le LCP mesure le temps écoulé entre le moment où un utilisateur clique sur le lien pour accéder à la page et le moment où le contenu principal de celle-ci est entièrement chargé et affiché. Un LCP élevé indique une longue attente pour l'utilisateur et une expérience de navigation médiocre.
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.
Pour améliorer le LCP, plusieurs stratégies peuvent être adoptées :
- Optimisation de l'image : réduisez la taille de l'image et utilisez des formats optimisés tels que JPEG 2000, WebP ou AVIF pour réduire le temps de chargement.
- Utilisez une connexion rapide : si possible, utilisez une connexion rapide pour télécharger des ressources.
- Utilisation d'un réseau de diffusion de contenu (CDN) : utilisez un CDN pour distribuer les ressources de manière à réduire la distance entre l'utilisateur et le serveur.
- Minimiser le code JavaScript : réduisez le code JavaScript inutilisé ou non essentiel pour améliorer le temps de chargement de la page.
- Utilisation de polices asynchrones : chargez les polices de manière asynchrone pour éviter de bloquer le chargement des ressources.
- Utilisation du chargement différé : ne chargez que le contenu essentiel au début et chargez le reste du contenu ultérieurement en fonction des besoins de l'utilisateur.
- Surveillance et analyse des données : utilisez des outils tels que Google Analytics ou Google Search Console pour surveiller le LCP et identifier les problèmes.
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.
Le FID (First Input Delay) est l'un des trois indicateurs clés de performance web (Core Web Vitals) de Google , qui mesurent la réactivité des pages web. Plus précisément, le FID mesure le temps écoulé entre l'interaction de l'utilisateur (par exemple, un clic sur un bouton ou la saisie de texte) et le début de la réponse de la page à cette interaction. Un FID élevé indique un temps d'attente important pour l'utilisateur et une faible réactivité de la page.
Cependant, il arrive que le thread principal soit occupé et incapable de répondre aux commandes de l'utilisateur. On parle alors de latence d'entrée, souvent due au fait que le navigateur de l'utilisateur est trop occupé à traiter des fichiers JavaScript volumineux. Lorsque le navigateur subit une latence d'entrée, il existe un délai entre la saisie et son exécution.
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 CLS (Cumulative Layout Shift) est l'un des trois indicateurs clés de stabilité web de Google , qui mesurent la stabilité des pages web. Plus précisément, le CLS mesure l'amplitude des décalages de contenu sur une page pendant son chargement. Plus la valeur du CLS est élevée, plus les utilisateurs risquent de rencontrer des difficultés pour interagir avec la page, par exemple en cliquant sur un lien ou un bouton, en raison de décalages inattendus.
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.
Pour améliorer le CLS, plusieurs stratégies peuvent être adoptées :
- Utiliser une taille d'image par défaut : définissez une taille d'image par défaut afin que la mise en page ne change pas lorsque les images sont chargées.
- Utiliser une taille par défaut pour les vidéos : définissez une taille par défaut pour les vidéos afin que la mise en page ne change pas lors du chargement des vidéos.
- Utilisation de polices asynchrones : chargez les polices de manière asynchrone pour éviter de bloquer le chargement des ressources et de provoquer des changements de mise en page inattendus.
- Utilisation du chargement différé : ne chargez que le contenu essentiel au début et chargez le reste du contenu ultérieurement en fonction des besoins de l'utilisateur pour éviter de provoquer des mouvements inattendus dans la mise en page.
- Utilisation d'un framework de développement d'interface : Utilisez un framework de développement d'interface comme React ou Angular pour créer des interfaces utilisateur stables.
- Utilisation d'une animation pour insérer des éléments : utilisez une animation pour insérer des éléments afin d'éviter de provoquer des mouvements inattendus dans la mise en page.
- Surveillance et analyse des données : Utilisez des outils tels que Google Analytics ou Google Search Console pour surveiller le CLS et identifier tout problème.
Quels outils pouvez-vous utiliser pour mesurer les principaux Vitaux Web de base?
Les trois principaux indicateurs de performance web étant essentiels à l'amélioration de l'expérience utilisateur, Google les intègre aux outils couramment utilisés par les webmasters et les experts SEO pour optimiser les pages. Puisqu'il est indispensable de mesurer la performance de ces indicateurs pour nos sites , il est important de disposer des outils adéquats.
PageSpeed Blogs
PageSpeed
PageSpeed
Google Search Console
Pour consulter les indicateurs clés de performance web (Core Web Vitals) d'une page en particulier , connectez-vous simplement à la Google Search Console de votre site web et sélectionnez le bouton Core Web Vitals dans la barre latérale de la console ; un rapport s'affichera alors.
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
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 indicateurs Web Vitals essentiels sont désormais accessibles aux webmasters et propriétaires de sites grâce à une nouvelle extension. Fournissant un retour d'information en temps réel sur les trois principaux indicateurs Web Vitals, cette extension est cohérente avec les tests et rapports de Chrome, qui utilisent Google Analytics et d'autres outils. Elle permet non seulement aux webmasters d'analyser leurs propres pages web en temps réel, mais aussi de mesurer les performances des pages concurrentes qu'ils souhaitent égaler ou surpasser. L'extension Web Vitals vous permet de gagner du temps, de vous adapter plus rapidement aux évolutions du marché et d'optimiser la gestion de votre site.
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
Google Search Console affiche désormais les indicateurs Core Web Vitals lorsque les données d'expérience utilisateur Chrome sont disponibles. En accédant à Core Web Vitals , les deux catégories d'appareils apparaissent dans le tableau de bord de Google Console. Vous pouvez ainsi consulter les groupes de pages rencontrant 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 Core Web Vitals influencera votre positionnement dans les résultats de recherche à partir de 2021. Actuellement, les pages ne sont pas classées selon les Core Web Vitals . En 2021, les Core Web Vitals combineront la sécurité, l'adaptabilité mobile, la sûreté et l'absence de fenêtres contextuelles comme indicateurs pour mesurer l'expérience utilisateur globale de la page. Les webmasters et les propriétaires de sites disposent d'un préavis de six mois avant que Google ne commence à utiliser les Core Web Vitals comme critère de classement. Cependant, vous pouvez dès maintenant mesurer et améliorer ces indicateurs.
Il est probable qu'à l'avenir, Google utilisera de plus en plus l'expérience utilisateur et de navigation comme facteurs de classement, ainsi que la vitesse du site. La vitesse du site Web est déjà un facteur important dans le classement des moteurs de recherche, mais à mesure que l'expérience utilisateur augmente, elle deviendra de plus en plus essentielle pour se classer dans les premières positions.
Les indicateurs Web essentiels de Google , tels que LCP, FID et CLS, mesurent l'expérience utilisateur et la vitesse de chargement d'un site. Un site qui atteint des valeurs optimales pour ces facteurs a de meilleures chances d'être bien référencé dans les résultats de recherche.
Pour cette raison, il est important que les propriétaires de sites Web se concentrent sur la vitesse du site et l'expérience utilisateur dans les mois à venir, en utilisant des techniques telles que l'optimisation des images, l'utilisation d'une connexion rapide, l'utilisation d'un réseau de diffusion de contenu (CDN) et l'optimisation du code JavaScript.
Conseils pour améliorer votre score Vitaux Web de base
La plupart des solutions courantes pour améliorer la vitesse globale d'une page consistent également à optimiser ses indicateurs web essentiels. Selon Google, vous pouvez améliorer ces indicateurs en :
- 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 conseils concernant la métrique spécifique Core Web Vitals , une ressource précieuse que tout webmaster travaillant dans le référencement ou le développement web devrait consulter régulièrement :
Vous pouvez également utiliser le Outil de test PageSpeed
Utilisateurs de PageSpeed
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 de laboratoire Core Web Vitals sont collectées via l'API du navigateur, notamment les chronomètres d'événements de chargement de page et des estimations mathématiques simulant l'interactivité de l'utilisateur. Les données de terrain Core Web Vitals, quant à elles , reposent sur des indicateurs similaires, mais sont collectées directement auprès des utilisateurs lors de leur navigation sur les pages web ; les valeurs des chronomètres d'événements sont ensuite transmises à un référentiel.
Utilisation de PageSpeed
Ces outils d'analyse de données de laboratoire sont indispensables à votre flux de travail de reporting et à l'amélioration de vos indicateurs clés de performance web (Core Web Vitals) . Ils devraient toujours faire partie de votre arsenal SEO. Sauf problème avec vos données de terrain, ces données de laboratoire pourraient même suffire à vos besoins de développeur si votre site web repose sur quelques modèles seulement.
La bibliothèque JavaScript Web Vitals peut également s'avérer utile dans votre flux de travail lorsqu'elle est utilisée comme pipeline de tests. Disponible via un CDN, elle peut être intégrée au rendu HTML et configurée pour diffuser en continu des données de terrain collectées indépendamment vers des centres de comparaison à des fins de reporting.
Lighthouse offre aux webmasters plusieurs points d'entrée particulièrement utiles dans le processus de développement. Il inclut divers tests qui contribuent à garantir la conformité aux normes web établies. Lighthouse peut également vous aider à déboguer les situations où vous rencontrez des problèmes avec les Core Web Vitals.
Comparaison des données de terrain avec les résultats de laboratoire
Chrome, Firefox, Safari, Opera mini et d'autres navigateurs modernes mesurent en temps réel l'expérience utilisateur sur vos sites web depuis leurs appareils grâce à l'API JavaScript intégrée. Comme indiqué, Google collecte et publie ses données de terrain auprès des utilisateurs de Chrome via le rapport CrUX, parfois en utilisant 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 des données précises et des résultats locaux lors de l'optimisation des Core Web Vitals avec les outils de développement Chrome et l'extension Web Vitals, pensez à vider le cache ou à le contourner en appuyant sur Maj + Actualiser dans votre navigateur. Autre astuce : chargez la page « À propos » vierge avant de démarrer une session de surveillance et d'enregistrement des performances dans les outils de développement pour un rapport initial optimal.
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 paraître évident que CLS soit le score de données de terrain le plus difficile à reproduire localement, ce n'est pas forcément le cas. Vous pouvez utiliser l'extension Chrome pour activer l'affichage des Core Web Vitals et ainsi observer l'évolution des scores pendant votre navigation et vos interactions 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 que le LCP, le FID et le CLS soient considérés comme les indicateurs web essentiels, plusieurs autres métriques, moins importantes, peuvent contribuer à offrir une expérience utilisateur optimale. On les appelle généralement indicateurs web secondaires, ou simplement indicateurs web.
- Heure du premier octet : TTFB est le temps qu'il faut au navigateur pour recevoir le premier octet du contenu de la page
- Temps d'interactivité : TTI est le temps qu'il faut à la page pour charger ses sous-ressources et être capable de répondre aux commandes de l'utilisateur.
- Temps de blocage total : TBT prend en charge le temps entre FCP et TTI lorsqu'un blocage total s'est produit dans le thread, empêchant la page de répondre à l'entrée de l'utilisateur.
conclusion
L'optimisation des indicateurs clés de performance web (KPI) sera un défi majeur si vous souhaitez que vos pages se positionnent en haut des SERP l'année prochaine. Ces trois KPI étant essentiellement techniques, de nombreux webmasters peuvent avoir des connaissances limitées sur ce sujet.
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.
