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 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.
LCP (Largest Contentful Paint) est l'un des trois Vitaux Web de base par Google qui mesure la vitesse de chargement de la page Web. En particulier, LCP mesure le temps entre le moment où un utilisateur clique sur le lien pour accéder à la page et le moment où le contenu principal de la page a été entièrement chargé et affiché. Un LCP élevé indique une longue attente de l'utilisateur et une mauvaise expérience de navigation.
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 Vitaux Web de base par Google qui mesure la réactivité de la page Web. En particulier, le FID mesure le temps entre le moment où un utilisateur effectue une interaction (par exemple en cliquant sur un bouton ou en saisissant du texte dans une zone de texte) et le moment où la page commence à réagir à l'interaction. Un FID élevé indique une longue attente de l'utilisateur et une mauvaise réactivité de la page.
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.
CLS (Cumulative Layout Shift) est l'un des trois Vitaux Web de base de Google qui mesure la stabilité de la page Web. Plus précisément, CLS mesure la quantité de contenu qui se déplace sur la page lors de son chargement. Plus la valeur CLS est élevée, plus il est probable que les utilisateurs auront des difficultés à interagir avec la page, par exemple en cliquant sur un lien ou un bouton, en raison d'une navigation inattendue.
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?
É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 ACTUALITES
PageSpeed
PageSpeed
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
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
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.
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.
I Vitaux Web de base de Google, tels que LCP, FID et CLS, sont une mesure de l'expérience utilisateur et de la vitesse du site. Si un site atteint des valeurs optimales pour ces facteurs, il aura de meilleures chances de se classer haut 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 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
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 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
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.
- 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
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.
