Utilisez l'outil de contrôle des performances pour vous faire rapidement une idée des performances de votre site en termes de charge et d'exécution.
Présentation
Le panneau Analyse des performances affiche une chronologie représentant les métriques de performances en temps réel. Cliquez sur une métrique pour l'afficher ou la masquer. Observez ensuite l'évolution du graphique au fur et à mesure que vous interagissez avec votre application.
L'analyseur de performances effectue le suivi des 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 nouveaux calculs de style par seconde.
Ouvrir le panneau "Analyse des performances"
Pour ouvrir le panneau Performance Monitor, procédez comme suit:
- Accédez aux outils de développement.
- Ouvrez le menu Commande en appuyant sur les touches suivantes :
- macOS: Cmd+Maj+P
- Windows, Linux, ChromeOS: Ctrl+Maj+P
- Commencez à saisir
Performance monitor, sélectionnez Afficher l'analyseur de performances, puis appuyez sur Entrée. Le panneau Contrôle des performances s'affiche en bas de la fenêtre "Outils de développement".
Sinon, dans l'angle supérieur droit, sélectionnez more_vert Plus d'options > Plus d'outils > Analyse des performances.
Utiliser le panneau "Analyse des performances"
L'outil de contrôle des 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 révéler des opportunités d'amélioration.
L'analyseur de performances offre une fonctionnalité utile, car il persiste tout au long de la navigation sur les pages. Ainsi, en tant que développeur frontend, vous pouvez éviter les problèmes tels que le thrashing de la mise en page en ouvrant l'outil Performance Monitor, en faisant défiler le site Web et en surveillant les métriques DOM Node (Nœuds DOM) et Layout/s (Mise en page/s).
Si des 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 que du code est 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 ces nombres pour libérer de la mémoire.
Si vous débutez tout juste l'analyse des performances, nous vous recommandons d'utiliser d'abord le panneau Lighthouse, puis d'approfondir l'analyse à l'aide du panneau Performance ou de l'outil Performance Monitor.