Le panneau Informations sur les performances vous permet d'obtenir des insights exploitables sur les performances de votre site Web, basés sur des cas d'utilisation.
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 des 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 panel ?
Le nouveau panneau Informations sur les performances est une fonctionnalité expérimentale permettant de résoudre les trois difficultés suivantes rencontrées par les développeurs avec le panneau Performances existant:
- Les informations étaient trop nombreuses. Dans la nouvelle interface utilisateur, le panneau Informations sur les performances simplifie les données et n'affiche que les informations pertinentes.
- Difficile de faire la distinction entre les cas d'utilisation. Le panneau Informations sur les performances permet d'effectuer des analyses basées sur les cas d'utilisation. Il ne prend en charge que les cas d'utilisation liés au chargement de page pour le moment. D'autres cas seront bientôt disponibles en fonction de vos commentaires, comme 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 visionnez la version vidéo du tutoriel ci-dessus.
Ouvrir le panneau "Informations sur les performances"
- Ouvrez les outils de développement.
Cliquez sur Plus d'options > Plus d'outils > Informations 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 des performances générales et spécifiques à certains cas d'utilisation (chargement de page, par exemple).
- 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 les besoins de ce tutoriel, cochez la case Disable cache (Désactiver le cache), puis définissez CPU (Processeur) sur 4x encryption (Ralentissement 4x) 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 Pause pour interrompre la relecture.
- Ajustez la vitesse de lecture dans le menu déroulant.
- Cliquez sur Activer/Désactiver l'aperçu visuel pour afficher ou masquer l'aperçu visuel.
Parcourir un enregistrement d'une performance
Les Outils de développement effectuent un zoom arrière automatique pour afficher la chronologie complète de l'enregistrement. Vous pouvez parcourir l'enregistrement avec un zoom et déplacer la timeline.
Pour faire un zoom et déplacer la chronologie vers la gauche et la droite, utilisez les boutons de navigation correspondants :
- Cliquez sur la timeline pour déplacer la tête de lecture et afficher une image particulière.
- Cliquez sur les commandes Zoom avant et Zoom arrière situées en bas pour effectuer un zoom. Dans ce cas, vous effectuez un zoom en fonction du point de lecture.
- Faites glisser la barre de défilement horizontale située en bas pour déplacer la timeline vers la gauche et 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 demande qui bloque l'affichage) pour l'ouvrir dans le volet Détails. Pour en savoir plus sur le problème, consultez les sections Fichier, Problème, Comment résoudre le problème, etc.
Afficher les métriques de performances des signaux Web
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.
Découvrir 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 bon score LCP doit être inférieur ou égal à 2,5 secondes.
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 à 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, et vous pouvez appliquer des styles critiques de manière intégrée pour corriger le problème. Pour en savoir plus, consultez Éliminer les ressources qui bloquent l'affichage.
Pour afficher les sous-parties du délai d'affichage LCP, faites défiler la page jusqu'à la section Détails > Répartition des délais.
Le temps d'affichage LCP se compose des sous-parties suivantes:
| Sous-partie 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 des ressources | Temps nécessaire pour charger la ressource LCP elle-même. |
| Délai d'affichage des éléments | Delta entre le moment où le chargement de la ressource LCP est terminé et le moment où l'élément LCP est entièrement affiché. |
Si un élément LCP ne nécessite pas de chargement de ressource 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é des décalages 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. Il existe des espaces entre les fenêtres de session.
Le CLS (Cumulative Layout Shifts) est l'une des métriques Core Web Vitals. Utilisez la piste Décalages de mise en page pour identifier les problèmes potentiels et les causes de ces décalages.
Commencez toujours par la fenêtre de session la plus longue lorsque vous améliorez la métrique CLS. Dans notre exemple, la fenêtre de session 1 est la plus grande. Compte tenu de la couleur d'arrière-plan et du niveau,
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 racine potentielle est un contenu multimédia non dimensionné. Pour savoir comment résoudre ce problème, consultez Optimiser le décalage de mise en page cumulé.
Comprendre le score des décalages 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 la page entière est décalée, le score maximal de chaque décalage de mise en page est de 1. Dans notre exemple, le premier changement de mise en page a obtenu un score de 0.15. Le deuxième décalage de mise en page a obtenu un score de 0.041.
Le score total de cette fenêtre de session est 0.19. D'après le seuil CLS, il doit être amélioré. La couleur d'arrière-plan de la fenêtre de session est identique.
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 la piste réseau pour afficher toutes les activités du réseau et 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, puis cliquer sur chaque élément pour en afficher les détails.
Afficher l'activité du GPU
Affichez l'activité GPU dans le canal GPU. La piste 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 le temps utilisateur et visualiser vos temps avec le suivi Durée. 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 le temps utilisateur:
- Marquez des lieux dans votre application avec
performance.mark(). - Mesurez le temps écoulé entre les repères avec
performance.measure(). - Enregistrez vos performances.
- Consultez les mesures sur le canal Durée. Si le titre ne s'affiche pas, consultez Temps utilisateur dans les paramètres.
- Pour afficher les détails, cliquez sur le temps de 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.