Utilisez le panneau Insights sur les performances pour obtenir des insights exploitables et axés sur les cas d'utilisation concernant 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.
- Affichez les métriques de performances Web Vitals.
- Consultez 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 problèmes rencontrés par les développeurs lorsqu'ils utilisent le panneau Performances existant :
- Les informations étaient trop nombreuses. Avec la nouvelle interface utilisateur, le panneau Insights sur les performances simplifie les données et n'affiche que les informations pertinentes.
- Difficulté à distinguer les cas d'utilisation : Le panneau Informations sur les performances permet d'effectuer des analyses axé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 cas d'utilisation seront ajoutés à l'avenir en fonction de vos commentaires, par exemple l'interactivité.
- Nécessite une connaissance approfondie du fonctionnement des navigateurs pour être utilisé efficacement. Le panneau Insights sur les performances met en évidence les principaux insights du panneau Insights et fournit des conseils 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"
- Ouvrez les outils de développement.
Cliquez sur Autres options > Plus d'outils > Insights sur les performances.
Vous pouvez également utiliser le menu de commandes pour ouvrir le panneau Informations sur les performances.
Enregistrer les performances
Le panneau Informations sur les performances peut enregistrer les performances générales et celles axées sur les cas d'utilisation (par exemple, le chargement de 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 Disable cache (Désactiver le cache) et définissez CPU (Processeur) sur 4x slowdown (Ralentissement x4) dans le menu déroulant :
Cliquez sur Mesurer le chargement de la page. Les outils de développement enregistrent les métriques de performances pendant le rechargement de la page, puis arrêtent automatiquement l'enregistrement quelques secondes après la fin du chargement de la page.
Relire un enregistrement de performance
Utilisez les commandes en bas de l'écran pour contrôler la lecture de votre enregistrement.
Voici un exemple de la marche à suivre.
- Cliquez sur Lire pour lire l'enregistrement.
- Cliquez sur Suspendre pour mettre en pause la rediffusion.
- Ajustez la vitesse de lecture à l'aide du menu déroulant.
- Cliquez sur Afficher/Masquer l'aperçu visuel pour afficher ou masquer l'aperçu visuel.
Parcourir un enregistrement de performances
Les outils de développement effectuent automatiquement un zoom arrière pour afficher l'intégralité du calendrier d'enregistrement. Vous pouvez parcourir l'enregistrement en zoomant et en déplaçant la timeline.
Pour faire un zoom avant ou arrière et déplacer la timeline vers la gauche ou la droite, utilisez les boutons de navigation correspondants :
- Cliquez sur la timeline pour déplacer la tête de lecture et afficher une image spécifique.
- Cliquez sur les commandes Zoom avant et Zoom arrière en bas de l'écran pour zoomer. Dans ce cas, vous effectuez un zoom en fonction de la tête de lecture.
- Faites glisser la barre de défilement horizontale en bas de l'écran pour déplacer la timeline 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, le zoom est basé sur le curseur de votre souris.
Afficher les insights sur les performances
Obtenez la liste des 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 évidence dans les pistes principales.
Cliquez sur un insight, par exemple la requête bloquant l'affichage, pour l'ouvrir dans le volet Détails. Pour mieux comprendre 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.
Découvrir les délais du Largest Contentful Paint
La métrique Largest Contentful Paint (LCP) fait partie des 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 est de 2,5 secondes ou moins.
Si le plus grand élément de contenu de votre page met plus de temps à s'afficher, le badge LCP sera accompagné d'un carré jaune ou d'un triangle rouge dans la chronologie.
Pour ouvrir le volet Détails, cliquez sur le badge LCP dans la timeline ou dans le volet Insights à droite. Dans le volet, vous pouvez découvrir les causes potentielles des retards et des suggestions pour les résoudre.
Dans cet exemple, une requête bloque le rendu. 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-parties du temps de rendu LCP, faites défiler la page jusqu'à la section Détails > Répartition des temps.
Le temps de rendu 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 celui 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 au chargement de la ressource LCP elle-même. |
| Délai d'affichage de l'élément | Delta entre le moment où la ressource LCP finit de se charger et celui 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 la durée de chargement de la ressource sont omis. Par exemple, si l'élément est un nœud de texte rendu 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 la piste Changements de mise en page.
Les décalages de mise en page sont regroupés dans une fenêtre de session. Dans l'exemple, il existe deux fenêtres de session. Les fenêtres de session sont séparées par des intervalles.
Le Cumulative Layout Shift (CLS) 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 des décalages de mise en page.
Lorsque vous améliorez la métrique CLS, commencez toujours par la fenêtre de session la plus grande. Dans notre exemple, la fenêtre de session 1 est la plus grande, en fonction 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 potentielle est unsized media (média sans taille). Pour savoir comment résoudre ce problème, consultez Optimiser le Cumulative Layout Shift.
Comprendre le score de décalage de mise en page
Pour comprendre comment les scores sont calculés, utilisez la section Période du volet Détails. La fenêtre indique à quelle fenêtre de session appartient le décalage de mise en page actuel.
Si toute la page est décalée, le score maximal de chaque décalage de mise en page est de 1. Dans notre exemple, le premier décalage 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 pour cette fenêtre de session est de 0.19. En fonction du seuil CLS, elle doit être améliorée. La couleur d'arrière-plan de la fenêtre de session reflète cette même couleur.
Le graphique d'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 la piste Réseau. Vous pouvez développer la piste réseau pour afficher toutes les activités réseau et cliquer sur chaque élément pour afficher les détails.
Afficher l'activité du moteur de rendu
Affichez l'activité de rendu dans la piste Renderer. Vous pouvez développer chaque 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 la piste GPU. La piste GPU est masquée par défaut. Pour l'activer, cochez GPU dans Paramètres.
Afficher les temps utilisateur
Pour obtenir des mesures de performances personnalisées, vous pouvez utiliser User Timing et visualiser vos timings avec la piste Timing. Pour en savoir plus, consultez l'API User Timing.
Consultez cette page de démonstration qui calcule le temps écoulé pour 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 la piste Timing. Si vous ne voyez pas la piste, vérifiez les temps utilisateur dans Paramètres.
- Pour afficher les détails, cliquez sur le timing 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.