Utilisez le panneau Insights sur les performances pour obtenir des insights exploitables et adaptés à votre cas d'utilisation sur les performances de votre site Web.
Présentation
Le panneau Informations sur les performances vous permet d'effectuer les opérations suivantes:
- Enregistrez et mesurez les performances de chargement des pages.
- Afficher les métriques de performances Web Vitals
- Afficher l'activité réseau
- Simulez des vitesses de processeur et de réseau plus lentes.
- Importer et exporter des enregistrements
Pourquoi un nouveau panneau ?
Le nouveau panneau Informations sur les performances est un test visant à résoudre ces trois difficultés rencontrées par les développeurs lorsqu'ils utilisent le panneau Performances existant:
- Trop d'informations Avec l'interface utilisateur repensée, le panneau Insights sur les performances simplifie les données et n'affiche que les informations pertinentes.
- Difficile de distinguer les cas d'utilisation Le panneau Informations sur les performances permet d'effectuer des analyses basées sur les cas d'utilisation. Pour le moment, il n'est compatible qu'avec le cas d'utilisation du chargement de page. D'autres fonctionnalités seront disponibles à l'avenir en fonction de vos commentaires, par exemple l'interactivité.
- Nécessite une expertise approfondie du fonctionnement des navigateurs pour une utilisation efficace. Le panneau Insights sur les performances met en avant les insights clés dans le volet Insights, avec des commentaires pratiques pour résoudre les problèmes.
Introduction
Ce tutoriel vous explique comment mesurer et comprendre les performances de chargement de vos pages à l'aide du panneau Insights sur les performances. Poursuivez la lecture ou regardez la version vidéo de ce tutoriel ci-dessus.
Ouvrir le panneau "Informations sur les performances"
- Accédez aux outils pour les développeurs.
Cliquez sur Autres options > Plus d'outils > Insights sur les performances.
Vous pouvez également ouvrir le panneau Insights sur les performances à l'aide du menu de commandes.
Enregistrer les performances
Le panneau Informations sur les performances peut enregistrer les performances générales et celles basées sur les cas d'utilisation (par exemple, le chargement de la page).
- Ouvrez cette page de démonstration dans un nouvel onglet, puis ouvrez le panneau "Insights sur les performances".
Vous pouvez limiter le réseau et le processeur pendant l'enregistrement. Pour ce tutoriel, cochez Désactiver le cache et définissez CPU sur ralentissement x4 dans le menu déroulant:
Cliquez sur Mesurer le chargement de la page. DevTools enregistre 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 de la page.
Relire un enregistrement de performances
Utilisez les commandes en bas de l'écran pour contrôler la lecture de votre enregistrement.
Voici un exemple de la procédure à suivre.
- Cliquez sur Lire pour lire l'enregistrement.
- Cliquez sur Suspendre pour suspendre la lecture.
- Réglez la vitesse de lecture à l'aide du menu déroulant.
- Cliquez sur Activer/Désactiver l'aperçu visuel pour afficher ou masquer l'aperçu visuel.
Parcourir un enregistrement de performances
DevTools fait un zoom arrière automatique pour afficher la chronologie complète de l'enregistrement. Vous pouvez faire un zoom et déplacer la chronologie pour parcourir l'enregistrement.
Pour faire un zoom et déplacer la chronologie vers la gauche et la droite, utilisez les boutons de navigation correspondants:
- Cliquez sur la chronologie pour déplacer le point de lecture afin d'afficher un frame spécifique.
- Cliquez sur les commandes Zoom avant et Zoom arrière en bas pour faire un zoom. Dans ce cas, vous effectuez un zoom en fonction du point de lecture.
- Faites glisser la barre de défilement horizontale en bas pour déplacer la chronologie vers la gauche ou vers la droite.
Vous pouvez également utiliser les raccourcis clavier. Cliquez sur le bouton pour afficher les raccourcis.
Lorsque vous utilisez des raccourcis, vous pouvez faire un zoom en fonction du curseur de la souris.
Afficher les insights sur les performances
Obtenez une liste d'insights sur les performances dans le volet Insights. Identifier et résoudre les problèmes de performances potentiels
Pointez sur chacun des insights pour les mettre en surbrillance sur les principaux canaux.
Cliquez sur un insight, par exemple la requête bloquant le rendu, pour l'ouvrir dans le volet Détails. Pour en savoir plus sur le problème, examinez les sections Fichier, Problème, Comment résoudre le problème, etc.
Afficher les métriques de performances Web Vitals
Web Vitals est une initiative de Google visant à fournir des conseils unifiés concernant des signaux de qualité, essentiels pour proposer une expérience utilisateur optimale sur le Web.
Vous pouvez afficher ces métriques dans les volets Chronologie et Insights.
Pointez sur les insights de la chronologie pour en savoir plus sur les métriques.
Identifier les retards de la plus grande peinture de contenu
Le Largest Contentful Paint (LCP) est l'une des métriques Core Web Vitals. Elle indique le délai d'affichage du plus grand bloc d'image ou de texte visible dans la fenêtre d'affichage, par rapport au moment où la page a commencé à se charger pour la première fois.
Un score LCP satisfaisant est de 2,5 secondes ou moins.
Si l'affichage du plus grand élément visible de votre page prend plus de temps, le badge LCP s'affiche dans la chronologie avec un carré jaune ou un triangle rouge.
Pour ouvrir le volet Détails, cliquez sur le badge LCP dans la chronologie ou dans le volet Insights sur la droite. Dans ce volet, vous pouvez découvrir les causes potentielles des retards et des suggestions pour les résoudre.
Dans cet exemple, une requête bloque l'affichage. Vous pouvez appliquer des styles critiques en ligne pour résoudre le problème. Pour en savoir plus, consultez Éliminer les ressources qui bloquent l'affichage.
Pour afficher les sous-composants du temps de rendu du LCP, faites défiler la page jusqu'à la section Détails > Décomposition des temps.
Le temps de rendu du LCP se compose des sous-composants suivants:
| Sous-partie du LCP | Description |
|---|---|
| Temps de latence du premier octet (TTFB) | Délai écoulé entre le moment où l'utilisateur lance le chargement de la page et le moment où le navigateur reçoit le premier octet de la réponse du document HTML. |
| Délai de chargement de la ressource | Différence entre le TTFB et le moment où le navigateur commence à charger la ressource LCP. |
| Temps de chargement de la ressource | Temps nécessaire pour charger la ressource LCP elle-même. |
| Délai d'affichage de l'élément | Différence entre le moment où la ressource LCP a fini de se charger et le moment où l'élément LCP est entièrement affiché. |
Si un élément LCP ne nécessite pas de chargement de ressources pour s'afficher, le délai et le temps de chargement de la ressource sont omis. Par exemple, si l'élément est un nœud de texte affiché avec une police système.
Afficher l'activité de décalage de mise en page
Affichez l'activité des changements de mise en page dans le canal Changements de mise en page.
Les décalages de mise en page sont regroupés dans une fenêtre de session. Dans cet exemple, il existe deux fenêtres de session. Les fenêtres de session sont espacées les unes des autres.
Le Cumulative Layout Shift (CLS) est l'une des métriques des Core Web Vitals. Utilisez le canal Déplacements de mise en page pour identifier les problèmes potentiels et les causes des déplacements de mise en page.
Lorsque vous améliorez la métrique CLS, commencez toujours par la fenêtre de session la plus longue. Dans notre exemple, la fenêtre de session 1 est la plus grande, en fonction de la couleur et du niveau d'arrière-plan.
Cliquez sur une capture d'écran pour afficher les détails du décalage de mise en page, identifier les causes potentielles et les éléments concernés.
Dans notre exemple, la cause potentielle est un contenu multimédia non redimensionné. Pour savoir comment résoudre ce problème, consultez Optimiser le décalage de mise en page cumulé.
Comprendre le score de décalage de mise en page
Pour comprendre comment les scores sont calculés, consultez la section Fenêtre dans le volet Détails. Fenêtre indique la fenêtre de session à laquelle appartient le décalage de mise en page actuel.
Si l'ensemble de la page est décalé, le score maximal de chaque décalage de mise en page est 1. Dans notre exemple, le premier changement de mise en page a obtenu un score de 0.15. Le deuxième changement de mise en page a obtenu un score de 0.041.
Le score total de cette fenêtre de session est 0.19. En fonction du seuil de CLS, il doit être amélioré. La couleur d'arrière-plan de la fenêtre de session est la même.
Le graphique de l'arrière-plan de la fenêtre de session augmente au fil du temps. Le score cumulé du changement de mise en page reflète l'augmentation à ce moment-là.
Afficher l'activité réseau
Affichez l'activité réseau dans le canal Réseau. Vous pouvez développer le canal de réseau pour afficher toutes les activités du réseau, puis cliquer sur chaque élément pour en afficher les détails.
Afficher l'activité du moteur de rendu
Afficher l'activité de rendu dans le canal Moteur de rendu. Vous pouvez développer chaque moteur de rendu pour afficher les activités et cliquer sur chaque élément pour afficher les détails.
Afficher l'activité du GPU
Affichez l'activité du GPU dans le canal GPU. La piste du GPU est masquée par défaut. Pour l'activer, cochez GPU dans Settings (Paramètres).
Afficher les temps utilisateur
Pour obtenir des mesures de performances personnalisées, vous pouvez utiliser User Timing (Temps utilisateur) et visualiser vos temps avec le canal Timing (Temps). Pour en savoir plus, consultez l'API User Timing.
Consultez cette page de démonstration qui calcule le temps écoulé depuis le chargement du texte.
Pour afficher les temps utilisateur:
- Marquez des lieux dans votre application avec
performance.mark(). - Mesurez le temps écoulé entre les repères avec
performance.measure(). - Enregistrer les performances
- Affichez les mesures sur le canal Timings. Si vous ne voyez pas le parcours, vérifiez l'option Temps de l'utilisateur dans Paramètres.
- Pour afficher les détails, cliquez sur le code temporel sur la piste.
Personnaliser l'UI
Pour personnaliser la timeline et les pistes, cliquez sur l'icône Paramètres du panneau, puis cochez les options de votre choix.
Exporter un enregistrement
Pour enregistrer un enregistrement, cliquez sur Exporter .
Importer un enregistrement
Pour charger un enregistrement, sélectionnez Importer .
Supprimer un enregistrement
Pour supprimer un enregistrement :
- Cliquez sur Supprimer. Une boîte de dialogue de confirmation s'ouvre.
- Dans la boîte de dialogue, cliquez sur Supprimer pour confirmer la suppression.