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
- Analyser un rapport sur les performances
Pour obtenir un guide complet sur l'amélioration des performances de votre site Web, consultez la page 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 un ensemble d'onglets en haut de l'écran.
Vous pouvez également ouvrir le panneau Performances avec le menu de commandes comme suit:
- Ouvrez les outils de développement.
- Ouvrez le menu Commande en appuyant sur:
- macOS: Commande+Maj+P
- Windows, Linux, ChromeOS: Ctrl+Maj+P
- Commencez à saisir
Performance panel, sélectionnez Show Performance panel (Afficher le panneau Performance), puis appuyez sur Entrée.
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 les outils de développement enregistrent les performances et peuvent vous 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:
- Disable JavaScript samples (Désactiver les exemples JavaScript) : désactive l'enregistrement des piles d'appels JavaScript affichées dans la piste Main qui sont appelées pendant l'enregistrement. Réduit l'impact sur les performances.
- Activer une instrumentation de peinture avancée (lent): capture une instrumentation de peinture avancée. Elle entrave fortement 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: simulez des processeurs plus lents.
- Limitation de la bande passante: simulez un débit réseau plus lent.
- Simultanéité matérielle: configurez la valeur signalée par le
navigator.hardwareConcurrency.
Analyser un rapport sur les performances
Consultez la page Analyser un enregistrement de performances pour un guide complet sur l'utilisation du panneau Performances.
Vous trouverez ci-dessous une sélection de sujets du guide, ainsi que d'autres documents utiles:
Pour savoir comment parcourir le rapport:
Pour savoir comment vous concentrer sur l'essentiel:
- Changer l'ordre des titres 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" :
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
- Voir la durée d'une partie d'un enregistrement
- Analyser les performances du sélecteur CSS lors de la modification des événements de style
- Profiler les performances de Node.js avec le panneau "Performance"
- 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: identifier et résoudre les problèmes
- Performances: affichez les informations sur les calques