Le panneau Insights sur les performances fournit des insights exploitables et basés sur des cas d'utilisation, sur les performances de votre site Web.
Pourquoi un nouveau panneau ?
Le nouveau panneau Insights sur les performances est un test visant à résoudre ces trois problèmes rencontrés par les développeurs lorsque vous utilisez le panneau Performances existant:
- Trop d'informations. 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 Insights sur les performances permet d'effectuer des analyses basées sur des cas d'utilisation. Pour le moment, cette fonctionnalité n'est compatible qu'avec le chargement de page. D'autres fonctionnalités seront ajoutées à l'avenir en fonction de vos commentaires, comme l'interactivité.
- Nécessite une connaissance approfondie de la façon dont les navigateurs sont utilisés pour une utilisation efficace. Le panneau Insights sur les performances met en avant les insights clés du volet Insights et fournit des commentaires exploitables sur la façon de 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. Continuez à lire ou regardez la version vidéo de ce tutoriel ci-dessus.
Ouvrir le panneau "Insights sur les performances"
- Accédez aux outils de développement.
Cliquez sur Plus d'options > Plus d'outils > Insights sur les performances.
Vous pouvez également ouvrir le panneau Insights sur les performances via le menu Commandes.
Enregistrer les performances
Le panneau Insights sur les performances peut enregistrer les performances générales et basées sur les cas d'utilisation (par exemple, le chargement d'une 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 Processeur sur 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 l'actualisation de la page, puis arrêtent automatiquement l'enregistrement quelques secondes après la fin du chargement de la page.
Revoir un enregistrement d'une prestation
Utilisez les commandes en bas pour contrôler la lecture de votre enregistrement.
Voici un exemple de la marche à suivre.
- Cliquez sur Lire pour lire l'enregistrement.
- Cliquez sur Pause (Mettre en pause) pour interrompre la relecture.
- Ajustez la vitesse de lecture à l'aide du menu déroulant.
- Cliquez sur Activer/Désactiver l'aperçu visuel pour l'afficher ou le masquer.
Parcourir un enregistrement de performance
Les outils de développement dézooment automatiquement pour afficher toute la timeline d'enregistrement. Vous pouvez parcourir l'enregistrement à l'aide d'un zoom et déplacer la timeline.
Pour zoomer et déplacer la timeline 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 spécifique.
- 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 basé sur la tête 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 zoomez en fonction du curseur de votre souris.
Afficher les insights sur les performances
Obtenez une liste d'insights sur les performances dans le volet Insights (Insights). Identifiez et corrigez les éventuels problèmes de performances.
Pointez sur chacun des insights pour les mettre en évidence dans les canaux principaux.
Cliquez sur un insight (par exemple, la demande de blocage de l'affichage) pour l'ouvrir dans le volet Détails. Pour mieux comprendre le problème, consultez les sections Fichier, Problème, Résolution du problème, etc.
Afficher les métriques de performances des Core Web Vitals
L'initiative Web Vitals de Google vise à regrouper les signaux de qualité qui sont essentiels pour offrir une expérience utilisateur de qualité sur le Web.
Vous pouvez afficher ces métriques dans les volets Chronologie et Insights.
Pour en savoir plus sur les métriques, pointez sur les insights de la Chronologie.
Découvrir les retards du plus grand composant Contentful Paint
LCP (Largest Contentful Paint) est l'une des métriques du rapport Core Web Vitals. Il indique le temps 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.
Un bon score LCP est de 2,5 secondes ou moins.
Si le rendu le plus grand du contenu Contentful Paint sur votre page prend plus de temps, vous verrez le badge LCP dans la chronologie avec un carré jaune ou un triangle rouge.
Pour ouvrir le volet Details (Détails), cliquez sur le badge LCP dans la chronologie ou dans le volet Insights (Statistiques) à droite. Dans le volet, vous pouvez découvrir les causes potentielles des retards et suggérer des solutions.
Dans cet exemple, une requête bloque le rendu et vous pouvez appliquer des styles critiques de manière intégrée pour corriger le problème. Pour en savoir plus, consultez Supprimer les ressources qui bloquent l'affichage.
Pour afficher les sous-parties du délai d'affichage du LCP, faites défiler la page jusqu'à la section Détails > Répartition du temps.
Le délai d'affichage du LCP se compose des sous-parties suivantes:
| Sous-partie LCP | Description |
|---|---|
| Délai avant le premier octet (TTFB) | Délai 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 des ressources | Delta entre le délai d'affichage total 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 | Delta entre la fin du chargement de la ressource LCP et le rendu complet de l'élément LCP. |
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é liée aux décalages de mise en page
Affichez l'activité liée aux décalages de mise en page dans la piste Layout Shifts.
Les décalages de mise en page sont regroupés dans une fenêtre de session. Dans cet exemple, il y a deux fenêtres de session. Les fenêtres de session présentent des écarts.
Cumulative Layout Shift (CLS) est l'une des métriques Core Web Vitals. Utilisez la piste Changements de mise en page pour identifier les problèmes potentiels et les causes des décalages de mise en page.
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 fenêtre, en fonction de la couleur et du niveau de l'arrière-plan.
Cliquez sur une capture d'écran pour afficher les détails du décalage de mise en page et identifier les causes potentielles du décalage et les éléments concernés.
Dans notre exemple, l'origine potentielle du problème est le format d'écran non dimensionné. Pour savoir comment le résoudre, consultez Optimiser le Cumulative Layout Shift.
Comprendre le score lié aux décalages de mise en page
Pour comprendre comment les scores sont calculés, utilisez la section Window (Fenêtre) du volet Details (Détails). L'option Window (Fenêtre) indique la fenêtre de session à laquelle 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. Compte tenu du seuil CLS, il doit être amélioré. La couleur d'arrière-plan de la fenêtre de session reflète la même couleur.
Le graphique en arrière-plan de la fenêtre de session augmente au fil du temps. Le score cumulé du décalage de mise en page reflète l'augmentation à ce moment précis.
Afficher l'activité réseau
Affichez l'activité du 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 afficher les détails.
Afficher l'activité du moteur de rendu
Affichez l'activité de rendu dans le canal Renderer (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é des GPU dans le canal GPU. Le canal GPU est masqué par défaut. Pour l'activer, cochez la case GPU dans Paramètres.
Afficher le temps utilisateur
Pour obtenir des mesures de performances personnalisées, vous pouvez utiliser le temps utilisateur et les visualiser avec le suivi Durée. Pour en savoir plus, consultez la page sur l'API User Timing.
Consultez cette page de démonstration pour calculer le temps écoulé pour 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 les performances.
- Affichez les mesures sur le canal Durée. Si vous ne voyez pas le titre, consultez Temps utilisateur dans Paramètres.
- Pour afficher les détails, cliquez sur la durée du titre.
Personnaliser l'UI
Pour personnaliser la chronologie et les pistes, cliquez sur l'icône Paramètres du panneau, puis cochez les options de votre choix.
Exporter un enregistrement
Pour sauvegarder un enregistrement, cliquez sur Export (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.