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 Performances vous permet d'enregistrer des 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 :

• Enregistrer un profil de performances
• Modifier les paramètres de capture
• Analyser 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 les outils de développement , puis sélectionnez Performances dans l'ensemble d'onglets en haut.

Vous pouvez également suivre ces étapes pour ouvrir le panneau Performances avec le menu de commandes :

1. Accédez aux outils de développement.
2. Ouvrez le menu de commandes en appuyant sur :
3. macOS: Command+Shift+P
4. Windows, Linux, ChromeOS: Control+Shift+P
5. Commencez à saisir Performance panel, sélectionnez Show Performance panel (Afficher le panneau "Performances"), puis appuyez sur Enter.

Observer les Core Web Vitals en direct

Lorsque vous ouvrez le panneau Performances, il capture et affiche immédiatement vos métriques locales Largest Contentful Paint (LCP) et Cumulative Layout Shift (CLS), et vous indique leur score (bon, doit être amélioré ou mauvais).

Si vous interagissez avec votre page, le panneau Performances capture également votre Interaction to Next Paint (INP) locale et son score. En plus du LCP et du CLS, cela vous donne un aperçu complet des Core Web Vitals de votre page à l'aide de votre connexion réseau et de votre appareil. Il capture et signale également les Core Web Vitals pour les navigations logicielles côté client dans les applications à une seule page.

Sous les trois cartes de métriques des onglets Interactions et Décalages de mise en page , vous trouverez des tableaux contenant des informations sur les interactions et les décalages de mise en page capturés, y compris les éléments, les durées, les phases (pour les interactions) et les scores (pour les décalages de mise en page). Pour effacer les deux listes, cliquez sur le bloc Effacer.

Pour obtenir une répartition du score d'une métrique, pointez sur la valeur de la métrique pour afficher une info-bulle.

Comparer votre expérience à celle de vos utilisateurs

Vous pouvez également récupérer 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 champ :

1. Dans Performances > Étapes suivantes > Données de champ, cliquez sur Configurer.

   

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

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

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

   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 vers https://example.com affichera les données de champ pour example.com/page1 lorsque vous accédez à localhost:8080/page1.

      De plus, si pour une raison quelconque vous ne pouvez pas obtenir les données de champ automatiquement, vous pouvez activer check_boxToujours afficher les données de champ pour l'URL ci-dessous et fournir une URL. Le panneau Performances tentera d'abord de récupérer les données de champ pour cette URL, puis vous les affichera, 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 vous montre une comparaison entre vos scores de métriques locaux et ceux que vos utilisateurs rencontrent. Vous pouvez voir la période de collecte dans la section Données de champ à droite.

   

   Pour obtenir une répartition du score d'une métrique, pointez sur la valeur de la métrique pour afficher une info-bulle.

Configurer votre environnement pour qu'il corresponde mieux à 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 configuration de votre environnement pour qu'il corresponde mieux à l'expérience de vos utilisateurs.

Pour configurer votre environnement :

1. Dans chaque carte de métriques, 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 courante et réduire la bande passante consommée par le processeur et le réseau.

2. Pour faire correspondre la configuration de l'environnement à 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 des ordinateurs pour naviguer. Pour vous assurer que vous comparez vos scores de métriques locaux aux données de champ correctes, vous pouvez sélectionner Ordinateur dans la liste déroulante Données de champ > Appareil.
   3. Dans la section Paramètres d'environnement, définissez la liste déroulante Réseau sur, par exemple, 4G rapide, et Processeur sur, par exemple, Ralentissement 20x. Vous pouvez également cocher check_box Désactiver le cache réseau dans la même section.

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

   

   Les scores de métriques semblent désormais plus similaires à ceux que vos utilisateurs rencontrent. Par conséquent, les sections Tenez compte des conditions de test locales ont disparu des cartes de métriques.

Avec cela, vous pouvez maintenant commencer à améliorer les Core Web Vitals de votre site Web :

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

Capturer et analyser un rapport sur les performances

Dans les sections suivantes, suivez les instructions pour 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
• Enregistrer les performances de chargement
• Capturer 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 les outils de développement capturent les enregistrements de performances et peuvent vous fournir des informations supplémentaires dans le rapport. Cliquez sur les paramètres Paramètres de capture settings pour accéder au menu Paramètres de capture.

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

• Désactiver les exemples JavaScript : désactive l'enregistrement des piles d'appels JavaScript affichées dans la piste Principale qui sont appelées pendant l'enregistrement. Réduit la surcharge des performances.
• Activer l'instrumentation avancée de la peinture (lent) : capture l'instrumentation avancée de la peinture. Entrave considérablement les performances.
• Activer les statistiques du sélecteur CSS (lent) : capture les statistiques du sélecteur CSS. Entrave considérablement les performances.
• Limitation du processeur : simule des vitesses de processeur plus lentes.
• Limitation de bande passante réseau : simule des vitesses de réseau plus lentes.
• Capture d'écran : choisissez une taille de frame de capture d'écran et un préréglage de limite de nombre lorsque l'option Captures d'écran est activée.

Analyser un rapport sur les performances

Consultez Analyser un enregistrement de performances pour obtenir un guide complet sur l'utilisation du panneau Performances.

Vous trouverez ci-dessous un regroupement de sujets du guide, ainsi que d'autres documents utiles :

Pour découvrir comment parcourir le rapport :

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

Utilisez Performance Insights pour obtenir des insights exploitables sur les performances de votre site Web :

• Insights sur les performances

Pour découvrir comment vous concentrer sur ce qui compte pour votre workflow :

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

Pour en savoir plus sur les onglets "Bottom-up", "Arborescence des appels" et "Journal des événements" :

• Afficher les activités dans un tableau

Pour découvrir comment analyser le rapport :

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

Améliorer les performances avec ces panneaux

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

• Lighthouse : optimiser la vitesse du site Web
• Mémoire : présentation du panneau "Mémoire"
• Rendu : découvrir les problèmes liés aux performances de rendu
• Problèmes : trouver et résoudre les problèmes
• Performances : afficher les informations sur les calques

Ressources supplémentaires