Outil de performance : analysez les performances de votre site web

Utilisez l’outil Performance pour analyser les performances de votre site web. Il existe deux points de vue principaux :

  • La page d’accueil affiche les métriques locales lorsque vous interagissez avec la page web actuelle.
  • Enregistrer un profil et afficher la chronologie des performances.

Contenu détaillé :

Pour une présentation pas à pas de l’utilisation de l’outil Performances pour améliorer les performances de votre site Web, consultez Analyser les performances d’exécution (didacticiel).

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 détecter les goulots d’étranglement potentiels des performances et trouver des moyens d’optimiser l’utilisation des ressources.

Ouvrir l’outil Performances

Pour ouvrir l’outil Performances :

  1. Accédez à une page web, telle que la démo Exploring the universe , dans une nouvelle fenêtre ou un nouvel onglet.

  2. Cliquez avec le bouton droit sur la page web, puis sélectionnez Inspecter.

    DevTools s’ouvre.

  3. Dans la barre d’activité du haut, cliquez sur l’icône Performance Outil Performance.

    Si l’icône Performances de l’outil Performances n’est pas affiché dans la barre d’activité, cliquez sur le bouton Plus d’outils (icône Plus d’outils), puis sélectionnez l’outil Performances.

Utilisation du menu de commande

Pour ouvrir l’outil Performances à l’aide du menu de commande :

  1. Accédez à une page web, telle que la démo Exploring the universe , dans une nouvelle fenêtre ou un nouvel onglet.

  2. Cliquez avec le bouton droit sur la page web, puis sélectionnez Inspecter.

    DevTools s’ouvre.

  3. Dans le coin supérieur droit de DevTools, cliquez sur Personnaliser et contrôler DevTools, puis cliquez sur la commande Exécuter.

    Ou appuyez sur :

    • macOS : Cmd+Maj+P
    • Windows, Linux, ChromeOS : Ctrl+Maj+P

    Le menu Commande s’ouvre et lit Exécuter >la commande.

  4. Commencez à taper performances, sélectionnez Afficher les performances [panneau], puis appuyez sur Entrée.

    Menu de commande avec « performance » entré

Métriques locales pour les interactions de page

Utilisez l’outil Performances pour afficher les métriques Core Web Vitals dans la vue initiale des métriques locales . La page d’accueil de l’outil Performances affiche les métriques locales, c’est-à-dire les métriques de performances sur la page web rendue :

  • Largest Contentful Paint (LCP) : vitesse de chargement du contenu principal de la page.
  • Changement de mise en page cumulatif (CLS) : mesure du changement de mise en page inattendu le plus récent.
  • Interaction to Next Paint (INP) : réactivité de l’interaction utilisateur la plus récente sur la page.

Lorsque vous ouvrez l’outil Performance pour la première fois, les métriques Core Web Vitals sont affichées, dans trois cartes dans une section Métriques locales :

Page d’accueil de l’outil Performances présentant les métriques locales

Chronologie du profil enregistré

Utilisez également l’outil Performances pour afficher un suivi des performances enregistrées, notamment :

  • Enregistrez un profil de performances.
  • Modifiez les paramètres de capture.
  • Analyser un rapport de performances. Affiche des informations sur les performances de la page sur la période au cours de laquelle l’enregistrement s’est produit, telles que :
    • Interactions utilisateur survenues durant l’enregistrement.
    • Code JavaScript qui s’exécutait.
    • Opérations de style et de mise en page qui ont eu lieu.
    • Autres métriques de performances au fil du temps, telles que les demandes de réseau et les changements de disposition.

Une fois que vous avez enregistré un suivi des performances, ce suivi s’affiche à la place des mesures locales.

Passage à l’affichage des métriques locales ou à un autre profil

Pour passer à l’affichage de la vue initiale des mesures locales, cliquez sur le bouton Retour à la page des mesures en direct (icône « Retour à la page des mesures en direct » (maison)).

Pour passer à l’affichage d’une autre chronologie de profils enregistrés ouverts, cliquez sur la liste déroulante Afficher les sessions de la chronologie récentes, à droite du bouton Retour à la page des métriques en direct (icône « Retour à la page des métriques en temps réel » (maison)).

Outil Performances affichant un profil enregistré

Surveiller les métriques Core Web Vitals

Utilisez l’outil Performances pour afficher les métriques Core Web Vitals 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 sur la page web rendue :

  • Largest Contentful Paint (LCP) : vitesse de chargement du contenu principal de la page.
  • Changement de mise en page cumulatif (CLS) : mesure du changement de mise en page inattendu le plus récent.
  • Interaction to 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 offrir une expérience utilisateur optimale sur le web. Web Vitals au web.dev.
Core Web Vitals Sous-ensemble de Web Vitals qui s’appliquent à toutes les pages web et doivent être mesurés par tous les propriétaires de sites. Chacun des Core Web Vitals 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. Core Web Vitals dans Web Vitals at web.dev.
Largest Contentful Paint (LCP) Mesure les performances de chargement . Pour offrir une bonne expérience utilisateur, le LCP doit se produire dans les 2,5 secondes suivant le début du chargement de la page. Temps de rendu de la plus grande image, du bloc de texte ou de la 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 de contenu (LCP) dans le glossaire de MDN. LargestContentfulPaint sur MDN.
Changement de disposition cumulatif (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 changement de disposition marque pour chaque changement de disposition inattendu qui se produit pendant tout le cycle de vie d’une page. Cumulative Layout Shift (CLS) dans Glossary at MDN. LayoutShift sur MDN.
Interaction avec Next Paint (INP) Mesure l’interactivité. Pour offrir une bonne expérience utilisateur, les pages doivent avoir un INP de 200 millisecondes ou moins. Réactivité globale de la page aux interactions de l’utilisateur, basée sur la latence de toutes les interactions avec le clic, le toucher et le clavier qui se produisent tout au long de la durée de vie de la visite d’un utilisateur sur une page. Interaction avec Next Paint (INP) dans le glossaire de MDN. PerformanceEventTiming sur MDN.
Métriques locales, données locales Les métriques LCP, CLS et INP. Elles sont capturées localement sur la page Web inspectée et sont mises à jour lorsque vous interagissez avec la page.

Utiliser la page de démonstration

Pour produire une métrique médiocre ou nécessitant une amélioration sur les cartes LCP, CLS et INP dans l’outil Performance :

  1. Ouvrez une page web, telle que la démo Exploring the universe , dans une nouvelle fenêtre ou un nouvel onglet.

    La page de démonstration « Exploring the universe » est conçue pour charger et gérer les interactions lentement volontairement, 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.

  2. Cliquez avec le bouton droit sur la page web, puis sélectionnez Inspecter.

    DevTools s’ouvre.

  3. Dans la barre d’activité en haut, sélectionnez l’icône Performanceoutil Performance .

    Si l’icône Performances de l’outil Performances n’est pas affiché dans la barre d’activité, cliquez sur le bouton Plus d’outils (icône Plus d’outils), puis sélectionnez l’outil Performances.

  4. 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 bien, avec une valeur verte, ce qui n’est pas le résultat attendu.

  5. Sélectionnez le volet >Étapes suivantes Paramètres d’environnement Liste déroulante de la limitation de l’UC> par la carte >Sélectionnez Ralentissement 4x - recommandé.

    Vous pouvez également sélectionner Paramètres de capture (icône Paramètres de capture avec un point bleu) > Liste déroulante >de limitation du processeurRalentissement 4x - recommandé.

  6. Sélectionnez le volet >Étapes suivantes : Paramètres d’environnement, carte de carte>, limitation du réseau, > sélectionnez 4G lente.

  7. Sélectionnez le volet >Étapes suivantesParamètres d’environnement carte > cochez la case Désactiver le cache réseau.

    Résultats des mesures locales : médiocres ; a besoin d’amélioration ; et pauvre

  8. Cliquez avec le bouton droit (ou cliquez longuement) sur le bouton Actualiser situé à gauche de la barre d’adresses, puis sélectionnez Vider le cache et actualiser matériellement.

    Cela garantit que l’image est chargée à nouveau à 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.

  9. Si la carte LCP ou CLS reste verte et indique « bon » à la fin du rendu de l’image de la galaxie, agrandissez la fenêtre et élargissez le volet de la page de démonstration.

    La carte LCP montre que l’image de la galaxie a mis beaucoup de temps à se charger. La carte affiche une valeur orange et doit être améliorée, 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.

  10. Dans la carte LCP, pointez sur la valeur de métrique pour afficher les informations dans une info-bulle.

    La 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. De par sa 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 à l’image. Lorsque l’image commence à apparaître, le contenu en dessous saute soudainement vers le bas.

  11. Dans la carte CLS, placez le curseur sur la valeur de métrique pour afficher les informations dans une info-bulle.

  12. Une fois le rendu de l’image de la galaxie terminé, dans la page de démonstration rendue, cliquez sur l’un des titres dans la colonne Découvertes de droite, tel que Théorie héliocentrique (1543).

    La carte INP passe d’une valeur non affichée à une valeur orange nécessitant une amélioration, ou une valeur rouge et médiocre. Une valeur INP s’affiche.

  13. Dans la carte INP, pointez sur la valeur de métrique pour afficher les informations dans une info-bulle.

  14. Dans la carte INP, cliquez sur la valeur INP.

    Dans la page de démonstration, les cartes Découvertes sont conçues pour s’étendre et s’afficher lentement, de sorte qu’il faut beaucoup de temps entre le clic sur l’en-tête et le rendu du contenu de la carte développée. Le délai est une valeur aléatoire comprise entre 100 ms et 1000 ms, ce qui entraîne une valeur INP élevée.

    Sous les cartes de mesures locales , les onglets Interactions et Changements de disposition sont remplis.

Onglet Interactions

L’onglet Interactions affiche des informations sur vos interactions avec la page web :

Onglet Interactions

L’onglet Interactions comprend :

  • Phases.
  • Éléments.
  • Horaires.

Pour effacer l’onglet Interactions , cliquez sur le bouton Effacer le journal actuel (icône Effacer) à droite de l’onglet Interactions .

Onglet Shifts de disposition

L’onglet Shifts de disposition affiche des informations sur les shifts de disposition :

L’onglet Shifts de disposition

L’onglet Shifts de disposition comprend :

  • Scores.
  • Éléments.

Capture et analyse d’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 Performances vous offre les options suivantes :

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 (icône 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 :

Analyser un rapport de performances

Pour un guide complet sur l’utilisation de l’outil Performances , voir Analyser un enregistrement de performances dans Référence des fonctionnalités de performances.

Pour naviguer dans un rapport de performances :

Pour vous concentrer sur ce qui est important pour votre flux de travail :

Pour en savoir plus sur les onglets de bas en haut, Arborescence des appels et Journal des événements :

Pour analyser un rapport de 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 Phare Optimiser la vitesse du site Web à l’aide de Lighthouse
Outil Mémoire Résoudre les problèmes de mémoire
Outil >Performances Onglet Insights Obtenez des informations actionnables dans la référence des fonctionnalités de performances.
Outil de rendu Outil de rendu, pour voir à quoi ressemble une page Web avec différentes options d’affichage ou des défaillances visuelles
Outil des problèmes Rechercher et résoudre des problèmes à l’aide de l’outil Problèmes
Outil Performances Afficher les informations sur les couches dans la référence des fonctionnalités de performances

Voir aussi

Remarque

Certaines parties de cette page sont des modifications basées sur le travail créé et partagé par Google et utilisé conformément aux conditions décrites dans la licence internationale Creative Commons Attribution 4.0. La page originale se trouve ici et est écrite par Dale St. Marthe et Sofia Emelianova.

Creative Commons License Ce travail est sous licence Creative Commons Attribution 4.0 International.

  • Dernière mise à jour :