Documentation de référence sur les fonctionnalités de performances

Cette page est une référence complète des fonctionnalités des outils pour les développeurs Chrome liées à l'analyse des performances.

Consultez Analyser les performances d'exécution pour suivre un tutoriel guidé sur l'analyse des performances d'une page à l'aide des outils pour les développeurs Chrome.

Enregistrer les performances

Vous pouvez enregistrer les performances d'exécution ou de chargement.

Enregistrer les performances d'exécution

Enregistrez les performances d'exécution lorsque vous souhaitez analyser les performances d'une page pendant son exécution, par opposition au chargement.

1. Accédez à la page que vous souhaitez analyser.
2. Cliquez sur l'onglet Performances dans DevTools.

3. Cliquez sur Enregistrer .

   

4. Interagissez avec la page. DevTools enregistre toute activité de page qui se produit en raison de vos interactions.

5. Cliquez à nouveau sur Enregistrer ou sur Arrêter pour arrêter l'enregistrement.

Enregistrer les performances de chargement

Enregistrez les performances de chargement lorsque vous souhaitez analyser les performances d'une page pendant son chargement, et non pendant son exécution.

1. Accédez à la page que vous souhaitez analyser.
2. Ouvrez le panneau Performances des outils pour les développeurs.

3. Cliquez sur Démarrer le profilage et actualiser la page . DevTools accède d'abord à about:blank pour effacer toutes les captures d'écran et traces restantes. DevTools enregistre ensuite les métriques de performances pendant le rechargement de la page, puis arrête automatiquement l'enregistrement quelques secondes après la fin du chargement.

   

Les outils de développement font automatiquement un zoom avant sur la partie de l'enregistrement où la plupart des activités se sont produites.

Dans cet exemple, le panneau Performances affiche l'activité pendant le chargement d'une page.

Faire des captures d'écran pendant l'enregistrement

Cochez la case Captures d'écran pour prendre une capture d'écran de chaque frame pendant l'enregistrement.

Consultez Afficher une capture d'écran pour découvrir comment interagir avec les captures d'écran.

Forcer la récupération de mémoire pendant l'enregistrement

Lorsque vous enregistrez une page, cliquez sur le balai Collecter les déchets pour forcer la récupération de mémoire.

Afficher les paramètres d'enregistrement

Cliquez sur Capture settings (Paramètres de capture)  pour afficher d'autres paramètres liés à la façon dont DevTools capture les enregistrements de performances.

Désactiver les échantillons JavaScript

Par défaut, la piste Principale d'un enregistrement affiche des piles d'appels détaillées des fonctions JavaScript appelées pendant l'enregistrement. Pour désactiver ces piles d'appels:

1. Ouvrez le menu Paramètres de capture . Consultez la section Afficher les paramètres d'enregistrement.
2. Cochez la case Désactiver les échantillons JavaScript.
3. Enregistrez la page.

Les captures d'écran suivantes montrent la différence entre la désactivation et l'activation des exemples JavaScript. La piste Principale de l'enregistrement est beaucoup plus courte lorsque l'échantillonnage est désactivé, car il omet toutes les piles d'appels JavaScript.

Cet exemple montre un enregistrement avec des exemples JS désactivés.

Cet exemple montre un enregistrement avec des exemples JS activés.

Limiter le débit réseau pendant l'enregistrement

Pour limiter le débit du réseau pendant l'enregistrement:

1. Ouvrez le menu Paramètres de capture . Consultez la section Afficher les paramètres d'enregistrement.
2. Définissez Network (Réseau) sur le niveau de limitation choisi.

Limiter la consommation de ressources processeur pendant l'enregistrement

Pour limiter la consommation de ressources processeur pendant l'enregistrement:

1. Ouvrez le menu Paramètres de capture . Consultez la section Afficher les paramètres d'enregistrement.
2. Définissez CPU sur le niveau de limitation choisi.

Le débit est limité en fonction des capacités de votre ordinateur. Par exemple, l'option Ralentir de 2 fois fait fonctionner votre processeur deux fois plus lentement que d'habitude. DevTools ne peut pas vraiment simuler les processeurs des appareils mobiles, car l'architecture des appareils mobiles est très différente de celle des ordinateurs de bureau et des ordinateurs portables.

Activer les statistiques du sélecteur CSS

Pour afficher les statistiques de vos sélecteurs de règles CSS lors d'événements Recalculate Style (Recalculer le style) de longue durée:

1. Ouvrez le menu Paramètres de capture . Consultez la section Afficher les paramètres d'enregistrement.
2. Cochez la case Enable CSS selector stats (Activer les statistiques du sélecteur CSS).

Pour en savoir plus, découvrez comment analyser les performances des sélecteurs CSS lors des événements de recalcul de style.

Activer l'instrumentation de peinture avancée

Pour afficher l'instrumentation de peinture détaillée:

1. Ouvrez le menu Paramètres de capture . Consultez la section Afficher les paramètres d'enregistrement.
2. Cochez la case Activer l'instrumentation de peinture avancée.

Pour découvrir comment interagir avec les informations de peinture, consultez Afficher les calques et Afficher le profileur de peinture.

Annoter un enregistrement et le partager

Une fois une trace de performances enregistrée, vous pouvez l'analyser et l'annoter pour partager vos résultats.

Pour annoter un enregistrement, ouvrez l'onglet Annotations dans la barre latérale left_panel_open à gauche du panneau Performances. Il existe plusieurs façons d'ajouter une annotation:

• Étiqueter un élément: pour ajouter un libellé à un élément, double-cliquez dessus et saisissez un libellé.
• Connecter deux éléments: pour connecter deux éléments à l'aide d'une flèche, double-cliquez sur le premier élément, cliquez sur la flèche à côté de celui-ci, puis cliquez sur le deuxième élément.
• Étiqueter une plage temporelle: pour ajouter une étiquette à une plage temporelle arbitraire, maintenez la touche Maj enfoncée et faites glisser la souris de son début à sa fin, puis saisissez une étiquette.

Dans cet exemple, dans le canal Network (Réseau), il y a deux requêtes annotées, une connexion entre elles et une plage temporelle annotée en rose. L'onglet Annotations indique le nombre d'annotations à côté de son nom d'onglet, soit 4 dans cet exemple.

Pour supprimer une annotation, pointez dessus dans l'onglet Annotations, puis cliquez sur le bouton Supprimer Supprimer à côté.

Pour masquer les annotations du tracé des performances, cochez la check_box Masquer les annotations en bas de l'onglet Annotations.

Enregistrer et partager un enregistrement

Pour enregistrer un enregistrement et le partager ultérieurement avec vos résultats de performances annotés, dans la barre d'action en haut du panneau Performances, cliquez sur Télécharger Télécharger, puis sélectionnez Enregistrer la trace.

Vous pouvez également sélectionner Enregistrer la trace sans annotations.

Charger un enregistrement

Pour charger un enregistrement, cliquez sur Importer Importer dans la barre d'action en haut du panneau Performances.

Le panneau Performances affiche les annotations si elles sont présentes dans la trace.

Effacer l'enregistrement précédent

Après avoir effectué un enregistrement, appuyez sur Effacer l'enregistrement pour le supprimer du panneau Performances.

Analyser un enregistrement de performances

Une fois que vous avez enregistré les performances d'exécution ou les performances de chargement, le panneau Performances fournit de nombreuses données pour analyser les performances de ce qui vient de se passer.

Obtenez des insights exploitables

Le panneau Performances consolide les insights sur les performances du rapport Lighthouse et du panneau Informations sur les performances, désormais obsolète. Ces insights peuvent vous suggérer des moyens d'améliorer les performances et vous fournir une analyse guidée sur les problèmes de performances suivants, y compris, mais sans s'y limiter:

• LCP et INP par phase
• Détection de la requête LCP
• Causes des décalages de mise en page
• Requêtes de blocage du rendu
• Tiers
• Diffusion d'images
• Latence de la demande de document
• Optimisation de la fenêtre d'affichage pour les mobiles
• Coûts des sélecteurs CSS

Pour exploiter les insights:

1. Enregistrez une performance.
2. Dans la barre latérale de gauche du panneau Performances, ouvrez l'onglet Insights, développez les différentes sections, puis pointez sur les éléments et cliquez dessus. Le panneau Performances met en surbrillance les événements correspondants dans la trace.

Parcourir l'enregistrement

Pour examiner de près votre enregistrement de performances, vous pouvez sélectionner une partie de l'enregistrement, faire défiler un graphique en forme de flamme long, faire un zoom avant et arrière, et utiliser les repères pour passer d'un niveau de zoom à un autre.

Sélectionner une partie de l'enregistrement

Sous la barre d'action du panneau Performances et en haut de l'enregistrement, vous pouvez voir la section Vue d'ensemble de la chronologie avec les graphiques CPU et NET.

Pour sélectionner une partie d'un enregistrement, cliquez de manière prolongée, puis faites glisser le curseur vers la gauche ou la droite dans la Vue d'ensemble de la chronologie.

Pour sélectionner une portion à l'aide du clavier:

1. Mettez en surbrillance le canal Principal ou l'un de ses voisins.
2. Utilisez les touches W, A, S et D pour faire un zoom avant, vous déplacer vers la gauche, faire un zoom arrière et vous déplacer vers la droite, respectivement.

Pour sélectionner une partie à l'aide d'un pavé tactile:

1. Pointez sur la section Aperçu de la chronologie ou sur l'une des pistes (Principale et ses voisines).
2. Balayer l'écran vers le haut pour faire un zoom arrière, vers la gauche pour se déplacer vers la gauche, vers le bas pour faire un zoom avant et vers la droite pour se déplacer vers la droite.

Créer des repères et passer d'un niveau de zoom à un autre

La vue d'ensemble de la chronologie vous permet de créer plusieurs fil d'Ariane imbriqués à la suite, d'augmenter les niveaux de zoom, puis de passer librement d'un niveau de zoom à un autre.

Pour créer et utiliser des fil d'Ariane:

1. Dans Vue d'ensemble de la chronologie, sélectionnez une partie de l'enregistrement.
2. Pointez sur la sélection, puis cliquez sur le bouton zoom_in N ms. La sélection s'étend pour remplir la vue d'ensemble de la chronologie. Une chaîne de fil d'Ariane commence à se former en haut de la présentation de la chronologie.
3. Répétez les deux étapes précédentes pour créer un autre fil d'Ariane imbriqué. Vous pouvez continuer à imbriquer des fils d'Ariane tant que la plage de sélection est supérieure à cinq millisecondes.
4. Pour accéder à un niveau de zoom choisi, cliquez sur le fil d'Ariane correspondant dans la chaîne en haut de l'aperçu de la timeline.

Pour supprimer les fils d'Ariane enfants d'un fil d'Ariane parent, effectuez un clic droit sur le fil d'Ariane parent, puis sélectionnez Supprimer les fils d'Ariane enfants.

Faire défiler un graphique de flammes long

Pour faire défiler un graphique en forme de flamme long dans le canal Principal ou dans l'un de ses canaux voisins, cliquez de manière prolongée, puis faites glisser dans n'importe quelle direction jusqu'à ce que ce que vous recherchez s'affiche.

Activités de recherche

Vous pouvez rechercher des activités dans le canal Principal et des requêtes dans le canal Réseau.

Pour ouvrir un champ de recherche en bas du panneau Performances, appuyez sur:

• macOS: Cmd+F
• Windows, Linux: Ctrl+F

Cet exemple montre une expression régulière dans le champ de recherche en bas qui recherche toute activité commençant par E.

Pour faire défiler les activités qui correspondent à votre requête:

• Cliquez sur les boutons expand_less Précédent ou expand_more Suivant.
• Appuyez sur Maj+Entrée pour sélectionner l'élément précédent ou sur Entrée pour sélectionner l'élément suivant.

Le panneau Performances affiche une info-bulle sur l'activité sélectionnée dans le champ de recherche.

Pour modifier les paramètres des requêtes:

• Cliquez sur match_case Respecter la casse pour rendre la requête sensible à la casse.
• Cliquez sur regular_expression Expression régulière pour utiliser une expression régulière dans votre requête.

Pour masquer la zone de recherche, cliquez sur Annuler.

Modifier l'ordre des canaux et les masquer

Pour désencombrer la trace des performances, vous pouvez modifier l'ordre des traces et masquer celles qui ne sont pas pertinentes en mode de configuration des traces.

Pour déplacer et masquer des pistes:

1. Pour accéder au mode de configuration, effectuez un clic droit sur le nom d'un canal, puis sélectionnez Configurer les canaux.
2. Cliquez sur arrow_upward vers le haut ou arrow_downward vers le bas pour déplacer un canal vers le haut ou vers le bas. Cliquez sur visibility_off pour le masquer.
3. Lorsque vous avez terminé, cliquez sur Terminer la configuration des pistes en bas de l'écran pour quitter le mode de configuration.

Regardez la vidéo pour voir ce workflow en action.

Le panneau Performances enregistre la configuration des traces pour les nouvelles traces, mais pas pour les prochaines sessions DevTools.

Afficher l'activité du thread principal

Utilisez la piste Principale pour afficher l'activité qui s'est produite sur le thread principal de la page.

Cliquez sur un événement pour afficher plus d'informations à son sujet dans l'onglet Récapitulatif. Le panneau Performances délimite l'événement sélectionné en bleu.

Cet exemple fournit plus d'informations sur l'événement d'appel de fonction get dans l'onglet Récapitulatif.

Lire le graphique de flammes

Le panneau Performances représente l'activité du thread principal dans un graphique en forme de flamme. L'axe des abscisses représente l'enregistrement au fil du temps. L'axe des ordonnées représente la pile d'appels. Les événements en haut provoquent les événements en bas.

Cet exemple montre un graphique en forme de flamme dans le canal Principal. Un événement click a entraîné un appel de fonction anonyme. Cette fonction a à son tour appelé onEndpointClick_, qui a appelé handleClick_, et ainsi de suite.

Le panneau Performances attribue des couleurs aléatoires aux scripts pour fractionner le graphique en flammes et le rendre plus lisible. Dans l'exemple précédent, les appels de fonction d'un script sont de couleur bleu clair. Les appels provenant d'un autre script sont de couleur rose clair. Le jaune plus foncé représente l'activité de script, et l'événement violet représente l'activité de rendu. Ces événements jaune et violet plus foncés sont cohérents dans tous les enregistrements.

Les tâches longues sont également mises en évidence par un triangle rouge, et la partie supérieure à 50 millisecondes est mise en surbrillance en rouge:

Dans cet exemple, la tâche a pris plus de 400 millisecondes. La partie représentant les 350 dernières millisecondes est donc mise en surbrillance en rouge, tandis que les 50 millisecondes initiales ne le sont pas.

De plus, le canal Principal affiche des informations sur les profils de processeur démarrés et arrêtés à l'aide des fonctions de console profile() et profileEnd().

Pour masquer le graphique en forme de flamme détaillé des appels JavaScript, consultez Désactiver les exemples JavaScript. Lorsque les échantillons JavaScript sont désactivés, vous ne voyez que les événements de haut niveau tels que Event (click) et Function Call.

Suivre les initiateurs d'événements

La piste Principale peut afficher des flèches qui relient les initiateurs suivants aux événements qu'ils ont provoqués:

• Invalidation du style ou de la mise en page -> Recalculer les styles ou Mise en page
• Request Animation Frame -> Animation Frame Fired
• Request Idle Callback (Demander un rappel à la prochaine période d'inactivité) -> Fire Idle Callback (Déclencher le rappel à la prochaine période d'inactivité)
• Installer un minuteur -> Minuteur déclenché
• Créer un WebSocket -> Envoyer et Recevoir le handshake WebSocket ou Détruire le WebSocket

Pour afficher les flèches, recherchez un déclencheur ou l'événement qu'il a provoqué dans le graphique en forme de flamme, puis sélectionnez-le.

Lorsque l'onglet "Récapitulatif" est sélectionné, les liens Initiateur de s'affichent pour les initiateurs et les liens Déclenché par pour les événements qu'ils ont causés. Cliquez dessus pour passer d'un événement à un autre.

Masquer les fonctions et leurs enfants dans le graphique en forme de flamme

Pour désencombrer le graphique de type "flamme" dans le thread Principal, vous pouvez masquer des fonctions sélectionnées ou leurs enfants:

1. Dans le canal Principal, effectuez un clic droit sur une fonction, puis choisissez l'une des options suivantes ou appuyez sur le raccourci correspondant:

   • Masquer la fonction (H)
   • Masquer les enfants (C)
   • Masquer les enfants récurrents (R)
   • Réinitialiser les enfants (U)
   • Réinitialiser la trace (T)
   • Ajouter un script à la liste des éléments à ignorer (I)

   

   Un bouton de menu déroulant arrow_drop_down apparaît à côté du nom de la fonction avec des enfants masqués.

2. Pour afficher le nombre d'enfants masqués, pointez sur le bouton du menu déroulant arrow_drop_down.

   

3. Pour réinitialiser une fonction avec des enfants masqués ou l'ensemble du graphique de type "flamme", sélectionnez la fonction, puis appuyez sur U ou effectuez un clic droit sur une fonction, puis sélectionnez Réinitialiser la trace.

Ignorer les scripts dans le graphique en forme de flamme

Pour ajouter un script à la liste des éléments à ignorer, effectuez un clic droit sur un script dans le graphique, puis sélectionnez Ajouter un script à la liste des éléments à ignorer.

Le graphique réduit les scripts ignorés, les marque comme Dans la liste d'éléments à ignorer et les ajoute aux règles d'exclusion personnalisée dans Paramètres Paramètres > Liste d'éléments à ignorer. Les scripts ignorés sont conservés jusqu'à ce que vous les supprimiez de la trace ou des règles d'exclusion personnalisées.

Afficher les activités dans un tableau

Une fois une page enregistrée, vous n'avez pas besoin de vous fier uniquement à la piste Principale pour analyser les activités. DevTools fournit également trois vues tabulaires pour analyser les activités. Chaque vue vous donne une perspective différente sur les activités:

• Lorsque vous souhaitez afficher les activités racine qui génèrent le plus de travail, utilisez l'onglet Arbre d'appels.
• Lorsque vous souhaitez afficher les activités pour lesquelles vous avez passé le plus de temps directement, utilisez l'onglet De bas en haut.
• Pour afficher les activités dans l'ordre dans lequel elles se sont produites pendant l'enregistrement, utilisez l'onglet Journal des événements.

Pour vous aider à trouver plus rapidement ce que vous recherchez, les trois onglets comportent des boutons de filtrage avancé à côté de la barre Filtrer:

• match_case Respecter la casse
• regular_expression Expression régulière
• match_word Correspondre au mot entier

Chaque vue tabulaire du panneau Performances affiche des liens vers des activités telles que les appels de fonction. Pour vous aider à déboguer, DevTools recherche les déclarations de fonction correspondantes dans les fichiers sources. De plus, si les mappages source appropriés sont présents et activés, les outils de développement trouvent automatiquement les fichiers d'origine.

Cliquez sur un lien pour ouvrir un fichier source dans le panneau Sources.

Activités racine

Voici une explication du concept d'activités racine mentionné dans les sections Arbre d'appels, Descendant et Journal des événements.

Les activités racine sont celles qui font effectuer des tâches au navigateur. Par exemple, lorsque vous cliquez sur une page, le navigateur déclenche une activité Event en tant qu'activité racine. Ce Event peut alors entraîner l'exécution d'un gestionnaire.

Dans le graphique en forme de flamme du canal Principal, les activités racine se trouvent en haut du graphique. Dans les onglets Arbre d'appels et Journal des événements, les activités racine sont les éléments de premier niveau.

Pour voir un exemple d'activités racine, consultez l'onglet Arbre d'appels.

Onglet "Arborescence d'appels"

Utilisez l'onglet Arborescence des appels pour voir quelles activités racine génèrent le plus de travail.

L'onglet Arborescence des appels n'affiche que les activités pendant la partie sélectionnée de l'enregistrement. Pour savoir comment sélectionner une partie d'un enregistrement, consultez Sélectionner une partie d'un enregistrement.

Dans cet exemple, les éléments de niveau supérieur de la colonne Activité, tels que Event, Paint et Composite Layers, sont des activités racine. L'imbrication représente la pile d'appels. Dans cet exemple, Event a provoqué Function Call, qui a provoqué button.addEventListener, qui a provoqué b, et ainsi de suite.

Temps propre : représente le temps directement passé dans cette activité. Durée totale : représente le temps passé dans cette activité ou dans l'une de ses activités enfants.

Cliquez sur Temps personnel, Temps total ou Activité pour trier le tableau par cette colonne.

Utilisez la zone Filtrer pour filtrer les événements par nom d'activité.

Par défaut, le menu Regroupement est défini sur Aucun regroupement. Utilisez le menu Groupement pour trier le tableau des activités en fonction de différents critères.

Cliquez sur Afficher la pile la plus lourde pour afficher un autre tableau à droite du tableau Activité. Cliquez sur une activité pour renseigner le tableau Pile la plus lourde. Le tableau Pile la plus lourde indique les enfants de l'activité sélectionnée dont l'exécution a pris le plus de temps.

Onglet "Bottom-Up" (Bas en haut)

Utilisez l'onglet De bas en haut pour voir quelles activités ont directement pris le plus de temps au total.

L'onglet De bas en haut n'affiche que les activités pendant la partie sélectionnée de l'enregistrement. Pour savoir comment sélectionner une partie d'un enregistrement, consultez Sélectionner une partie d'un enregistrement.

Dans le graphique en forme de flamme de la piste Principale de cet exemple, vous pouvez voir que presque tout le temps a été consacré à l'exécution des trois appels à wait(). Par conséquent, l'activité la plus importante dans l'onglet De bas en haut est wait. Dans le graphique en forme de flamme, la couleur jaune sous les appels à wait correspond en réalité à des milliers d'appels Minor GC. Par conséquent, vous pouvez voir que dans l'onglet Ascendant, l'activité la plus coûteuse suivante est Minor GC.

La colonne Temps propre représente le temps cumulé passé directement dans cette activité, pour toutes ses occurrences.

La colonne Durée totale représente le temps cumulé passé dans cette activité ou dans l'une de ses activités enfants.

Onglet "Journal des événements"

Utilisez l'onglet Journal des événements pour afficher les activités dans l'ordre dans lequel elles se sont produites pendant l'enregistrement.

L'onglet Journal des événements n'affiche que les activités pendant la partie sélectionnée de l'enregistrement. Pour savoir comment sélectionner une partie d'un enregistrement, consultez Sélectionner une partie d'un enregistrement.

La colonne Heure de début indique le moment où cette activité a commencé, par rapport au début de l'enregistrement. L'heure de début de 1573.0 ms pour l'élément sélectionné dans cet exemple signifie que l'activité a commencé 1 573 ms après le début de l'enregistrement.

La colonne Temps propre indique le temps passé directement dans cette activité.

Les colonnes Durée totale représentent le temps passé directement dans cette activité ou dans l'une de ses activités enfants.

Cliquez sur Heure de début, Temps de l'utilisateur ou Durée totale pour trier le tableau par cette colonne.

Utilisez la zone Filtrer pour filtrer les activités par nom.

Utilisez le menu Durée pour filtrer les activités qui ont pris moins de 1 ms ou 15 ms. Par défaut, le menu Durée est défini sur Tout, ce qui signifie que toutes les activités sont affichées.

Désactivez les cases à cocher Chargement, Scripting, Rendu ou Peinture pour filtrer toutes les activités de ces catégories.

Afficher les codes temporels

Sur la piste Timings (Calendrier), affichez des repères importants, comme:

• First Paint (FP)
• First Contentful Paint (FCP)
• Largest Contentful Paint (LCP)
• Événement DOMContentLoaded (DCL)
• Événement de chargement (L)
• Vos appels performance.mark() personnalisés. Une marque individuelle avec une info-bulle s'affiche ci-dessous à 813,44 ms, avec la mention Début de l'exécution de JavaScript.
• Vos appels performance.measure() personnalisés. Une étendue jaune est affichée ci-dessous, avec la mention Interaction lente.

Sélectionnez un repère pour afficher plus de détails dans l'onglet Résumé, y compris son code temporel, sa durée totale, sa durée propre et l'objet detail. Pour les appels performance.mark() et performance.measure(), l'onglet affiche également des traces de pile.

Afficher les interactions

Examinez les interactions des utilisateurs dans le canal Interactions pour identifier les problèmes de réactivité potentiels.

Pour afficher les interactions:

1. Ouvrez les outils de développement, par exemple sur cette page de démonstration.
2. Ouvrez le panneau Performances et lancez un enregistrement.
3. Cliquez sur un élément (café) et arrêtez l'enregistrement.
4. Recherchez la piste Interactions dans le fil d'actualité.

Dans cet exemple, le canal Interactions affiche l'interaction Pointeur. Les interactions comportent des barbes qui indiquent les retards d'entrée et de présentation aux limites de temps de traitement. Pointez sur l'interaction pour afficher une info-bulle indiquant le délai d'entrée, le temps de traitement et le délai de présentation.

Le canal Interactions affiche également des avertissements Interaction to Next Paint (INP) pour les interactions de plus de 200 millisecondes dans l'onglet Récapitulatif et dans une info-bulle lorsque vous pointez dessus:

Le tracé Interactions marque les interactions de plus de 200 millisecondes avec un triangle rouge en haut à droite.

Afficher les décalages de mise en page

Affichez les décalages de mise en page sur la piste Décalages de mise en page. Les quarts de travail sont représentés par des losanges violets et sont regroupés en clusters (lignes violettes) en fonction de leur proximité sur la timeline.

Pour mettre en surbrillance un élément ayant entraîné un décalage de mise en page dans la fenêtre d'affichage, pointez sur le losange correspondant.

Pour en savoir plus sur un ou plusieurs décalages de mise en page dans l'onglet Récapitulatif, avec des informations sur les délais, les scores, les éléments et les causes potentielles, cliquez sur le losange ou le cluster correspondant.

Pour en savoir plus, consultez la section Déplacement cumulé de la mise en page (CLS).

Afficher les animations

Afficher les animations sur la piste Animations. Les animations sont nommées en fonction des propriétés ou éléments CSS correspondants, le cas échéant (par exemple, transform ou my-element). Les animations non composées sont marquées par des triangles rouges en haut à droite.

Sélectionnez une animation pour afficher plus de détails dans l'onglet Résumé, y compris les raisons des échecs de composition.

Afficher l'activité du GPU

Affichez l'activité du GPU dans la section GPU.

Afficher l'activité raster

Affichez l'activité de rendu dans la section Pool de threads.

Analyser les images par seconde (FPS)

Les outils de développement proposent de nombreuses façons d'analyser les images par seconde:

• Utilisez la section Frames (Cadres) pour afficher la durée d'un frame spécifique.
• Utilisez le compteur de FPS pour obtenir une estimation en temps réel des FPS pendant l'exécution de la page. Consultez Afficher les images par seconde en temps réel avec le compteur FPS.

Section "Frames" (Cadres)

La section Frames (Cadres) indique la durée exacte d'un cadre spécifique.

Pointez sur un cadre pour afficher une info-bulle contenant des informations supplémentaires à son sujet.

Cet exemple montre une info-bulle lorsque vous pointez sur un cadre.

La section Cadres peut afficher quatre types de cadres:

1. Frame inactif (blanc) Aucune modification.
2. Cadre (vert) Affichage comme prévu et à temps.
3. Cadre partiellement présenté (jaune avec un motif de lignes en pointillés larges et clairsemées) Chrome a fait de son mieux pour afficher au moins certaines mises à jour visuelles à temps. Par exemple, si le travail du thread principal du processus de rendu (animation du canevas) est en retard, mais que le thread du compositeur (défilement) est à l'heure.
4. Frame supprimé (rouge avec un motif de ligne continue dense) Chrome ne parvient pas à afficher le frame dans un délai raisonnable.

Cet exemple affiche une info-bulle lorsque vous pointez sur un frame partiellement présenté.

Cliquez sur un cadre pour afficher encore plus d'informations à son sujet dans l'onglet Récapitulatif. DevTools délimite le frame sélectionné en bleu.

Afficher les requêtes réseau

Développez la section Réseau pour afficher une cascade de requêtes réseau qui ont eu lieu pendant l'enregistrement des performances.

À côté du nom du canal Network (Réseau), une légende indique les types de requêtes par code couleur.

Les requêtes bloquant le rendu sont marquées d'un triangle rouge en haut à droite.

Pointez sur une demande pour afficher une info-bulle contenant les informations suivantes:

• URL de la requête et temps total d'exécution.
• Priorité ou modification de priorité, par exemple, Medium -> High.
• Indique si la requête est Render blocking ou non.
• Une répartition des délais de requête, décrite plus loin.

Lorsque vous cliquez sur une requête, le canal Network (Réseau) dessine une flèche de l'initiateur vers la requête.

En outre, le panneau Performances affiche l'onglet Résumé avec plus d'informations sur la requête, y compris, mais sans s'y limiter, les champs Priorité initiale et Priorité (finale). Si leurs valeurs diffèrent, la priorité de récupération de la requête a changé pendant l'enregistrement. Pour en savoir plus, consultez Optimiser le chargement des ressources avec l'API Fetch Priority.

L'onglet Summary (Récapitulatif) affiche également une répartition des délais de la requête.

La requête pour www.google.com est représentée par une ligne à gauche (|–), une barre au milieu avec une partie sombre et une partie claire, et une ligne à droite (–|).

Vous trouverez une autre répartition des temps dans l'onglet Réseau. Effectuez un clic droit sur la demande dans le canal Network ou sur son URL dans l'onglet Summary (Récapitulatif), puis cliquez sur Reveal in Network panel (Afficher dans le panneau "Network"). DevTools vous redirige vers le panneau Network (Réseau) et sélectionne la requête correspondante. Ouvrez l'onglet Timing (Calendrier).

Voici comment ces deux répartitions se correspondent:

• La ligne de gauche (|–) correspond à tout ce qui se trouve jusqu'au groupe d'événements Connection start, y compris. En d'autres termes, il s'agit de tout ce qui précède Request Sent.
• La partie claire de la barre est Request sent et Waiting for server response.
• La partie sombre de la barre est Content download.
• La ligne de droite (–|) correspond au temps d'attente du thread principal. L'onglet Réseau > Temps ne l'affiche pas.

Afficher les métriques de mémoire

Activez la case Mémoire pour afficher les métriques de mémoire du dernier enregistrement.

DevTools affiche un nouveau graphique Mémoire au-dessus de l'onglet Résumé. Un nouveau graphique, appelé HEAP, s'affiche également sous le graphique NET. Le graphique HEAP fournit les mêmes informations que la ligne JS Heap du graphique Mémoire.

Cet exemple affiche les métriques de mémoire au-dessus de l'onglet Récapitulatif.

Les lignes colorées du graphique correspondent aux cases à cocher colorées au-dessus du graphique. Désactivez une case à cocher pour masquer cette catégorie dans le graphique.

Le graphique n'affiche que la région de l'enregistrement sélectionnée. Dans l'exemple précédent, le graphique Mémoire n'affiche que l'utilisation de la mémoire au début de l'enregistrement, jusqu'à environ 1 000 ms.

Afficher la durée d'une partie d'un enregistrement

Lorsque vous analysez une section comme Network (Réseau) ou Main (Principal), vous avez parfois besoin d'une estimation plus précise de la durée de certains événements. Maintenez la touche Maj enfoncée, cliquez de manière prolongée, puis faites glisser le pointeur de la souris vers la gauche ou la droite pour sélectionner une partie de l'enregistrement. En bas de votre sélection, les outils de développement indiquent la durée de cette partie.

Dans cet exemple, le code temporel 488.53ms en bas de la partie sélectionnée indique la durée de cette partie.

Afficher une capture d'écran

Consultez Faire des captures d'écran pendant l'enregistrement pour découvrir comment activer les captures d'écran.

Pointez sur l'aperçu de la chronologie pour afficher une capture d'écran de l'état de la page à ce moment de l'enregistrement. La section Vue d'ensemble de la chronologie contient les graphiques CPU, FPS et NET.

Vous pouvez également afficher des captures d'écran en cliquant sur un cadre dans la section Cadres. DevTools affiche une petite version de la capture d'écran dans l'onglet Summary (Récapitulatif).

Cet exemple montre la capture d'écran de la trame 195.5ms dans l'onglet Récapitulatif lorsque vous cliquez dessus dans la section Cadres.

Cliquez sur la vignette dans l'onglet Récapitulatif pour faire un zoom avant sur la capture d'écran.

Cet exemple montre une capture d'écran agrandie après avoir cliqué sur sa miniature dans l'onglet Récapitulatif.

Afficher les informations sur les calques

Pour afficher des informations avancées sur les calques d'un frame:

1. Activez l'instrumentation de peinture avancée.
2. Sélectionnez un cadre dans la section Cadres. DevTools affiche des informations sur ses calques dans le nouvel onglet Calques, à côté de l'onglet Journal des événements.

Pointez sur une couche pour la mettre en surbrillance dans le diagramme.

Cet exemple montre la couche 39 mise en surbrillance lorsque vous pointez dessus.

Pour déplacer le diagramme:

• Cliquez sur Mode panoramique pour vous déplacer le long des axes X et Y.
• Cliquez sur Mode Rotation pour effectuer une rotation sur l'axe Z.
• Cliquez sur Réinitialiser la transformation pour rétablir le diagramme à sa position d'origine.

Découvrez l'analyse des calques en action:

Afficher le profileur de peinture

Pour afficher des informations avancées sur un événement de peinture:

1. Activez l'instrumentation de peinture avancée.
2. Sélectionnez un événement Paint dans la piste Principale.

Analyser les performances de rendu avec l'onglet "Rendu"

Utilisez les fonctionnalités de l'onglet Rendering (Affichage) pour visualiser les performances d'affichage de votre page.

Ouvrez l'onglet Rendu.

Afficher les images par seconde en temps réel avec le compteur de FPS

Les statistiques de rendu des frames sont une superposition qui s'affiche en haut à droite de votre vue. Il fournit une estimation en temps réel des FPS pendant l'exécution de la page.

Consultez la section Statistiques de rendu d'image.

Afficher les événements de peinture en temps réel avec la fonctionnalité de clignotement de la peinture

Utilisez Flashing de peinture pour obtenir une vue en temps réel de tous les événements de peinture sur la page.

Voir Flashing de la peinture.

Afficher une superposition de calques avec les bordures de calque

Utilisez Bordures de calque pour afficher une superposition des bordures et des tuiles de calque au-dessus de la page.

Consultez Bordures de calque.

Détecter en temps réel les problèmes de performances du défilement

Utilisez Problèmes de performances de défilement pour identifier les éléments de la page qui comportent des écouteurs d'événements liés au défilement qui peuvent nuire aux performances de la page. Les outils de développement soulignent les éléments potentiellement problématiques en vert clair.

Consultez Problèmes de performances du défilement.