Utilisez le moniteur de performances pour obtenir rapidement une idée des performances de chargement et d'exécution de votre site.
Présentation
Le panneau Surveillance des performances affiche une chronologie qui représente les métriques de performances en temps réel. Cliquez sur une métrique pour l'afficher ou la masquer. Observez ensuite comment le graphique change lorsque vous interagissez avec votre application.
Le moniteur de performances suit les métriques suivantes:
- Utilisation du processeur.
- Taille du tas de mémoire JavaScript.
- Nombre total de nœuds DOM, d'écouteurs d'événements JavaScript, de documents et de cadres sur la page.
- Mises en page et recalculs de style par seconde.
Ouvrir le panneau "Performance Monitor" (Surveillance des performances)
Pour ouvrir le panneau Surveillance des performances:
- Accédez aux outils de développement.
- Ouvrez le menu Command (Commande) en appuyant sur :
- macOS: Command+Maj+P
- Windows, Linux et ChromeOS: Ctrl+Maj+P
- Commencez à saisir
Performance monitor, sélectionnez Afficher le contrôleur des performances, puis appuyez sur Entrée. Les outils pour les développeurs affichent le panneau Moniteur des performances en bas de la fenêtre.
Vous pouvez également sélectionner Plus d'options > Plus d'outils > Contrôleur des performances en haut à droite.
Utiliser le panneau "Surveillance des performances"
Le moniteur de performances vous donne une idée générale des performances d'exécution de votre site Web.
Observer comment les valeurs des métriques changent lorsque vous interagissez avec votre site Web peut vous permettre de détecter des possibilités d'amélioration.
Le moniteur de performances est une fonctionnalité utile, car il persiste tout au long de la navigation sur les pages. En tant que développeur front-end, vous pouvez donc éviter les problèmes tels que le dépassement de la mémoire de mise en page en ouvrant le moniteur de performances, en faisant défiler le site Web et en surveillant les métriques Nœuds DOM et Mise en page/s.
Si des utilisateurs signalent des temps de chargement lents sur votre site, le moniteur de performances peut vous aider à identifier les problèmes.
Par exemple, un pic important de l'utilisation du processeur peut indiquer un code inefficace. En règle générale, si une page contient un grand nombre d'écouteurs d'événements JavaScript, il peut être utile de refactoriser votre code et de réduire ce nombre pour libérer de la mémoire.
Si vous débutez dans l'analyse des performances, nous vous recommandons d'utiliser d'abord le panneau Lighthouse, puis d'examiner plus en détail les performances à l'aide du panneau Performances ou du Moniteur de performances.