Combinez les outils Google pour réaliser des audits, des améliorations et des contrôles efficaces sur votre site Web.
Les Core Web Vitals sont un ensemble de métriques qui évaluent l'expérience utilisateur en fonction de critères tels que les performances de chargement, la réactivité aux entrées utilisateur et la stabilité de la mise en page.
Ce guide présente un workflow permettant d'améliorer les métriques Core Web Vitals pour votre site Web, mais son point de départ dépend de la collecte de vos propres données de terrain. Sa fin peut dépendre des outils Google que vous trouverez utiles pour diagnostiquer et résoudre les problèmes liés à l'expérience utilisateur.
Il est préférable de mesurer les métriques Core Web Vitals sur le terrain
Les métriques Core Web Vitals sont spécifiquement conçues pour mesurer l'expérience des utilisateurs sur votre site Web. Ce sont des métriques centrées sur l'utilisateur. Les outils basés sur des ateliers, tels que Lighthouse, sont des outils de diagnostic permettant d'identifier d'éventuels problèmes de performances et de mettre en évidence les bonnes pratiques. Les outils basés sur des ateliers sont exécutés dans certaines conditions prédéfinies et peuvent ne pas refléter les mesures Core Web Vitals réelles effectuées par vos utilisateurs.
Par exemple, Lighthouse est un outil en laboratoire qui exécute des tests avec une simulation de limitation dans un environnement mobile ou de bureau simulé. Bien que ces simulations de ralentissements du réseau et des appareils soient utiles pour diagnostiquer les problèmes de performances, elles ne représentent qu'un échantillon de la grande variété des conditions du réseau et des capacités des appareils. Elles peuvent donc ne pas refléter ce que les utilisateurs de vos sites rencontrent.
Les outils basés sur un laboratoire, comme Lighthouse, effectuent généralement un "chargement à froid" d'une page Web en tant que visiteur totalement nouveau. Il s'agit souvent du chargement le plus lent, mais en réalité, certains éléments peuvent être mis en cache par les visiteurs s'ils ont déjà visité le site ou lorsqu'ils naviguent sur le site. Les nouveaux visiteurs et les nouveaux outils peuvent également utiliser le site différemment en présence de bannières de cookies ou d'autres contenus.
En bref, si les outils basés sur des fonctionnalités expérimentales peuvent indiquer des problèmes de performances potentiels et vous aider à déboguer et à itérer, ils ne reflètent pas forcément le nombre de visiteurs qui consultent réellement votre site Web. Utilisez les données de terrain pour mesurer les performances réelles, et des outils basés sur des laboratoires comme Lighthouse pour les diagnostics afin de déterminer comment les améliorer. Consultez également la section Quand utiliser Lighthouse.
Google mesure les Core Web Vitals à l'aide du rapport d'expérience utilisateur Chrome. Il s'agit d'un ensemble de données public collecté auprès d'utilisateurs réels de Chrome. Il s'agit de l'épine dorsale de nombreux outils Google et tiers permettant de générer des rapports sur les Core Web Vitals d'un site.
L'expérience utilisateur Chrome a cependant des limites. Elle permet souvent de savoir quand un problème survient, mais ne dispose souvent que de données insuffisantes pour vous indiquer pourquoi.
Collecter vos propres données de terrain si possible
Le meilleur ensemble de données pour améliorer les performances du site Web sur le terrain est celui que vous créez. La première étape consiste à collecter des données réelles auprès des visiteurs de votre site Web. La procédure à suivre dépend de la taille de votre organisation et de votre intérêt (ou non) de payer pour une solution tierce ou de créer la vôtre.
Les solutions payantes mesureront presque certainement les Core Web Vitals (et d'autres métriques de performances) et fournissent généralement divers outils pour analyser les données obtenues. Cette méthode peut être préférable dans les grandes organisations disposant de ressources importantes.
Toutefois, vous ne faites peut-être pas partie d'une grande entreprise, ni même d'une entreprise qui a les moyens de s'offrir une solution tierce. Dans ce cas, la bibliothèque web-vitals de Google vous aidera à rassembler tous les signaux Web. Cependant, vous serez responsable de la manière dont ces données sont signalées, stockées et analysées.
Si vous utilisez déjà Google Analytics, mais que vous n'avez pas encore commencé à collecter vos propres données de champ, vous pouvez peut-être utiliser la bibliothèque web-vitals pour envoyer les métriques Web collectées sur le terrain vers Google Analytics et utiliser les exportations BigQuery de GA4 pour générer des rapports sur les données.
Comprendre les outils Google
Que vous collectiez ou non vos propres données de terrain, plusieurs outils Google peuvent vous être utiles pour analyser les Core Web Vitals. Avant d'établir un flux de travail, une vue d'ensemble de chaque outil peut vous aider à comprendre quels outils peuvent, ou non, être les mieux pour vous.
Rapport d'expérience utilisateur Chrome
Comme indiqué précédemment, CrUX est un ensemble de données public rassemblant des données réelles recueillies auprès d'un segment d'utilisateurs réels de Google Chrome sur des millions de sites Web. Il comprend les métriques Core Web Vitals et d'autres métriques pour les sites Web qui enregistrent un trafic suffisant.
CrUX est disponible sous forme d'ensemble de données BigQuery mensuel au niveau de l'origine, ou d'une API quotidienne au niveau de l'URL ou de l'origine, à condition que l'URL ou l'origine comporte suffisamment d'échantillons dans l'ensemble de données CrUX. Les données BigQuery sont également consultables dans le tableau de bord CrUX, ce qui permet aux sites d'examiner les tendances historiques.
Quand utiliser CrUX ?
Même si vous collectez vos propres données de terrain, l'expérience utilisateur Chrome reste utile. Bien que l'expérience utilisateur Chrome (CrUX) représente un sous-ensemble d'utilisateurs de Chrome, il est utile de comparer les données réelles de votre site Web pour déterminer dans quelle mesure elle s'aligne sur ses données CrUX. Chacune de ces méthodes présente des avantages et des inconvénients, ce qui peut entraîner des différences. Si vous ne collectez aucune donnée de champ pour votre site Web, l'expérience utilisateur Chrome (CrUX) est particulièrement utile pour fournir une vue d'ensemble de haut niveau, à condition que votre site soit représenté dans son ensemble de données.
Vous pouvez utiliser CrUX directement ou à l'aide d'un autre outil (y compris ceux mentionnés ci-dessous). L'utilisation directe de l'ensemble de données CrUX, à l'aide de BigQuery ou de l'API, est utile pour présenter des données qui ne sont pas présentées dans d'autres outils (par exemple, les données au niveau du pays ne sont souvent pas disponibles dans d'autres outils) ou pour afficher les métriques supplémentaires dans CrUX qui, là encore, ne sont souvent pas visibles dans d'autres outils.
Quand ne pas utiliser l'expérience utilisateur Chrome (CrUX)
L'expérience utilisateur Chrome (CrUX) ne représente que les utilisateurs de Chrome, et même dans ce cas, seulement un sous-ensemble d'utilisateurs de Chrome. Une solution RUM complète peut inclure davantage d'expériences dans Chrome et d'autres navigateurs compatibles avec les métriques Web Vitals.
Les sites Web qui ne reçoivent pas assez de trafic ne sont pas représentés dans l'ensemble de données CrUX. Dans ce cas, vous devrez collecter vos propres données sur le terrain pour comprendre les performances de votre site Web sur le terrain, car CrUX ne sera pas une option. Sinon, vous devrez vous fier aux données de laboratoire, mais avec les limites qu'elles peuvent ne pas être représentatives de celles décrites précédemment.
Étant donné que les données CrUX fournies correspondent à une moyenne glissante sur les 28 derniers jours, ce n'est pas un outil idéal pendant le développement, car il faudra un certain temps pour que les améliorations soient reflétées dans l'ensemble de données CrUX.
Enfin, en tant que jeu de données public, CrUX se limite à la quantité d'informations qu'il peut mettre à disposition et à la manière dont ces données peuvent être interrogées. La capture de vos propres données RUM vous permet de recueillir plus de détails (par exemple, l'élément LCP) et de segmenter davantage les données pour identifier les problèmes. Les métriques Core Web Vitals sont-elles meilleures ou moins bonnes que les utilisateurs déconnectés ? Les utilisateurs dont le LCP est lent présentent-ils un élément LCP spécifique ? Quelles interactions génèrent des valeurs FID et INP élevées ?
PageSpeed Insights (PSI)
PSI est un outil qui permet de générer des rapports sur les données réelles de CrUX et celles issues de l'atelier Lighthouse pour une page donnée. Pour en savoir plus, consultez les sections correspondantes.
Quand utiliser PSI
L'outil PSI est idéal pour évaluer les performances de l'expérience utilisateur Chrome (CrUX) au niveau de la page ou de l'origine, tant pour les utilisateurs sur mobile que sur ordinateur. Il s'agit d'un bon choix pour obtenir un aperçu initial des métriques Core Web Vitals pour une page ou un site. Il vous permet également de consulter les données Core Web Vitals pour d'autres sites tels que les concurrents.
L'outil PSI fournit également des données Lighthouse, qui fournissent des recommandations utiles pour améliorer vos Core Web Vitals, si les métriques correspondent. Dans le cas contraire, les recommandations Lighthouse peuvent être moins pertinentes.
Étant donné que Lighthouse est exécuté à partir du serveur, il peut constituer une référence plus cohérente que l'exécution de Lighthouse à partir des outils de développement.
Cas d'utilisation non recommandés
PSI n'est disponible que pour les URL publiques. Elle ne peut pas être utilisée sur les sites de développement qui ne sont pas accessibles publiquement.
Les données CrUX ne sont disponibles que lorsque les sites répondent à certains critères d'éligibilité, y compris les seuils de popularité des sites. L'outil PSI est moins utile lorsque les données CrUX ne sont pas disponibles pour une page ou une origine, car il ne peut afficher que les données expérimentales de Lighthouse.
De même, si vous ne disposez que de données CrUX au niveau de l'origine et non de l'URL spécifique testée, cela limite également son utilité à établir une corrélation entre les données du champ au niveau de l'origine et les diagnostics de laboratoire au niveau de la page. Le fait de disposer des données du champ au niveau de l'origine reste une information très utile pour résumer les performances du site. Les audits Lighthouse peuvent être utiles, mais il convient d'être particulièrement vigilant dans ce cas.
Enfin, lorsque les données au niveau de la page sont disponibles dans CrUX, mais diffèrent des données expérimentales de Lighthouse, les recommandations de Lighthouse peuvent avoir une valeur limitée. Cela peut se produire en particulier pour les problèmes CLS post-chargement et pour l'interactivité des métriques Core Web Vitals (FID et INP), pour lesquelles les audits en laboratoire sont moins utiles.
Search Console
La Search Console mesure le trafic de recherche et les performances de votre site, y compris les métriques Core Web Vitals. Seuls les propriétaires ayant confirmé être propriétaire du site y ont accès.
La Search Console offre une fonctionnalité intéressante : elle regroupe des pages similaires (par exemple, celles qui utilisent le même modèle) dans une seule évaluation de groupe. La Search Console inclut également un rapport Core Web Vitals basé sur les données réelles issues de l'expérience utilisateur Chrome (CrUX).
Quand utiliser la Search Console ?
La Search Console permet aux développeurs comme aux non-développeurs d'évaluer les performances de la recherche et des pages contrairement aux autres outils Google. La présentation des données CrUX et le regroupement des pages par similarité offre un aperçu novateur de l'impact de l'amélioration des performances sur des catégories entières de pages.
Dans quels cas ne pas utiliser la Search Console ?
La Search Console peut ne pas convenir aux projets qui utilisent différents outils tiers qui regroupent les pages par similitude, ou si un site Web n'est pas représenté dans l'ensemble de données CrUX.
Le regroupement de pages peut également prêter à confusion lorsque les exemples de pages d'un groupe présentent des caractéristiques différentes de celles du reste du groupe (par exemple, si le groupe échoue globalement à certains Core Web Vitals, mais que les exemples de pages semblent tous réussir les mêmes Core Web Vitals). Cela peut se produire lorsqu'un groupe contient une longue traîne ou des pages rarement consultées qui peuvent être plus lentes à charger, car elles sont moins susceptibles d'être mises en cache. Lorsque le volume de ces pages de longue traîne est suffisant, elles peuvent influencer le taux de réussite global du groupe.
Phare
Lighthouse est un outil de laboratoire qui propose des opportunités spécifiques pour améliorer les performances des pages. Les flux utilisateur Lighthouse permettent également aux développeurs de créer des scripts pour les flux d'interaction afin de tester les performances au-delà du chargement de la page.
Lighthouse-CI est un outil associé qui exécute Lighthouse pendant la compilation et le déploiement du projet pour faciliter les tests de régression des performances. Il présente un rapport Lighthouse ainsi que des demandes d'extraction, et suit les métriques de performances au fil du temps.
Quand utiliser Lighthouse
Lighthouse est la solution idéale pour identifier des opportunités d'amélioration des performances pendant le développement dans les environnements locaux et de préproduction. Lighthouse CI est tout aussi utile lors des phases de compilation et de déploiement dans les environnements de préproduction et de production, où des tests de régression des performances sont nécessaires pour préserver une expérience utilisateur de qualité.
Dans quels cas ne pas utiliser Lighthouse
Lighthouse (ou Lighthouse CI) ne peut pas se substituer aux données réelles. Lighthouse est principalement un outil de diagnostic qui liste les problèmes potentiels et les bonnes pratiques à suivre pour un chargement de page prédéfini. Les recommandations qu'il propose ne correspondent pas toujours aux performances enregistrées par vos utilisateurs.
Même si Lighthouse peut être utilisé pour diagnostiquer les sites de production à l'aide d'outils tels que PageSpeed Insights, il convient idéalement de l'utiliser dans les environnements de développement et d'intégration continue afin de résoudre les problèmes de performances avant qu'ils n'entrent en production.
Extension Web Vitals
L'extension Chrome Web Vitals est un outil de diagnostic qui affiche les métriques Core Web Vitals lorsque vous naviguez sur le Web. Il inclut également les données CrUX de la page actuelle si elle est représentée dans l'ensemble de données CrUX, et fournit des informations de débogage pour vous aider à identifier les problèmes de performances des Core Web Vitals.
Quand utiliser l'extension Web Vitals ?
L'extension Web Vitals peut être utilisée par n'importe quel utilisateur, quel que soit son rôle, pour évaluer les Core Web Vitals d'une page à tous les stades de son cycle de vie. Elle est utile en tant que des performances lorsque vous interagissez avec la page pour tenter d'identifier les problèmes de performances, en particulier pour les problèmes post-charge que vous pourriez rencontrer avec les métriques CLS et INP.
Quand ne pas utiliser l'extension Web Vitals
L'extension Web Vitals ne constitue pas une évaluation globale des performances d'une page. De plus, les métriques qu'il consigne dépendent fortement de l'environnement dans lequel il s'exécute. Les développeurs disposent souvent de machines plus puissantes ou d'un accès à des réseaux plus rapides.
Panneau "Performances" dans les outils pour les développeurs Chrome
Les outils pour les développeurs Chrome regroupent plusieurs outils de développement intégrés au navigateur, y compris le panneau "Performances". Le panneau "Performances" est un outil de l'atelier qui permet de profiler l'activité de toutes les pages pendant leur chargement ou pendant une période enregistrée. Il offre des insights détaillés sur tout ce qu'il observe à travers des dimensions telles que l'activité de réseau, de rendu, de peinture et de script, ainsi que les Core Web Vitals d'une page.
Quand utiliser le panneau "Performances" ?
Le panneau "Performances" doit être utilisé par les développeurs pendant le développement pour obtenir des informations détaillées sur les performances des pages. Cela est particulièrement utile pour déboguer les problèmes de réactivité affectant le FID ou l'INP. Une fois qu'une interaction qui ne répond pas correctement est identifiée et reproductible, le panneau "Performances" peut fournir une multitude de données sur ce qui se passe dans le navigateur pour vous aider à comprendre le problème, du blocage du thread principal aux piles d'appels JavaScript, en passant par le rendu.
Dans quels cas ne pas utiliser le panneau "Performances"
Le panneau "Performances" est un outil pour les développeurs qui ne fournit que des données expérimentales. Il ne remplace pas les données du champ. Elle contient de nombreuses informations de débogage, mais à cause de cela, elle peut être difficile à comprendre pour les développeurs novices ou ceux qui n'ont pas de rôle de développeur.
Un workflow en trois étapes pour s'assurer que les Core Web Vitals de votre site sont sains
Lorsque vous travaillez à améliorer l'expérience utilisateur, il est préférable de considérer le processus comme un cycle continu. Pour améliorer les métriques Core Web Vitals et d'autres métriques de performances, vous pouvez adopter l'une des approches suivantes:
- Évaluer l'état du site Web et identifier les difficultés
- Déboguer et optimiser.
- Effectuez une surveillance à l'aide d'outils d'intégration continue pour détecter et prévenir les régressions.
Étape 1: Évaluez l'état du site Web et identifiez les possibilités d'amélioration
Il est préférable de commencer par les données réelles afin d'évaluer l'état de votre site Web.
- Utilisez PageSpeed Insights pour afficher les métriques globales liées à l'expérience Core Web Vitals sur l'origine, ainsi que des informations spécifiques sur une URL individuelle.
- La Search Console peut être utile pour identifier les pages à améliorer lorsque sa fonctionnalité de regroupement de pages est adaptée à votre site.
- Si vous disposez de données RUM, il s'agit souvent de la meilleure option pour identifier des pages ou des segments de trafic spécifiques présentant des problèmes.
Que vous analysiez les données de terrain que vous collectez vous-même ou les données CrUX, cette première étape est essentielle. Si vous ne collectez pas de données de terrain, les données CrUX peuvent suffire à vous guider, là encore, à condition que votre site Web soit représenté dans le jeu de données.
Analyser les performances du site avec PageSpeed Insights
PageSpeed Insights affiche les données d'expérience utilisateur Chrome (CrUX) couvrant les 28 derniers jours de données sur l'expérience utilisateur au 75e centile. Cela signifie que si 75% des expériences utilisateur atteignent le seuil défini pour une métrique donnée, l'expérience est considérée comme "satisfaisante".
Si vous avez une page spécifique en tête pour consulter les performances, utilisez-la. Pour obtenir une vue d'ensemble d'un site lorsque vous commencez à optimiser vos campagnes, vous pouvez commencer par la page d'accueil, qui est généralement l'une des pages les plus visitées de nombreux sites.
Au début, concentrez-vous sur la section Que rencontrent vos utilisateurs réels de l'outil PSI. Vous pouvez consulter jusqu'à quatre vues des données: mobile et ordinateur pour l'URL saisie, et l'ensemble de l'origine. Comparez-les et voyez ce qui les différencie. Les mobiles sont généralement moins performants que les ordinateurs de bureau, car il s'agit d'un appareil dont les ressources sont plus limitées et fonctionnant dans des conditions de réseau potentiellement moins stables. Si l'URL et les données d'origine sont très différentes, essayez de comprendre pourquoi: les pages d'accueil sont souvent les premières pages consultées (c'est-à-dire une page de destination). Elles peuvent donc être plus lentes que les utilisateurs d'origine subissent le poids d'un cache de navigateur non amorcé. Les pages suivantes se chargent probablement plus rapidement, car tous les éléments partagés sont mis en cache, ce qui réduit les données agrégées au niveau de l'origine.
L'outil PSI affiche également les trois Core Web Vitals (LCP, CLS et FID), la métrique INP en attente, ainsi que les métriques de diagnostic TTFB et FCP. Certains Core Web Vitals présentent-ils des échecs, et dans quelle mesure ? Cela vous indiquera où concentrer vos efforts.
Comprenez les relations entre ces chiffres, en particulier pour le LCP. Si le LCP est lent, comme dans cet exemple, examinez le TTFB et le FCP, qui sont tous deux des jalons pour cette métrique. Dans cet exemple, nous avons un TTFB de 1,8 seconde, ce qui va rendre très difficile d'atteindre le seuil recommandé de 2,5 secondes pour obtenir un bon LCP. Cela suggère soit un backend lent (problèmes de serveur ou manque de CDN), des réseaux plus lents ou des redirections retardant les premiers octets HTML. Pour en savoir plus, consultez le guide d'Optimize. Le FCP prend une seconde de plus, ce qui peut encore indiquer que les réseaux sont plus lents. Dans cet exemple, le LCP est peu après le FCP, ce qui suggère que la ressource LCP est bien optimisée une fois la page chargée elle-même.
Pour la CLS, examinez les scores CLS CrUX et Lighthouse pour déterminer s'il s'agit d'un problème de CLS de chargement (que Lighthouse détectera et indiquera pour chaque problème de CLS) ou s'il s'agit d'un problème de CLS post-chargement que Lighthouse ne détectera pas. Pour en savoir plus, consultez le guide CLS d'Optimize.
Pour connaître la réactivité, examinez les scores FID et INP. Consultez les audits de la fonctionnalité de navigation détaillée dans Lighthouse pour vérifier si de nombreux traitements JavaScript se produisent pendant le chargement initial de la page, ce qui peut avoir une incidence sur l'INP. L'INP peut être une métrique difficile à améliorer. Pour en savoir plus, consultez le guide d'optimisation de l'INP.
Identifier les pages peu performantes dans la Search Console
Bien que l'outil PSI soit utile lorsque vous souhaitez tester une URL spécifique ou le site dans son ensemble, la Search Console peut vous aider à cibler des types de pages spécifiques. Cette fonctionnalité est particulièrement utile si de nombreuses pages partagent des technologies ou des thèmes communs, et que la Search Console parvient à les identifier.
Le rapport Core Web Vitals de la Search Console offre une vue d'ensemble des performances de votre site Web, mais vous pouvez toujours afficher le détail des pages spécifiques qui requièrent votre attention. Avec la Search Console, vous pouvez également:
- Identifiez les groupes de pages individuels qui doivent être améliorés et ceux qui offrent une bonne expérience utilisateur.
- Obtenez des données précises sur les performances par URL, regroupées par état, métrique et groupes de pages Web similaires (par exemple, les pages d'informations détaillées sur les produits d'un site Web d'e-commerce).
- Obtenez des rapports détaillés qui regroupent les URL dans chaque catégorie de qualité de l'expérience utilisateur, aussi bien sur mobile que sur ordinateur.
Une fois que vous avez des pages spécifiques à examiner, vous pouvez utiliser PSI comme expliqué précédemment pour mieux comprendre les problèmes liés à ces pages.
Étape 2: Déboguer et optimiser
À l'étape 1, vous devez avoir identifié les pages dont les performances doivent être améliorées, ainsi que les métriques Core Web Vitals que vous souhaitez améliorer. Vous pouvez utiliser les outils Google pour obtenir davantage d'informations afin de comprendre l'origine du problème et d'identifier le problème.
- Effectuez un audit Lighthouse pour obtenir des conseils au niveau des pages.
- Utilisez l'extension Web Vitals pour analyser les Core Web Vitals en temps réel.
- Utilisez le panneau "Performances" des outils pour les développeurs Chrome pour déboguer les problèmes de performances et tester les modifications du code.
Pour en savoir plus, consultez les guides suivants:
Découvrez des opportunités avec Lighthouse
PageSpeed Insights exécute Lighthouse pour vous, mais pour le développement local, il est également possible d'exécuter Lighthouse à partir des outils pour les développeurs Chrome, ce qui permet de valider les correctifs localement.
Il est essentiel de vérifier que l'audit Lighthouse réplique les problèmes que vous essayez de résoudre (par exemple, les problèmes de LCP lent ou CLS). Prêt à l'emploi, Lighthouse évalue uniquement l'expérience utilisateur pendant le chargement de la page. Étant donné qu'il s'agit d'un outil de laboratoire, il exclut également FID et INP au profit de TTC.
Lorsque les métriques Lighthouse suggèrent un problème semblable à celui que vous essayez de résoudre, la richesse d'informations contenues dans ses audits peut vous aider à identifier les problèmes et à suggérer des solutions.
Vous pouvez filtrer les audits pour n'afficher que les Core Web Vitals qui vous intéressent afin de vous concentrer sur la résolution de problèmes liés à une métrique spécifique:
Pour le FID et l'INP, utilisez les audits de TEC pour identifier les problèmes susceptibles d'affecter ces métriques, mais sachez que sans interactions, le degré de diagnostic de Lighthouse est limité.
Analyser en temps réel avec l'extension Web Vitals
L'extension Chrome Web Vitals affiche les Core Web Vitals en temps réel lors du chargement de la page et pendant la navigation. De ce fait, il peut capturer le FID et l'INP, ainsi que les décalages de mise en page qui se produisent après le chargement. Les options de débogage permettent d'afficher des informations plus détaillées sur chaque métrique:
Il est préférable de considérer l'extension Web Vitals comme un outil de vérification ponctuelle pour détecter les problèmes de performances, et non comme un outil de débogage complet. L'objectif est de remplir le panneau "Performances" des outils pour les développeurs Chrome.
Afficher le détail avec le panneau "Performances"
Le panneau "Performances" des outils pour les développeurs Chrome présente le comportement de toutes les pages sur une période enregistrée.
Les temps clés (comme le LCP, par exemple) sont indiqués dans le suivi des temps. Cliquez dessus pour en savoir plus.
La piste Layout Shifts (Décalages de mise en page) met en surbrillance les décalages de mise en page. Cliquez dessus pour afficher plus de détails sur les éléments décalés pour le débogage du CLS.
Les tâches longues (pouvant entraîner des problèmes FID et INP) sont également mises en évidence par des triangles rouges.
Ces fonctionnalités, ainsi que les informations fournies dans d'autres parties du panneau Performances, peuvent vous aider à déterminer si des correctifs ont un effet sur les Core Web Vitals d'une page.
Déboguer les Core Web Vitals sur le terrain
Les outils des ateliers ne permettent pas toujours d'identifier la cause de tous les problèmes Core Web Vitals qui affectent vos utilisateurs. C'est l'une des raisons pour lesquelles il est si important de collecter vos propres données de terrain, car elles tiennent compte de facteurs que les données de laboratoire ne peuvent pas prendre en compte.
Pour en savoir plus, consultez la section Résoudre les problèmes de performances sur le terrain.
Étape 3 : Surveillez les modifications
Une fois les problèmes corrigés, vous devez vous assurer qu'ils ont l'effet requis et que les nouveaux problèmes n'affectent pas vos Core Web Vitals. Cela nécessite de surveiller les problèmes de performances dans le workflow du développeur afin d'éviter que ces problèmes ne soient publiés en production, et de surveiller régulièrement les données de terrain pour s'assurer que c'est le cas.
Surveillez les demandes d'informations concernant les performances dans les environnements d'intégration continue (CI)
Lighthouse-CI vous permet d'exécuter automatiquement des audits Lighthouse sur les commits de code afin d'empêcher les régressions de performances de saisir du code. Vous pouvez ainsi vérifier les temps de performance (qui souhaitent varier) ou uniquement pour les audits de performances, en tant qu'outil de linting afin d'éviter les mauvaises pratiques dans le code.
Consultez les tendances de santé d'un site Web grâce aux données de terrain
Bien que vous deviez essayer de détecter et de résoudre tous les problèmes de performances avant qu'ils ne passent en production, il est essentiel de surveiller vos données de terrain à l'aide de la métrique RUM pour identifier ceux qui peuvent passer. De nombreux produits RUM commerciaux peuvent vous aider dans cette tâche. La bibliothèque JavaScript web-vitals permet d'automatiser la collecte de données sur le terrain d'un site Web et, si vous le souhaitez, d'utiliser ces données pour alimenter des tableaux de bord et des systèmes d'alerte personnalisés.
Pour les sites sans solution RUM, vous pouvez utiliser le tableau de bord CrUX pour analyser les tendances de base des données de terrain. Il signale les éléments suivants pour les sites en CrUX:
- Vue d'ensemble du site, qui segmente les métriques Core Web Vitals selon les types d'ordinateurs et d'appareils mobiles.
- Historique des tendances par type de métrique : répartition des métriques au fil du temps pour chaque version mensuelle disponible des données de rapport d'expérience utilisateur Chrome.
- Données démographiques sur l'utilisateur : indique la répartition des pages vues sur l'ensemble des utilisateurs de chaque catégorie démographique, y compris les types d'appareil et de connexion effective.
Le tableau de bord CrUX est basé sur l'ensemble de données BigQuery CrUX, mis à jour une fois par mois. Cela peut être un bon rappel pour vérifier régulièrement vos Core Web Vitals.
Conclusion
Garantir une expérience utilisateur rapide et agréable nécessite un état d'esprit axé sur les performances et l'adoption d'un workflow pour assurer la progression. Avec les bons outils et processus pour auditer, déboguer et surveiller, vous pouvez créer des expériences utilisateur de qualité et respecter les seuils définis pour des Core Web Vitals de qualité.