Combinez les outils Google pour auditer, améliorer et surveiller efficacement votre site Web.
Publié le 28 mai 2020
Les Core Web Vitals sont un ensemble de métriques qui évaluent l'expérience utilisateur selon des critères tels que les performances de chargement, la réactivité aux saisies utilisateur et la stabilité de la mise en page.
Ce guide vous présentera un workflow pour améliorer les métriques Core Web Vitals de votre site Web. Toutefois, le point de départ de ce workflow dépend de si vous collectez vos propres données de terrain. La fin de ce parcours dépendra des outils Google qui vous seront utiles pour diagnostiquer et résoudre les problèmes d'expérience utilisateur.
Il est préférable de mesurer les métriques Core Web Vitals dans le champ
Les Core Web Vitals sont spécifiquement conçus pour mesurer l'expérience des utilisateurs sur votre site Web. Il s'agit de métriques axées sur les utilisateurs. Les outils basés sur des tests en laboratoire, comme Lighthouse, sont des outils de diagnostic qui mettent en évidence les problèmes de performances potentiels et les bonnes pratiques. Les outils basés sur des tests en laboratoire sont exécutés dans des conditions prédéfinies. Ils ne reflètent pas forcément les mesures réelles des signaux Web essentiels que vos utilisateurs rencontrent.
LesPar exemple, Lighthouse est un outil basé sur un laboratoire qui exécute des tests avec une limitation simulée dans un environnement de bureau ou mobile simulé. Bien que ces simulations de conditions de réseau et d'appareil plus lentes soient utiles pour diagnostiquer les problèmes de performances, elles ne représentent qu'une petite partie de la grande variété de conditions de réseau et de capacités d'appareil. Elles ne reflètent donc pas forcément l'expérience des utilisateurs sur vos sites.
Les outils basés sur des tests en 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 dans la réalité, les visiteurs peuvent avoir certains éléments mis en cache s'ils ont déjà visité le site ou lorsqu'ils le parcourent. Les nouveaux visiteurs et les outils peuvent également avoir une expérience différente du site en raison des bannières de cookies ou d'autres contenus qui leur sont présentés.
En résumé, bien que les outils basés sur des tests en laboratoire puissent donner une indication des problèmes de performances potentiels et vous aider à déboguer et à itérer, ils ne représentent pas nécessairement le nombre de visiteurs qui rencontrent réellement des problèmes sur votre site Web. Utilisez les données de terrain pour mesurer les performances réelles et les outils en laboratoire comme Lighthouse pour diagnostiquer comment les améliorer. Consultez également la section Quand utiliser Lighthouse ?
Google mesure les statistiques Web essentielles à l'aide du rapport d'expérience utilisateur Chrome (CrUX). Il s'agit d'un ensemble de données publiques collectées auprès de vrais utilisateurs de Chrome. Il constitue la base de nombreux outils Google et tiers qui indiquent les métriques Core Web Vitals d'un site.
Toutefois, CrUX présente des limites. Il peut souvent vous indiquer quand un problème survient, mais il ne dispose souvent pas de suffisamment de données pour vous dire pourquoi.
Collecter vos propres données de terrain, si possible
Le meilleur ensemble de données pour améliorer les performances de votre site Web sur le terrain est celui que vous créez. Pour commencer, vous devez collecter des données de champ auprès des visiteurs de votre site Web. La procédure à suivre dépend de la taille de votre organisation et du fait que vous souhaitiez payer pour une solution tierce ou créer la vôtre.
Les solutions payantes mesureront presque certainement les Core Web Vitals (et d'autres métriques de performances) et fourniront généralement divers outils pour analyser les données obtenues. Dans les grandes organisations disposant de ressources importantes, il s'agit peut-être de la méthode à privilégier.
Toutefois, vous n'appartenez peut-être pas à une grande organisation, ni même à une organisation qui a les moyens de s'offrir une solution tierce. Dans ce cas, la bibliothèque web-vitals de Google vous aidera à collecter toutes les données Vitals Web. Toutefois, 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 commencé à collecter vos propres données de champ, vous pouvez utiliser la bibliothèque web-vitals pour envoyer les signaux Web collectés sur le terrain à 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 champ, plusieurs outils Google peuvent vous être utiles pour analyser les Core Web Vitals. Avant d'établir un workflow, un aperçu général de chaque outil peut vous aider à comprendre quels outils peuvent être les plus adaptés à vos besoins.
Rapport sur l'expérience utilisateur Chrome (CrUX)
Comme mentionné précédemment, CrUX est un ensemble de données publiques collectées sur le terrain auprès d'un segment d'utilisateurs Google Chrome réels sur des millions de sites Web. Il inclut les métriques Core Web Vitals et d'autres métriques pour les sites Web dont le trafic est suffisant.
CrUX est disponible sous la forme d'un 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 qu'une URL ou une origine comporte suffisamment d'échantillons dans l'ensemble de données CrUX. Les données CrUX sont disponibles dans différents outils CrUX, à la fois pour l'accès par programme et pour les outils visuels destinés aux utilisateurs.
Quand utiliser CrUX ?
Même si vous collectez vos propres données de terrain, CrUX reste utile. Bien que CrUX représente un sous-ensemble d'utilisateurs Chrome, il est utile de comparer les données réelles de votre site Web pour voir comment elles s'alignent sur ses données CrUX. Chacune 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, CrUX est particulièrement utile pour obtenir une vue d'ensemble, à condition que votre site Web 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, que ce soit avec BigQuery ou l'API, est utile pour exposer des données qui ne sont pas affichées dans d'autres outils. Par exemple, les données au niveau des pays ne sont souvent pas disponibles dans d'autres outils. Elle permet également d'afficher les métriques supplémentaires de CrUX, qui ne sont souvent pas non plus disponibles dans d'autres outils.
Quand ne pas utiliser CrUX
CrUX ne représente que les utilisateurs de Chrome, et même dans ce cas, seule une partie des utilisateurs de Chrome. Une solution RUM complète peut inclure davantage d'expériences dans Chrome et d'autres navigateurs où les métriques Web Vitals sont prises en charge.
Les sites Web qui ne reçoivent pas suffisamment de trafic ne sont pas représentés dans l'ensemble de données CrUX. Si c'est votre cas, vous devrez collecter vos propres données de terrain pour comprendre les performances de votre site Web sur le terrain, car CrUX ne sera pas une option. Sinon, vous devrez vous appuyer sur les données de laboratoire, mais avec les limites qu'elles peuvent ne pas être représentatives, comme décrit précédemment.
Étant donné que les données fournies par CrUX sont une moyenne mobile des 28 derniers jours, cet outil n'est pas idéal pendant le développement, car il faut un certain temps pour que les améliorations se reflètent dans l'ensemble de données CrUX.
Enfin, en tant qu'ensemble de données public, CrUX est limité en termes de volume d'informations qu'il peut mettre à disposition et de la manière dont ces données peuvent être interrogées. En capturant vos propres données RUM, vous pouvez recueillir plus de détails (par exemple, l'élément LCP) et segmenter davantage les données pour identifier les problèmes. Les utilisateurs connectés bénéficient-ils de métriques Core Web Vitals meilleures ou moins bonnes que les utilisateurs déconnectés ? Les utilisateurs dont le temps LCP est lent ont-ils un élément LCP particulier ? Quelles interactions entraînent des valeurs FID et INP élevées ?
PageSpeed Insights (PSI)
PSI est un outil qui fournit des données réelles issues de CrUX et des données de laboratoire issues de Lighthouse pour une page donnée. Pour en savoir plus, consultez ces sections.
Quand utiliser PSI ?
PSI est idéal pour évaluer les performances CrUX au niveau de la page ou de l'origine, pour les utilisateurs mobiles et ceux sur ordinateur. C'est un bon choix pour obtenir un aperçu initial des métriques Core Web Vitals d'une page ou d'un site. Il vous permet également d'afficher les données Core Web Vitals d'autres sites, comme ceux de vos concurrents.
PSI fournit également des données Lighthouse, qui donnent des recommandations utiles pour améliorer vos métriques Core Web Vitals, si elles sont alignées. Si elles ne correspondent pas, les recommandations Lighthouse peuvent être moins pertinentes.
Étant donné que Lighthouse est exécuté à partir du serveur, il peut former une base de référence plus cohérente que l'exécution de Lighthouse à partir des outils de développement.
Quand ne pas utiliser PSI
PSI n'est disponible que pour les URL publiques. Il ne peut pas être utilisé sur des sites en développement qui ne sont pas accessibles au public.
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. 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 de laboratoire Lighthouse dans ces cas.
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 l'utilité de la corrélation des données de champ au niveau de l'origine avec les diagnostics de laboratoire au niveau de la page. Les données au niveau de l'origine restent très utiles pour obtenir un récapitulatif des performances du site. Les audits Lighthouse peuvent également être utiles, mais vous devez faire preuve d'une prudence accrue dans ce cas.
Enfin, lorsque des données au niveau de la page sont disponibles dans CrUX, mais diffèrent de celles du laboratoire Lighthouse, les recommandations de Lighthouse peuvent être de valeur limitée. Cela peut se produire en particulier pour les problèmes de CLS après le chargement et pour les métriques Core Web Vitals d'interactivité (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 Core Web Vitals. Elle n'est disponible que pour les propriétaires de sites qui ont confirmé qu'ils en étaient propriétaires.
La Search Console présente l'avantage de regrouper les pages similaires (par exemple, celles qui utilisent le même modèle) dans une même évaluation de groupe. La Search Console inclut également un rapport Core Web Vitals basé sur les données de terrain de CrUX.
Quand utiliser la Search Console ?
La Search Console est un outil adapté aux développeurs et aux personnes qui n'occupent pas ce type de poste. Elle permet d'évaluer les performances de la recherche et des pages d'une manière que les autres outils Google ne proposent pas. La présentation des données CrUX et le regroupement des pages par similarité offrent de nouveaux insights sur l'impact des améliorations de performances sur des catégories entières de pages.
Cas d'utilisation non valides de la Search Console
La Search Console n'est peut-être pas adaptée aux projets qui utilisent différents outils tiers pour regrouper les pages par similarité, ni si un site Web n'est pas représenté dans l'ensemble de données CrUX.
Le regroupement de pages peut également être quelque peu déroutant lorsque les pages exemples d'un groupe présentent des caractéristiques différentes du reste du groupe. Par exemple, si le groupe ne respecte pas certains critères Core Web Vitals dans l'ensemble, mais que les pages exemples semblent toutes les respecter. Cela peut se produire lorsqu'un groupe contient des pages à longue traîne ou rarement visitées qui peuvent être plus lentes à charger, car elles sont moins susceptibles d'être mises en cache. Lorsque le volume de ces pages est suffisant dans la longue traîne, elles peuvent influencer le taux de réussite global du groupe.
Phare
Lighthouse est un outil de laboratoire qui fournit 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 de flux d'interaction pour tester les performances au-delà du chargement de la page.
Lighthouse-CI est un outil associé qui exécute Lighthouse lors des compilations et des déploiements de projets pour faciliter les tests de régression des performances. Il présente un rapport Lighthouse avec les demandes d'extraction et suit les métriques de performances au fil du temps.
Quand utiliser Lighthouse ?
Lighthouse est un excellent outil pour identifier les opportunités d'amélioration des performances lors du développement, dans les environnements locaux et de préproduction. Lighthouse CI est également utile lors des phases de compilation et de déploiement vers les environnements de préproduction et de production, où des tests de régression des performances sont nécessaires pour préserver une bonne expérience utilisateur.
Quand ne pas utiliser Lighthouse
Lighthouse (ou Lighthouse CI) ne remplace pas les données de terrain. Lighthouse est avant tout un outil de diagnostic qui liste les problèmes potentiels et les bonnes pratiques à partir d'un chargement de page prédéfini. Les recommandations qu'il propose ne correspondent pas toujours aux performances constatées par vos utilisateurs.
Bien que Lighthouse puisse être utilisé pour diagnostiquer les sites de production à l'aide d'outils tels que PageSpeed Insights, il est idéalement utilisé dans les environnements de développement et d'intégration continue pour résoudre les problèmes de performances avant qu'ils n'atteignent la production.
Les audits fournis par Lighthouse sont également disponibles dans la section "Insights" du panneau "Performances" des outils pour les développeurs Chrome. Ils permettent d'analyser plus en détail les performances d'une page.
Panneau "Performances" dans les outils pour les développeurs Chrome
Les Outils pour les développeurs Chrome sont un ensemble d'outils de développement intégrés au navigateur, y compris le panneau "Performances". Le panneau "Performances" est un outil expérimental qui comporte deux "modes" :
Lorsque le panneau "Performances" est ouvert pour la première fois, un écran "Métriques en direct" fournit les métriques Core Web Vitals actuelles, avec la possibilité d'importer des données de terrain à partir de CrUX. Il est utile comme vue "en direct" des performances lorsque vous interagissez avec la page pour tenter de découvrir les problèmes de performances, en particulier les problèmes post-chargement que vous pouvez rencontrer avec les métriques CLS et INP.
Ensuite, le panneau "Performances" permet aux développeurs de capturer un profil (ou une trace) de toute l'activité de la page pendant le chargement de la page ou une période enregistrée. Cette vue offre un aperçu détaillé de tout ce qu'elle observe dans des dimensions telles que l'activité du réseau, du rendu, de la peinture et du script, ainsi que les Core Web Vitals d'une page. Il inclut également des insights, semblables à ceux fournis par Lighthouse.
Quand utiliser le panneau "Performances" ?
Les développeurs doivent utiliser le panneau "Performances" pour obtenir des informations détaillées sur les performances d'une page spécifique.
La vue des métriques en direct permet de comprendre rapidement les caractéristiques de performances actuelles de la page et de repérer les problèmes potentiels lors de l'interaction avec la page.
La vue Trace est particulièrement utile pour déboguer les problèmes de réactivité affectant l'INP. Une fois qu'une interaction à faible temps de réponse est identifiée et reproductible, le panneau "Performances" peut fournir une multitude de données sur ce qui se passe dans le navigateur pour aider à comprendre le problème, qu'il s'agisse du blocage du thread principal, des piles d'appels JavaScript ou du travail de rendu.
Quand ne pas utiliser le panneau "Performances"
Le panneau "Performances" est un outil pour les développeurs qui fournit principalement des données de laboratoire, mais aussi un contexte de terrain issu de CrUX. Il ne remplace pas les données de champ.
La vue Trace contient de nombreuses informations de débogage, mais elle peut être difficile à comprendre pour les développeurs débutants ou ceux qui n'occupent pas de rôle de développeur. Toutefois, la vue des métriques en direct qui s'ouvre avec le panneau répond à ce problème en fournissant une interface plus facile à utiliser pour ceux qui n'ont pas besoin de tous les détails.
Workflow en trois étapes pour s'assurer que les Core Web Vitals de votre site Web restent bons
Lorsque vous cherchez à 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 procéder comme suit :
- Évaluez l'état de santé de votre site Web et identifiez les points de friction.
- Déboguez et optimisez.
- Surveillez les performances avec des outils d'intégration continue pour détecter et éviter les régressions.
Étape 1 : Évaluez l'état de votre site Web et identifiez les points à améliorer
Il est préférable de commencer par les données de champ pour évaluer l'état du site Web.
- Utilisez PageSpeed Insights pour afficher les métriques globales sur l'expérience Core Web Vitals au niveau de l'origine, ainsi que des informations spécifiques sur une URL individuelle.
- La Search Console peut vous aider à identifier les pages à améliorer grâce à sa fonctionnalité de regroupement des pages, qui fonctionne bien pour votre site.
- Si vous disposez de données RUM, il s'agit souvent de la meilleure option pour identifier les pages ou les segments de trafic spécifiques qui posent problème.
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, à condition que votre site Web soit représenté dans l'ensemble de données.
Analyser les performances d'un site avec PageSpeed Insights
PageSpeed Insights affiche les données 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 respectent le seuil défini pour une métrique donnée, l'expérience est considérée comme "bonne".
Si vous souhaitez examiner les performances d'une page spécifique, utilisez-la. Pour obtenir une vue d'ensemble d'un site lorsque vous commencez à l'optimiser, vous pouvez commencer par la page d'accueil, car il s'agit généralement de l'une des pages les plus populaires de nombreux sites.
Commencez par vous concentrer sur la section Découvrez l'expérience de vos utilisateurs de PSI. Vous verrez jusqu'à quatre vues des données : mobile et ordinateur pour l'URL saisie et pour l'ensemble de l'origine. Comparez-les et voyez ce qui les différencie. Les performances sur mobile sont généralement inférieures à celles sur ordinateur, car il s'agit d'un appareil dont les ressources sont plus limitées et qui fonctionne dans des conditions réseau potentiellement moins stables. Si les données d'URL et d'origine sont très différentes, essayez de comprendre pourquoi : les pages d'accueil sont souvent les premières pages visitées (c'est-à-dire des pages de destination). Elles peuvent donc être plus lentes que l'origine, car les utilisateurs subissent de plein fouet un cache de navigateur non amorcé. Les pages suivantes se chargeront probablement plus rapidement, car tous les éléments partagés seront mis en cache, ce qui réduira les données agrégées au niveau de l'origine.
PSI affiche également les trois métriques Core Web Vitals (LCP, CLS et INP), ainsi que les métriques de diagnostic TTFB et FCP. L'une des métriques Core Web Vitals est-elle en échec ? Si oui, dans quelle mesure ? Cela vous indiquera où concentrer vos efforts.
Comprenez les relations entre ces nombres, 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 étapes de cette métrique. Dans cet exemple, le TTFB est de 1,8 seconde, ce qui rendra très difficile d'atteindre le seuil recommandé de 2,5 secondes pour un bon LCP. Cela suggère un backend lent (problèmes de serveur ou absence de CDN), des réseaux plus lents ou des redirections retardant les premiers octets HTML. Pour en savoir plus, consultez le guide sur l'optimisation du TTFB. Le FCP prend une seconde de plus, ce qui peut à nouveau indiquer des réseaux plus lents. Dans cet exemple, le LCP n'est pas long après le FCP, ce qui suggère que la ressource LCP est bien optimisée une fois la page elle-même chargée. CrUX affiche désormais plus d'informations de diagnostic dans les types de ressources et les sous-parties, ce qui vous aide également à diagnostiquer les problèmes de LCP.
Pour le CLS, examinez les scores CLS de CrUX et de Lighthouse afin de déterminer s'il s'agit d'un problème de CLS au chargement (que Lighthouse détectera et pour lequel il vous donnera des conseils) ou d'un problème de CLS après le chargement que Lighthouse ne détectera pas. Pour en savoir plus, consultez le guide sur l'optimisation du CLS.
Pour évaluer la réactivité, examinez les scores INP. Consultez les audits TBT dans Lighthouse pour voir si beaucoup de traitement JavaScript a lieu lors du chargement initial de la page, ce qui est susceptible d'avoir un impact 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
PSI est utile lorsque vous souhaitez tester une URL spécifique ou l'ensemble du site, mais la Search Console peut vous aider à cibler vos efforts sur des types de pages spécifiques. Cela est particulièrement utile si de nombreuses pages partagent des thèmes ou des technologies communs et que la Search Console peut les identifier.
Le rapport Core Web Vitals de la Search Console donne une vue d'ensemble des performances de votre site Web, mais vous pouvez toujours examiner en détail les pages spécifiques qui nécessitent votre attention. La Search Console vous permet é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 pour les mobiles et les ordinateurs.
Une fois que vous avez identifié des pages spécifiques à examiner, vous pouvez utiliser PSI comme expliqué précédemment pour mieux comprendre les problèmes de ces pages.
Étape 2 : Déboguer et optimiser
À l'étape 1, vous devriez avoir identifié les pages qui nécessitent des améliorations en termes de performances, ainsi que les métriques Core Web Vitals que vous souhaitez améliorer. Vous pouvez utiliser les outils Google pour obtenir plus d'informations et comprendre la cause première du problème.
- Consultez les audits Lighthouse pour obtenir des conseils généraux sur la page.
- Utilisez la vue des métriques en direct du panneau "Performances" pour analyser les Core Web Vitals en temps réel.
- Utilisez le traçage du panneau "Performances" pour déboguer les problèmes de performances et tester les modifications de code.
Pour obtenir des conseils plus détaillés, consultez les guides suivants :
Identifier des opportunités avec Lighthouse
PageSpeed Insights exécute Lighthouse pour vous. Il est également possible d'exécuter Lighthouse à partir des outils pour les développeurs Chrome, ce qui est utile pour valider les correctifs en local. Toutefois, le panneau "Performances" (abordé ensuite) est un outil plus complet pour identifier et résoudre les problèmes de performances en local.
Il est essentiel de vérifier que l'audit Lighthouse reproduit les problèmes que vous essayez de résoudre (par exemple, les problèmes de CLS ou de LCP lent). Par défaut, Lighthouse n'évalue l'expérience utilisateur que lors du chargement de la page. Comme il s'agit d'un outil d'atelier, il exclut également l'INP au profit du TBT.
Lorsque les métriques Lighthouse suggèrent un problème similaire à celui que vous essayez de résoudre, la richesse des 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 métriques Core Web Vitals qui vous intéressent. Vous pourrez ainsi vous concentrer sur la résolution des problèmes liés à une métrique spécifique :
Pour l'INP, utilisez les audits TBT pour identifier les problèmes qui peuvent potentiellement affecter ces métriques. Toutefois, sachez que sans interactions, Lighthouse est limité dans sa capacité de diagnostic.
Analyser en temps réel avec l'écran des métriques en direct des outils pour les développeurs Chrome
L'écran des métriques en direct des outils pour les développeurs Chrome, dans le panneau "Performances", affiche les Core Web Vitals en temps réel pendant le chargement d'une page et lors de la navigation sur une page. De ce fait, il peut capturer l'INP ainsi que les changements de mise en page qui se produisent après le chargement. Vous pouvez également afficher des informations plus détaillées sur chaque métrique :
Cette vue fournit de nombreuses informations utiles pour identifier les problèmes de performances et peut même extraire des informations sur les champs à partir de CrUX. Pour obtenir encore plus d'informations, vous pouvez examiner les détails avec une trace.
Afficher des informations détaillées avec le panneau "Performances"
Le panneau "Performances" des outils pour les développeurs Chrome vous permet d'enregistrer un profil (ou une trace) de tout le comportement de la page pendant une période donnée.
Les insights sur les performances sont disponibles dans le panneau latéral Insights. Les métriques Core Web Vitals sont également affichées, ainsi que les valeurs de champ correspondantes, le cas échéant.
La piste Décalages de mise en page met en évidence les décalages de mise en page. En cliquant dessus, vous obtenez plus d'informations sur les éléments qui ont été décalés pour déboguer le CLS.
Les principaux timings, tels que le LCP, sont indiqués dans la section Timings en bas de la trace. Cliquez sur ces liens pour en savoir plus.
Les tâches longues (qui peuvent entraîner des problèmes d'INP) sont également mises en évidence par des triangles rouges dans le graphique en flammes.
Ces fonctionnalités, ainsi que les informations figurant dans d'autres sections du panneau "Performances", peuvent vous aider à déterminer si les corrections ont un impact sur les Core Web Vitals d'une page.
Déboguer les métriques Core Web Vitals dans le champ
Les outils de laboratoire ne peuvent pas toujours identifier la cause de tous les problèmes liés aux 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 sur le terrain, car elles tiennent compte de facteurs que les données de laboratoire ne peuvent pas prendre en compte.
Pour en savoir plus, consultez Déboguer les performances sur le terrain.
Étape 3 : Surveillez les modifications
Une fois que vous avez résolu les problèmes, vous devez vous assurer qu'ils ont l'effet escompté et que de nouveaux problèmes ne perturbent pas vos Core Web Vitals. Cela nécessite de surveiller les problèmes de performances dans le workflow du développeur pour éviter qu'ils ne soient mis en production, et de surveiller régulièrement les données de champ pour s'en assurer.
Surveiller les exigences de 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 pour éviter que des régressions de performances ne s'y introduisent. Il peut vérifier les délais d'exécution (qui sont sujets à variabilité) ou uniquement les audits de performances, comme outil de linting pour éviter les mauvaises pratiques dans le code.
Afficher les tendances de l'état du site Web avec les données de champ
Bien que vous deviez vous efforcer de détecter et de corriger tous les problèmes de performances avant qu'ils n'atteignent la production, il est essentiel de surveiller vos données de terrain à l'aide de RUM pour trouver ceux qui passent à travers les mailles du filet. De nombreux produits RUM commerciaux sont disponibles pour vous aider. La bibliothèque JavaScript web-vitals peut automatiser la collecte des données de champ d'un site Web et, si vous le souhaitez, 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 les différents outils CrUX pour effectuer une analyse de base des tendances des données de terrain.
Conclusion
Pour offrir aux utilisateurs une expérience rapide et agréable, vous devez adopter un état d'esprit axé sur les performances et un workflow pour assurer la progression. Avec les outils et les processus appropriés pour auditer, déboguer et surveiller, vous pouvez créer des expériences utilisateur exceptionnelles et respecter les seuils définis pour les bons Core Web Vitals.