Panneau "Performances" : analysez les performances de votre site Web

Utilisez le panneau Performances pour analyser les performances de votre site Web.

Présentation

Le panneau Performance vous permet d'enregistrer les profils de performances du processeur de vos applications Web. Analysez les profils pour identifier les goulots d'étranglement potentiels et les moyens d'optimiser l'utilisation des ressources.

Utilisez le panneau Performances pour effectuer les opérations suivantes :

• Enregistrez un profil de performances.
• Modifier les paramètres de capture
• Analysez un rapport sur les performances.

Pour obtenir un guide complet sur l'amélioration des performances de votre site Web, consultez Analyser les performances d'exécution.

Ouvrir le panneau "Performances"

Pour ouvrir le panneau Performances, ouvrez DevTools, puis sélectionnez Performances dans l'ensemble d'onglets en haut de l'écran.

Vous pouvez également ouvrir le panneau Performances à l'aide du menu de commandes :

1. Ouvrez les outils de développement.
2. Pour ouvrir le menu Command (Commande), appuyez sur :
3. macOS: Commande+Maj+P
4. Windows, Linux et ChromeOS : Ctrl+Maj+P 
5. Commencez à saisir Performance panel, sélectionnez Afficher le panneau "Performances", puis appuyez sur Entrée.

Observer les Core Web Vitals en direct

Lorsque vous ouvrez le panneau Performances, il capture et affiche immédiatement les métriques locales Largest Contentful Paint (LCP) (Plus grande peinture de contenu) et Cumulative Layout Shift (CLS) (Déplacement cumulé de la mise en page) et indique leur score (bon, à améliorer ou mauvais).

Si vous interagissez avec votre page, le panneau Performances enregistre également votre Interaction to Next Paint (INP) locale et son score, ce qui, en plus du LCP et du CLS, vous offre un aperçu complet des Core Web Vitals de votre page à l'aide de votre connexion réseau et de votre appareil.

Le panneau Performances affiche une liste des interactions capturées sous les trois fiches de métriques. Pour effacer la liste, cliquez sur bloquer Effacer.

Pour obtenir le détail du score d'une métrique, pointez sur sa valeur pour afficher une info-bulle.

Comparez votre expérience à celle de vos utilisateurs

Vous pouvez également extraire des données de champ à partir du rapport UX Chrome et comparer l'expérience des utilisateurs de votre site à vos métriques locales.

Pour ajouter des données de terrain :

1. Dans Performances > Étapes suivantes > Données réelles, cliquez sur Configurer.

   

2. Dans la boîte de dialogue Configurer la récupération des données de champ, notez l'Avis de confidentialité, puis cliquez sur OK.

   Avancé : configurer un mappage entre les environnements de développement et de production

   Si vous le souhaitez, vous pouvez configurer (plusieurs) mappages entre vos origines de développement et de production pour obtenir automatiquement les données de champ les plus pertinentes :

   1. Dans la boîte de dialogue, développez la section Avancé, puis cliquez sur + Nouveau.

   2. Dans le tableau de mappage, saisissez vos URL de développement et de production, puis cliquez sur +.

      

      Par exemple, un mappage de http://localhost:8080 à https://example.com affichera les données de champ pour example.com/page1 lorsque vous accéderez à localhost:8080/page1.

      De plus, si vous ne parvenez pas à obtenir automatiquement les données de champ pour une raison quelconque, vous pouvez activer la case à cocherToujours afficher les données de champ pour l'URL ci-dessous et fournir une URL. Le panneau Performances tente d'abord de récupérer les données de champ pour cette URL, puis les affiche, quelle que soit la page à laquelle vous accédez.

      Pour modifier les paramètres de récupération des données de champ après la configuration, cliquez sur Données de champ > Configurer.

   Une fois la récupération des données de champ configurée, le panneau Performances affiche désormais une comparaison entre les scores des métriques locales et ceux que vos utilisateurs rencontrent. Vous pouvez consulter la période de collecte dans la section Données des champs à droite.

   

   Pour obtenir le détail du score d'une métrique, pointez sur sa valeur pour afficher une info-bulle.

Configurer votre environnement pour mieux correspondre à celui de vos utilisateurs

Une fois la récupération des données de champ configurée comme décrit dans la section précédente, le panneau Performances vous fournit des recommandations sur la façon de configurer votre environnement pour mieux correspondre à l'expérience de vos utilisateurs.

Pour configurer votre environnement:

1. Dans chaque fiche de métrique, développez la section Tenez compte des conditions de test locales, le cas échéant, et lisez les recommandations.

   

   Dans cet exemple, pour mieux correspondre à l'expérience de vos utilisateurs, vous pouvez utiliser une taille d'écran d'ordinateur de bureau standard et limiter le processeur et le réseau.

2. Pour correspondre à la configuration de l'environnement de cet exemple :

   1. Définissez votre fenêtre d'affichage sur l'une des tailles d'écran courantes (par exemple, 720p ou 1080p). Pour émuler des appareils et des tailles d'écran spécifiques, vous pouvez utiliser le mode Appareil dans le panneau Éléments.
   2. Dans cet exemple, 82% des utilisateurs du site Web utilisent un ordinateur pour naviguer sur le Web. Pour vous assurer de comparer les scores de vos métriques locales aux données des champs appropriés, vous pouvez sélectionner Ordinateur dans Données des champs > Appareil dans la liste déroulante.
   3. Dans la section Paramètres de l'environnement, définissez la liste déroulante Réseau sur, par exemple, 4G rapide, et CPU sur, par exemple, ralentissement 20 fois. Dans la même section, veillez également à check_box Désactiver le cache réseau.

3. Une fois votre environnement configuré, actualisez la page, interagissez avec elle pour capturer votre INP local, puis comparez à nouveau les scores de métrique.

   

   Il semble que les scores obtenus aux métriques ressemblent davantage à ceux obtenus par vos utilisateurs. Par conséquent, les sections Tenez compte des conditions de test locales ont disparu des fiches de métriques.

Vous pouvez maintenant commencer à améliorer les Core Web Vitals de votre site Web:

• Optimiser le LCP
• Optimiser l'INP
• Optimiser le CLS

Générer et analyser un rapport sur les performances

Dans les sections suivantes, vous découvrirez comment enregistrer un profil, modifier les paramètres de capture et analyser le rapport.

Enregistrer un profil de performances

Lorsque vous êtes prêt à enregistrer, le panneau Performances vous propose les options suivantes :

• Enregistrer les performances d'exécution
• Performances de chargement des enregistrements
• Effectuer des captures d'écran pendant l'enregistrement
• Forcer la récupération de mémoire pendant l'enregistrement
• Sauvegarder un enregistrement
• Charger un enregistrement
• Effacer un enregistrement

Modifier les paramètres de capture

Les paramètres de capture vous permettent de modifier la façon dont DevTools enregistre les performances et de fournir des informations supplémentaires dans le rapport. Cliquez sur Paramètres de capture Paramètres pour accéder au menu Paramètres de capture.

Sélectionnez les options suivantes dans le menu Paramètres de capture :

• Désactiver les échantillons JavaScript : désactive l'enregistrement des piles d'appels JavaScript affichées dans la piste Principale qui sont appelées pendant l'enregistrement. Cela réduit les coûts liés aux performances.
• Activer une instrumentation de peinture avancée (lent): capture une instrumentation de peinture avancée. Elle entrave considérablement les performances.
• Activer les statistiques du sélecteur CSS (lent): capture les statistiques du sélecteur CSS. Elle entrave fortement les performances.
• Limitation du processeur : permet de simuler des vitesses de processeur plus lentes.
• Limitation de bande passante réseau : permet de simuler un ralentissement du réseau.
• Concurrency matérielle : configurez la valeur indiquée par navigator.hardwareConcurrency.

Analyser un rapport sur les performances

Pour obtenir un guide complet sur l'utilisation du panneau Performances, consultez Analyser un enregistrement des performances.

Vous trouverez ci-dessous une sélection de sujets du guide, ainsi que d'autres documents utiles:

Pour savoir comment parcourir le rapport:

• Parcourir l'enregistrement
• Activités de recherche
• Suivre les auteurs d'événements

Pour savoir comment vous concentrer sur l'essentiel:

• Modifier l'ordre des pistes et les masquer
• Masquer les fonctions et leurs enfants dans le graphique de type "flamme"
• Créer un fil d'Ariane et passer d'un niveau de zoom à un autre

Pour en savoir plus sur les onglets "Ascendant", "Arborescence d'appel" et "Journal des événements" :

• Afficher les activités dans un tableau

Pour savoir comment analyser le rapport:

• Afficher l'activité du thread principal
• Lire le graphique de type "flamme"
• Afficher une capture d'écran
• Afficher les métriques sur la mémoire
• Afficher la durée d'une partie d'un enregistrement
• Analyser les performances du sélecteur CSS lors des événements "Recalculate Style" (Recalculer le style)
• Profiler les performances de Node.js avec le panneau "Performances"
• Analyser le nombre d'images par seconde (FPS)
• Référence d'événement de chronologie

Améliorez les performances grâce à ces panneaux

Découvrez d'autres panneaux qui peuvent vous aider à améliorer les performances de votre site Web :

• Lighthouse: optimiser la vitesse de votre site Web
• Memory: Memory panel Overview (Mémoire : présentation du panneau "Memory")
• Informations sur les performances: obtenez des insights exploitables sur les performances de votre site Web
• Affichage: détecter les problèmes de performances d'affichage
• Problèmes : trouver et résoudre les problèmes
• Performances : afficher les informations sur les calques