Utilisez l'outil de contrôle des performances pour vous faire rapidement une idée des performances de chargement et d'exécution de votre site.
Présentation
Le panneau Analyseur 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. Ensuite, observez l'évolution du graphique à mesure que vous interagissez avec votre application.
L'outil de contrôle des 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 "Analyseur de performances"
Pour ouvrir le panneau Analyseur de performances:
- 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 monitor, sélectionnez Afficher l'analyseur de performances, puis appuyez sur Entrée. Les outils de développement affichent le panneau Analyseur de performances au bas de la fenêtre "Outils de développement".
Sinon, en haut à droite, sélectionnez more_vert Plus d'options > Plus d'outils > Analyseur des performances.
Utiliser le panneau "Analyseur de performances"
L'Analyseur de performances 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 identifier des opportunités d'amélioration.
L'outil de contrôle des performances est particulièrement utile lorsqu'il persiste tout au long de la navigation sur les pages. Ainsi, en tant que développeur frontend, vous pouvez éviter des problèmes tels que le thrashing de mise en page en ouvrant l'Analyseur de performances, en parcourant le site Web et en gardant un œil sur les métriques des nœuds DOM et Layout/sec.
Si les utilisateurs signalent des temps de chargement lents sur votre site, l'Analyseur de performances peut vous aider à identifier les problèmes.
Par exemple, un pic important dans l'utilisation du processeur peut indiquer un code inefficace. De manière générale, si une page contient un grand nombre d'écouteurs d'événements JavaScript, il peut être judicieux 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'approfondir votre analyse à l'aide du panneau Performances ou de l'outil de contrôle des performances.