Remarque
L’accès à cette page nécessite une autorisation. Vous pouvez essayer de vous connecter ou de modifier des répertoires.
L’accès à cette page nécessite une autorisation. Vous pouvez essayer de modifier des répertoires.
Utilisez l’outil Performance pour analyser les performances de votre site web. Il existe deux vues principales :
- La page d’accueil affiche les métriques locales lorsque vous interagissez avec la page web actuelle.
- Enregistrez un profil et affichez un chronologie de performances.
Contenu détaillé :
- Vue d’ensemble
- Surveiller les métriques principales de Web Vitals
- Capturer et analyser un rapport de performances
- Améliorer les performances avec ces outils
Pour obtenir une procédure pas à pas sur l’utilisation de l’outil Performance afin d’améliorer les performances de votre site web, consultez Analyser les performances de l’exécution (tutoriel) .
Vue d’ensemble
L’outil Performances affiche des métriques locales pour les interactions de page et vous permet d’enregistrer les profils de performances du processeur de vos applications web. Analysez les profils pour trouver les goulots d’étranglement potentiels des performances et les moyens d’optimiser l’utilisation des ressources.
Ouvrir l’outil Performance
Pour ouvrir l’outil Performance :
Accédez à une page web, telle que la démonstration Exploration de l’univers , dans une nouvelle fenêtre ou un nouvel onglet.
Cliquez avec le bouton droit sur la page web, puis sélectionnez Inspecter.
DevTools s’ouvre.
Dans la barre d’activité en haut, cliquez sur
.Si
de l’outil Performance n’apparaît pas dans la barre d’activité, cliquez sur le bouton Plus d’outils (
), puis sélectionnez l’outil Performances.
Utilisation du menu de commandes
Pour ouvrir l’outil Performance à l’aide du menu Commandes :
Accédez à une page web, telle que la démonstration Exploration de l’univers , dans une nouvelle fenêtre ou un nouvel onglet.
Cliquez avec le bouton droit sur la page web, puis sélectionnez Inspecter.
DevTools s’ouvre.
Dans le coin supérieur droit de DevTools, cliquez sur Personnaliser et contrôler DevTools, puis cliquez sur Exécuter la commande.
Vous pouvez également appuyer sur :
- macOS : Cmd+Maj+P
- Windows, Linux, ChromeOS : Ctrl+Maj+P
Le menu Commande s’ouvre et indique Exécuter >la commande.
Commencez à taper les performances, sélectionnez Afficher les performances [panneau], puis appuyez sur Entrée.
Métriques locales pour les interactions de page
Utilisez l’outil Performances pour afficher les métriques Principales vitals web dans la vue initiale des métriques locales . La page d’accueil de l’outil Performances affiche les métriques locales, à savoir les métriques de performances relatives à la page web rendue :
- La plus grande peinture contentful (LCP) : vitesse à laquelle le contenu principal de la page a été chargé.
- Cumulative Layout Shift (CLS) : mesure du changement de mise en page inattendu le plus récent.
- Interaction avec next paint (INP) : réactivité de l’interaction utilisateur la plus récente sur la page.
Lorsque vous ouvrez initialement l’outil Performances , les métriques Core Web Vitals sont affichées dans trois cartes dans une section Métriques locales :
Chronologie de profil enregistré
Utilisez également l’outil Performance pour afficher une trace des performances enregistrée, notamment :
- Enregistrez un profil de performances.
- Modifier les paramètres de capture.
- Analysez un rapport de performances. Affiche des informations sur les performances de la page sur la période pendant laquelle l’enregistrement s’est produit, par exemple :
- Interactions utilisateur qui se sont produites pendant l’enregistrement.
- Code JavaScript exécuté.
- Opérations de mise en page et de style qui se sont produites.
- D’autres métriques de performances au fil du temps, telles que les demandes réseau et les changements de disposition.
Une fois que vous avez enregistré une trace de performances, la trace de performances s’affiche à la place des métriques locales.
Passer à l’affichage des métriques locales ou à un autre profil
Pour passer à l’affichage initial des métriques locales, cliquez sur le Retour à la page de métriques en direct (
).
Pour passer à l’affichage d’un autre profil enregistré ouvert chronologie, cliquez sur la liste déroulante Afficher les sessions de chronologie récentes, à droite de la Retour à la page de métriques en direct ( ).
Surveiller les métriques principales de Web Vitals
Utilisez l’outil Performances pour afficher les métriques Principales vitals web dans la vue initiale des métriques locales . La page d’accueil de l’outil Performances affiche les métriques locales, qui sont des métriques de performances relatives à la page web rendue :
- La plus grande peinture contentful (LCP) : vitesse à laquelle le contenu principal de la page a été chargé.
- Cumulative Layout Shift (CLS) : mesure du changement de mise en page inattendu le plus récent.
- Interaction avec next paint (INP) : réactivité de l’interaction utilisateur la plus récente sur la page.
Terminologie
| Term | Description | Docs |
|---|---|---|
| Web Vitals | Un grand ensemble de métriques fournissant des conseils unifiés pour fournir une expérience utilisateur exceptionnelle sur le web. | Web Vitals web.dev. |
| Principaux éléments vitaux web | Sous-ensemble de Web Vitals qui s’appliquent à toutes les pages web et qui doivent être mesurés par tous les propriétaires de site. Chacun des principaux éléments vitaux web représente une facette distincte de l’expérience utilisateur, est mesurable sur le terrain et reflète l’expérience réelle d’un résultat critique centré sur l’utilisateur. | Principaux éléments vitaux web dans Web Vitals à web.dev. |
| La plus grande peinture contentfulante (LCP) | Mesure les performances du chargement . Pour offrir une bonne expérience utilisateur, LCP doit se produire dans les 2,5 secondes suivant le premier chargement de la page. Durée de rendu de la plus grande image, bloc de texte ou vidéo visible dans la fenêtre d’affichage, par rapport au moment où l’utilisateur a accédé à la page pour la première fois. | La plus grande peinture contentful (LCP) dans le glossaire chez MDN. LargestContentfulPaint chez MDN. |
| Décalage de disposition cumulé (CLS) | Mesure la stabilité visuelle. Pour offrir une bonne expérience utilisateur, les pages doivent conserver un CLS de 0,1. ou moins. La plus grande rafale de scores de décalage de disposition pour chaque changement de disposition inattendu qui se produit pendant tout le cycle de vie d’une page. | Cumulative Layout Shift (CLS) dans le glossaire sur MDN. LayoutShift sur MDN. |
| Interaction avec la peinture suivante (INP) | Mesure l’interactivité. Pour fournir une bonne expérience utilisateur, les pages doivent avoir un INP de 200 millisecondes ou moins. La réactivité globale de la page aux interactions utilisateur, en fonction de la latence de toutes les interactions de clic, d’appui et de clavier qui se produisent tout au long de la durée de vie de la visite d’un utilisateur sur une page. | Interaction avec la peinture suivante (INP) dans le glossaire de MDN. PerformanceEventTiming sur MDN. |
| Métriques locales, données locales | Les métriques LCP, CLS et INP. Ils sont capturés localement sur la page web inspectée et sont mis à jour à mesure que vous interagissez avec la page. |
Utiliser la page de démonstration
Pour produire une métrique d’amélioration médiocre ou nécessaire sur les cartes LCP, CLS et INP dans l’outil Performance :
Ouvrez une page web, telle que la démonstration Exploration de l’univers , dans une nouvelle fenêtre ou un nouvel onglet.
La page de démonstration « Exploration de l’univers » est conçue pour charger et gérer les interactions lentement, afin d’illustrer comment les métriques LCP, CLS et INP peuvent être utilisées dans l’outil Performance pour identifier et résoudre les problèmes de performances.
Cliquez avec le bouton droit sur la page web, puis sélectionnez Inspecter.
DevTools s’ouvre.
Dans la barre d’activité en haut, sélectionnez
.Si
de l’outil Performance n’apparaît pas dans la barre d’activité, cliquez sur le bouton Plus d’outils (), puis sélectionnez l’outil Performances.Agrandissez la fenêtre et élargissez le volet de la page de démonstration, par exemple 60 % de la largeur de la fenêtre.
Si le volet de la page de démonstration est trop étroit, certaines cartes peuvent continuer à s’afficher avec une valeur verte, ce qui n’est pas le résultat prévu.
Sélectionnez Le volet >Étapes suivantesParamètres d’environnement carte > liste déroulante >de limitation du processeur sélectionnez Ralentissement 4x - recommandé.
Vous pouvez également sélectionner Paramètres de capture (
) > liste déroulante > de limitation du processeur4x ralentissement ( recommandé).Sélectionnez Volet Étapes suivantes>Paramètres d’environnement carte > liste déroulante >Limitation du réseau, sélectionnez 4G lente.
Sélectionnez Le volet >Étapes suivantesParamètres d’environnement carte >cochez la case Désactiver le cache réseau.
Cliquez avec le bouton droit (ou cliquez longuement) sur le bouton Actualiser à gauche de la barre d’adresses, puis sélectionnez Vider le cache et actualiser en dur.
Cela garantit que l’image est à nouveau chargée à partir du serveur, plutôt qu’à partir du cache local.
Les cartes LCP et CLS affichent une valeur orange et doivent être améliorées, ou une valeur rouge et médiocre, au lieu d’une valeur verte et bonne.
Si le carte LCP ou CLS reste vert et indique que le rendu de l’image de la galaxie est terminé, agrandissez la fenêtre et élargissez le volet de la page de démonstration.
L’carte LCP montre que l’image de la galaxie a pris beaucoup de temps à se charger. Le carte indique une valeur orange et doit être amélioré, ou une valeur rouge et médiocre, au lieu d’une valeur verte et bonne. Le moteur identifie cette image comme étant le plus grand élément à afficher.
Dans le carte LCP, pointez sur la valeur de la métrique pour afficher les informations d’une info-bulle.
Le carte CLS illustre que des sauts soudains et inattendus dans la disposition peuvent avoir un impact négatif sur les utilisateurs. Cela est également dû au fait que le chargement de l’image prend un certain temps. Par conception, la page web de démonstration néglige de spécifier une hauteur pour l’image, de sorte que la page se charge initialement sans réserver beaucoup d’espace pour l’image. Lorsque l’image commence à apparaître, le contenu en dessous de celle-ci saute soudainement vers le bas.
Dans la carte CLS, pointez sur la valeur de la métrique pour afficher des informations dans une info-bulle.
Une fois le rendu de l’image de galaxie terminé, dans la page de démonstration rendue, cliquez sur l’un des titres dans la colonne Découvertes de droite, comme Heliocentric Theory (1543) .
Le carte INP passe de l’affichage d’une valeur non affichée à une valeur orange et nécessite une amélioration, ou une valeur rouge et médiocre. Une valeur INP s’affiche.
Dans la carte INP, pointez sur la valeur de la métrique pour afficher les informations d’une info-bulle.
Dans le carte INP, cliquez sur la valeur INP.
Dans la page de démonstration, les cartes Découvertes sont conçues pour se développer et réexécurer lentement, de sorte qu’il faut beaucoup de temps entre le clic sur le titre et le rendu du contenu carte développé. Le délai est une valeur aléatoire comprise entre 100 ms et 1 000 ms, ce qui entraîne une valeur INP élevée.
Sous les cartes Métriques locales , les onglets Interactions et Décalages de disposition sont renseignés.
Onglet Interactions
L’onglet Interactions affiche des informations sur vos interactions avec la page web :
L’onglet Interactions inclut :
- Phases.
- Éléments.
- Horaires.
Pour effacer l’onglet Interactions , cliquez sur le bouton Effacer le journal actuel (
) à droite de l’onglet Interactions .
Onglet Shifts de disposition
L’onglet Décalages de disposition affiche des informations sur les décalages de disposition :
L’onglet Décalages de la disposition comprend les éléments suivants :
- Scores.
- Éléments.
Capturer et analyser un rapport de performances
Dans les sections suivantes, suivez les instructions sur l’enregistrement d’un profil, la modification des paramètres de capture et l’analyse du rapport.
Enregistrer un profil de performances
Lorsque vous êtes prêt à enregistrer, l’outil Performance vous offre les options suivantes :
- Enregistrer les performances du runtime dans référence des fonctionnalités de performances.
- Enregistrer les performances de chargement dans la référence des fonctionnalités de performances.
- Capturez des captures d’écran lors de l’enregistrement dans référence des fonctionnalités de performances.
- Forcer le garbage collection lors de l’enregistrement dans référence des fonctionnalités de performances.
- Enregistrez et partagez un enregistrement dans Référence des fonctionnalités de performances.
- Chargez un enregistrement dans la référence des fonctionnalités de performances.
- Effacez l’enregistrement précédent dans Informations de référence sur les fonctionnalités de performances.
Modifier les paramètres de capture
Les paramètres de capture vous permettent de modifier la façon dont DevTools capture les enregistrements de performances et peuvent vous fournir des informations supplémentaires dans le rapport. Cliquez sur le bouton Paramètres de capture (
) pour accéder au menu Paramètres de capture .
Sélectionnez les options suivantes dans le menu Paramètres de capture :
Cochez la case Désactiver les exemples JavaScript : désactive l’enregistrement des piles d’appels JavaScript affichées dans la piste principale appelées pendant l’enregistrement. Réduit la surcharge de performances. Consultez Désactiver les exemples JavaScript dans Informations de référence sur les fonctionnalités de performances.
Cochez la case Activer l’instrumentation de rendu avancée (lente) : Capture l’instrumentation de peinture avancée. Entrave considérablement les performances. Consultez Activer l’instrumentation de peinture avancée dans référence des fonctionnalités de performances.
Cochez la case Activer les statistiques du sélecteur CSS (lentes) : Capture les statistiques du sélecteur CSS. Entrave considérablement les performances. Consultez Afficher les coûts du sélecteur CSS dans la barre latérale de l’outil Performances dans Nouveautés de DevTools (Microsoft Edge 131).
Limitation du processeur : simulez des vitesses de processeur plus lentes. Consultez Limiter le processeur lors de l’enregistrement dans Informations de référence sur les fonctionnalités de performances.
Limitation du réseau : simulez des vitesses réseau plus lentes. Consultez Limiter le réseau lors de l’enregistrement dans Informations de référence sur les fonctionnalités de performances.
Analyser un rapport de performances
Pour obtenir un guide complet sur l’utilisation de l’outil Performance , consultez Analyser un enregistrement des performances dans La référence des fonctionnalités de performance.
Pour naviguer dans un rapport de performances :
Consultez Parcourir l’enregistrement dans Informations de référence sur les fonctionnalités de performances.
Consultez Activités de recherche dans informations de référence sur les fonctionnalités de performances.
Consultez Suivre les initiateurs d’événements dans Informations de référence sur les fonctionnalités de performances.
Pour vous concentrer sur ce qui compte pour votre workflow :
Masquer les fonctions et leurs enfants dans le graphique de flammes
Effectuez un zoom sur des parties d’un enregistrement et basculez entre les niveaux de zoom dans La référence des fonctionnalités de performances.
Pour en savoir plus sur les onglets Bas en haut, Arborescence des appels et Journal des événements :
- Afficher les activités d’une table dans Référence des fonctionnalités de performances.
Pour analyser un rapport de performances :
- Affichez l’activité principale du thread dans Informations de référence sur les fonctionnalités de performances.
- Lisez le graphique à flammes dans Informations de référence sur les fonctionnalités de performances.
- Affichez une capture d’écran dans informations de référence sur les fonctionnalités de performances.
- Affichez les métriques de mémoire dans Informations de référence sur les fonctionnalités de performances.
- Affichez la durée d’une partie d’un enregistrement dans Informations de référence sur les fonctionnalités de performances.
- Analysez les performances du sélecteur CSS pendant les événements recalculer le style.
- Analyser les images par seconde (FPS) dans informations de référence sur les fonctionnalités de performances.
- Informations de référence sur les événements d’enregistrement des performances
Améliorer les performances avec ces outils
Découvrez d’autres outils qui peuvent vous aider à améliorer les performances de votre site web :
| Outil | Article |
|---|---|
| Outil Lighthouse | Optimiser la vitesse du site web à l’aide de Lighthouse |
| Outil mémoire | Résoudre les problèmes de mémoire |
| Onglet Insights de l’outil >de performances | Obtenez des insights actionnables dans informations de référence sur les fonctionnalités de performances. |
| Outil de rendu | Outil de rendu, pour voir à quoi ressemble une page web avec différentes options d’affichage ou déficiences visuelles |
| Outil Problèmes | Rechercher et résoudre les problèmes à l’aide de l’outil Problèmes |
| Outil de performances | Afficher les informations sur les couches dans Informations de référence sur les fonctionnalités de performances |
Voir aussi
Remarque
Les parties de cette page sont des modifications basées sur le travail créé et partagé par Google et utilisées conformément aux termes décrits dans la licence internationale Creative Commons Attribution 4.0. La page originale est trouvée ici et est créée par Dale St. Marthe et Sofia Emelianova.
Cette œuvre est concédée sous licence creative commons attribution 4.0 international.