Comment surveiller et optimiser Google Core Web Vitals
Les trois mesures Core Web Vitals vous indiquent non seulement la façon dont les visiteurs perçoivent votre site Web, mais ont également un impact sur votre classement dans les résultats de recherche Google. Dans cet article, nous verrons ce que sont les Core Web Vitals, comment ils sont mesurés et comment vous pouvez utiliser DebugBear pour les surveiller en continu.
Cela signifie que vous devez tester votre site Web pour identifier les optimisations. Au-delà de ça, la surveillance garantit que vous pouvez garder une longueur d’avance sur vos scores Core Web Vitals pour le long terme.
Découvrons comment travailler avec différents types de données Core Web Vitals et comment la surveillance peut vous aider à mieux comprendre les expériences utilisateur et à les optimiser.
Que sont les éléments essentiels du Web ?
Google utilise trois mesures Web Vitals pour mesurer différents aspects des performances d’un site Web :
Le La plus grande peinture de contenu la métrique est ce qui se rapproche le plus d’une mesure traditionnelle du temps de chargement. Cependant, LCP ne suit pas une étape de chargement de page purement technique comme le Événement de chargement JavaScript. Au lieu de cela, il se concentre sur ce que l’utilisateur peut voir en mesurant combien de temps après l’ouverture d’une page, le plus grand élément de contenu de la page apparaît.
Plus le LCP est rapide, mieux c’est, et Google évalue un score LCP de réussite inférieur à 2,5 secondes.
Changement de disposition cumulatif est une mesure un peu étrange, car elle ne mesure pas la rapidité avec laquelle quelque chose se produit. Au lieu de cela, il regarde la stabilité de la mise en page une fois que la page commence à se charger. Les changements de mise en page signifient que le contenu se déplace, désorientant l’utilisateur et provoquant potentiellement des clics accidentels sur le mauvais élément de l’interface utilisateur.
Le score CLS est calculé en examinant la distance parcourue par un élément et sa taille. Visez un score inférieur à 0,1 pour obtenir une bonne note de Google.
Même les sites Web qui se chargent rapidement frustrent souvent les utilisateurs lorsque les interactions avec la page semblent lentes. C’est pourquoi Interaction avec la peinture suivante mesures combien de temps la page reste gelée après l’interaction de l’utilisateur sans mises à jour visuelles.
Les interactions entre les pages doivent être pratiquement instantanées, c’est pourquoi Google recommande un score INP inférieur à 200 millisecondes.
Quels sont les différents types de données Web Vitals de base ?
Vous verrez souvent différentes mesures de vitesse de page rapportées par différents outils et sources de données, il est donc important de comprendre les différences. Nous avons j’ai publié un article entier à ce sujetmais voici la répartition de haut niveau ainsi que les avantages et les inconvénients de chacun :
Tests synthétiques Ces tests sont exécutés à la demande dans un environnement de laboratoire contrôlé dans un emplacement fixe avec un réseau et une vitesse d’appareil fixes. Ils peuvent produire des rapports et des recommandations très détaillés.
Surveillance des utilisateurs réels (RUM) Ces données vous indiquent à quelle vitesse votre site Web est présenté à vos visiteurs réels. Cela signifie que vous devez installer un script d’analyse pour les collecter, et les rapports disponibles sont moins détaillés que pour les tests en laboratoire.
Données CruX Google collecte auprès des utilisateurs de Chrome dans le cadre du Rapport sur l’expérience utilisateur Chrome (CrUX) et l’utilise comme signal de classement. Il est disponible pour tous les sites Web ayant suffisamment de trafic, mais comme il couvre une fenêtre glissante de 28 jours, il faut un certain temps pour que les modifications apportées à votre site Web soient reflétées ici. Il n’inclut pas non plus de données de débogage pour vous aider à optimiser vos métriques.
Commencez par exécuter un test de vitesse de page unique
Avant de vous inscrire à un service de surveillance, il est préférable d’effectuer un test de laboratoire ponctuel avec un outil gratuit tel que Informations PageSpeed de Google ou la Test de vitesse du site Web DebugBear. Ces deux outils génèrent des rapports avec les données Google CrUX qui indiquent si les utilisateurs réels rencontrent des problèmes sur votre site Web.
Note: Les données de laboratoire que vous obtenez de certains outils basés sur Lighthouse, comme PageSpeed Insights, peut être peu fiable.
L’INP est mieux mesuré pour les utilisateurs réels, où vous pouvez voir les éléments avec lesquels les utilisateurs interagissent le plus souvent et où se situent les problèmes. Mais un outil gratuit comme le Débogueur INP peut être un bon point de départ si vous n’avez pas encore configuré RUM.
Comment surveiller les éléments essentiels du Web en continu avec des tests programmés en laboratoire
L’exécution de tests en continu présente quelques avantages par rapport aux tests ad hoc. Plus important encore, des tests continus déclenchent des alertes chaque fois qu’un nouveau problème apparaît sur votre site Web, vous permettant de commencer à les réparer immédiatement. Vous aurez également accès aux données historiquesvous permettant de voir exactement quand une régression s’est produite et de comparer les résultats des tests avant et après pour voir ce qui a changé.
Les tests de laboratoire programmés sont faciles à configurer à l’aide d’un outil de surveillance de site Web tel que DébogageOurs. Saisissez une liste d’URL de sites Web et choisissez un type d’appareil, un emplacement de test et une fréquence de test pour faire fonctionner les choses :
Au fur et à mesure de son exécution, ce processus alimente le tableau de bord détaillé avec les données historiques Core Web Vitals. Vous pouvez surveiller un certain nombre de pages de votre site Web ou suivre la vitesse de vos concurrents pour vous assurer de garder une longueur d’avance.
Lorsqu’une régression se produit, vous pouvez approfondir les résultats à l’aide de l’outil de DebuBears. Mode comparaison. Ce mode vous permet de voir côte à côte les résultats des tests avant et après, vous donnant ainsi le contexte nécessaire pour identifier les causes. Vous voyez exactement ce qui a changé. Par exemple, dans le cas suivant, on voit que Compression HTTP a cessé de fonctionner pour un fichier, ce qui a entraîné une augmentation du poids de la page et des temps de téléchargement plus longs.
Comment surveiller les éléments essentiels du Web des utilisateurs réels
Les tests synthétiques sont parfaits pour créer des rapports très détaillés sur le temps de chargement de votre page. Cependant, d’autres aspects de l’expérience utilisateur, tels que les changements de mise en page et la lenteur des interactions, dépendent fortement de la manière dont les utilisateurs réels utilisent votre site Web. Donc ça vaut la peine mettre en place une véritable surveillance des utilisateurs avec un outil comme DebugBear.
Pour surveiller les données Web vitales des utilisateurs réels, vous devrez installer un extrait d’analyse qui collecte ces données sur votre site Web. Une fois cela fait, vous pourrez voir les données des trois métriques Core Web Vitals sur l’ensemble de votre site Web.
Pour optimiser vos scores, vous pouvez accéder au tableau de bord pour chaque mesure individuelle, sélectionner une page spécifique qui vous intéresse, puis approfondir les données.
Par exemple, vous pouvez voir si un score LCP lent est dû à une réponse lente du serveur, ressources bloquant le renduou par l’élément de contenu LCP lui-même.
Vous constaterez également que l’élément LCP varie selon les visiteurs. Les résultats des tests en laboratoire sont toujours les mêmes, car ils reposent sur une seule taille d’écran fixe. Cependant, dans le monde réel, les visiteurs utilisent un large éventail d’appareils et verront un contenu différent lorsqu’ils ouvriront votre site Web.
INP est difficile à déboguer sans données utilisateur réelles. Pourtant, un outil d’analyse comme DebugBear peut vous dire exactement avec quels éléments de page les utilisateurs interagissent le plus souvent et lesquelles de ces interactions sont lentes à répondre.
Merci au nouveau API d’images d’animation longues, nous pouvons également voir des scripts spécifiques qui contribuent à ralentir les interactions. Nous pouvons alors décider d’optimiser ces scripts, de les supprimer de la page ou de les exécuter de manière à ne pas bloquer les interactions aussi longtemps.
La surveillance continue de Core Web Vitals vous permet de voir comment les modifications du site Web affectent l’expérience utilisateur et vous garantit d’être alerté en cas de problème. Bien qu’il soit possible de mesurer les Core Web Vitals à l’aide d’un large éventail d’outils, ces outils sont limités par le type de données qu’ils utilisent pour évaluer les performances, sans compter qu’ils ne fournissent qu’un seul instantané des performances à un moment précis.
Un outil tel que DebugBear vous donne accès à plusieurs types de données différents que vous pouvez utiliser pour dépanner les performances et optimiser votre site Web, avec des fonctionnalités RUM qui offrent un historique des performances pour identifier les problèmes où et quand ils se produisent. Inscrivez-vous pour un essai gratuit de DebugBear ici.
avril 16, 2024
Comment surveiller et optimiser Google Core Web Vitals
Google Initiative Core Web Vitals a accru l’attention que les propriétaires de sites Web doivent accorder à l’expérience utilisateur. Vous pouvez désormais voir plus facilement quand les utilisateurs ont une mauvaise expérience sur votre site Web, et une mauvaise UX a également un impact plus important sur le référencement.
Cela signifie que vous devez tester votre site Web pour identifier les optimisations. Au-delà de ça, la surveillance garantit que vous pouvez garder une longueur d’avance sur vos scores Core Web Vitals pour le long terme.
Découvrons comment travailler avec différents types de données Core Web Vitals et comment la surveillance peut vous aider à mieux comprendre les expériences utilisateur et à les optimiser.
Que sont les éléments essentiels du Web ?
Google utilise trois mesures Web Vitals pour mesurer différents aspects des performances d’un site Web :
La plus grande peinture de contenu (LCP)
Le La plus grande peinture de contenu la métrique est ce qui se rapproche le plus d’une mesure traditionnelle du temps de chargement. Cependant, LCP ne suit pas une étape de chargement de page purement technique comme le Événement de chargement JavaScript. Au lieu de cela, il se concentre sur ce que l’utilisateur peut voir en mesurant combien de temps après l’ouverture d’une page, le plus grand élément de contenu de la page apparaît.
Plus le LCP est rapide, mieux c’est, et Google évalue un score LCP de réussite inférieur à 2,5 secondes.
Changement de mise en page cumulatif (CLS)
Changement de disposition cumulatif est une mesure un peu étrange, car elle ne mesure pas la rapidité avec laquelle quelque chose se produit. Au lieu de cela, il regarde la stabilité de la mise en page une fois que la page commence à se charger. Les changements de mise en page signifient que le contenu se déplace, désorientant l’utilisateur et provoquant potentiellement des clics accidentels sur le mauvais élément de l’interface utilisateur.
Le score CLS est calculé en examinant la distance parcourue par un élément et sa taille. Visez un score inférieur à 0,1 pour obtenir une bonne note de Google.
Interaction avec la peinture suivante (INP)
Même les sites Web qui se chargent rapidement frustrent souvent les utilisateurs lorsque les interactions avec la page semblent lentes. C’est pourquoi Interaction avec la peinture suivante mesures combien de temps la page reste gelée après l’interaction de l’utilisateur sans mises à jour visuelles.
Les interactions entre les pages doivent être pratiquement instantanées, c’est pourquoi Google recommande un score INP inférieur à 200 millisecondes.
Quels sont les différents types de données Web Vitals de base ?
Vous verrez souvent différentes mesures de vitesse de page rapportées par différents outils et sources de données, il est donc important de comprendre les différences. Nous avons j’ai publié un article entier à ce sujetmais voici la répartition de haut niveau ainsi que les avantages et les inconvénients de chacun :
Ces tests sont exécutés à la demande dans un environnement de laboratoire contrôlé dans un emplacement fixe avec un réseau et une vitesse d’appareil fixes. Ils peuvent produire des rapports et des recommandations très détaillés.
Ces données vous indiquent à quelle vitesse votre site Web est présenté à vos visiteurs réels. Cela signifie que vous devez installer un script d’analyse pour les collecter, et les rapports disponibles sont moins détaillés que pour les tests en laboratoire.
Google collecte auprès des utilisateurs de Chrome dans le cadre du Rapport sur l’expérience utilisateur Chrome (CrUX) et l’utilise comme signal de classement. Il est disponible pour tous les sites Web ayant suffisamment de trafic, mais comme il couvre une fenêtre glissante de 28 jours, il faut un certain temps pour que les modifications apportées à votre site Web soient reflétées ici. Il n’inclut pas non plus de données de débogage pour vous aider à optimiser vos métriques.
Commencez par exécuter un test de vitesse de page unique
Avant de vous inscrire à un service de surveillance, il est préférable d’effectuer un test de laboratoire ponctuel avec un outil gratuit tel que Informations PageSpeed de Google ou la Test de vitesse du site Web DebugBear. Ces deux outils génèrent des rapports avec les données Google CrUX qui indiquent si les utilisateurs réels rencontrent des problèmes sur votre site Web.
Note: Les données de laboratoire que vous obtenez de certains outils basés sur Lighthouse, comme PageSpeed Insights, peut être peu fiable.
L’INP est mieux mesuré pour les utilisateurs réels, où vous pouvez voir les éléments avec lesquels les utilisateurs interagissent le plus souvent et où se situent les problèmes. Mais un outil gratuit comme le Débogueur INP peut être un bon point de départ si vous n’avez pas encore configuré RUM.
Comment surveiller les éléments essentiels du Web en continu avec des tests programmés en laboratoire
L’exécution de tests en continu présente quelques avantages par rapport aux tests ad hoc. Plus important encore, des tests continus déclenchent des alertes chaque fois qu’un nouveau problème apparaît sur votre site Web, vous permettant de commencer à les réparer immédiatement. Vous aurez également accès aux données historiquesvous permettant de voir exactement quand une régression s’est produite et de comparer les résultats des tests avant et après pour voir ce qui a changé.
Les tests de laboratoire programmés sont faciles à configurer à l’aide d’un outil de surveillance de site Web tel que DébogageOurs. Saisissez une liste d’URL de sites Web et choisissez un type d’appareil, un emplacement de test et une fréquence de test pour faire fonctionner les choses :
Au fur et à mesure de son exécution, ce processus alimente le tableau de bord détaillé avec les données historiques Core Web Vitals. Vous pouvez surveiller un certain nombre de pages de votre site Web ou suivre la vitesse de vos concurrents pour vous assurer de garder une longueur d’avance.
Lorsqu’une régression se produit, vous pouvez approfondir les résultats à l’aide de l’outil de DebuBears. Mode comparaison. Ce mode vous permet de voir côte à côte les résultats des tests avant et après, vous donnant ainsi le contexte nécessaire pour identifier les causes. Vous voyez exactement ce qui a changé. Par exemple, dans le cas suivant, on voit que Compression HTTP a cessé de fonctionner pour un fichier, ce qui a entraîné une augmentation du poids de la page et des temps de téléchargement plus longs.
Comment surveiller les éléments essentiels du Web des utilisateurs réels
Les tests synthétiques sont parfaits pour créer des rapports très détaillés sur le temps de chargement de votre page. Cependant, d’autres aspects de l’expérience utilisateur, tels que les changements de mise en page et la lenteur des interactions, dépendent fortement de la manière dont les utilisateurs réels utilisent votre site Web. Donc ça vaut la peine mettre en place une véritable surveillance des utilisateurs avec un outil comme DebugBear.
Pour surveiller les données Web vitales des utilisateurs réels, vous devrez installer un extrait d’analyse qui collecte ces données sur votre site Web. Une fois cela fait, vous pourrez voir les données des trois métriques Core Web Vitals sur l’ensemble de votre site Web.
Pour optimiser vos scores, vous pouvez accéder au tableau de bord pour chaque mesure individuelle, sélectionner une page spécifique qui vous intéresse, puis approfondir les données.
Par exemple, vous pouvez voir si un score LCP lent est dû à une réponse lente du serveur, ressources bloquant le renduou par l’élément de contenu LCP lui-même.
Vous constaterez également que l’élément LCP varie selon les visiteurs. Les résultats des tests en laboratoire sont toujours les mêmes, car ils reposent sur une seule taille d’écran fixe. Cependant, dans le monde réel, les visiteurs utilisent un large éventail d’appareils et verront un contenu différent lorsqu’ils ouvriront votre site Web.
INP est difficile à déboguer sans données utilisateur réelles. Pourtant, un outil d’analyse comme DebugBear peut vous dire exactement avec quels éléments de page les utilisateurs interagissent le plus souvent et lesquelles de ces interactions sont lentes à répondre.
Merci au nouveau API d’images d’animation longues, nous pouvons également voir des scripts spécifiques qui contribuent à ralentir les interactions. Nous pouvons alors décider d’optimiser ces scripts, de les supprimer de la page ou de les exécuter de manière à ne pas bloquer les interactions aussi longtemps.
Conclusion
La surveillance continue de Core Web Vitals vous permet de voir comment les modifications du site Web affectent l’expérience utilisateur et vous garantit d’être alerté en cas de problème. Bien qu’il soit possible de mesurer les Core Web Vitals à l’aide d’un large éventail d’outils, ces outils sont limités par le type de données qu’ils utilisent pour évaluer les performances, sans compter qu’ils ne fournissent qu’un seul instantané des performances à un moment précis.
Un outil tel que DebugBear vous donne accès à plusieurs types de données différents que vous pouvez utiliser pour dépanner les performances et optimiser votre site Web, avec des fonctionnalités RUM qui offrent un historique des performances pour identifier les problèmes où et quand ils se produisent. Inscrivez-vous pour un essai gratuit de DebugBear ici.
(gg, ouais)
Source link
Partager :
Articles similaires