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.
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 une analyse basée sur des 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 Informations sur les performances met en évidence les insights clés du volet Insights, avec 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 des pages à l'aide du panneau Informations sur les performances. Poursuivez la lecture ou visionnez la version vidéo du tutoriel ci-dessus.
Ouvrir le panneau "Insights sur les performances"
- Ouvrez les outils de développement.
Cliquez sur Plus d'options > Plus d'outils > Informations sur les performances.
Vous pouvez également utiliser le menu de commandes pour ouvrir le panneau Informations sur les performances.
Enregistrer vos performances
Le panneau Informations sur les performances peut enregistrer les 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 hex (Ralentissement 4x) 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 le chargement de la page.
Revoir un enregistrement de performance
Utilisez les commandes situées en bas pour contrôler la lecture de votre enregistrement.
Voici un exemple.
- 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 font automatiquement un zoom arrière pour afficher la chronologie d'enregistrement complète. Vous pouvez parcourir l'enregistrement avec un zoom et déplacer la timeline.
Pour zoomer sur la timeline et la déplacer vers la droite ou la gauche, 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, le zoom s'effectue en fonction de 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 des raccourcis clavier. Cliquez sur le bouton pour afficher les raccourcis.
Lorsque vous utilisez des raccourcis, vous effectuez un zoom en fonction du curseur de votre souris.
Afficher les insights sur les performances
Obtenez la liste des insights sur les performances dans le volet Insights. Identifiez et corrigez les problèmes de performances potentiels.
Pointez sur chacune des informations pour les mettre en évidence dans les canaux principaux.
Cliquez sur un insight (par exemple, la demande qui bloque l'affichage) pour l'ouvrir dans le volet Détails. Pour mieux comprendre le problème, consultez les sections Fichier, Problème, Résolution, etc.
Afficher les métriques de performances des signaux Web
Web Vitals est une initiative de Google visant à unifier les signaux de qualité essentiels pour offrir une expérience utilisateur de qualité sur le Web.
Vous pouvez consulter 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étecter les retards du plus grand élément Contentful Paint
La métrique Largest Contentful Paint (LCP) est l'une des métriques Core Web Vitals. Elle indique le délai d'affichage du plus grand bloc de texte ou image 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 le plus grand élément Contentful Paint de votre page met plus de temps à s'afficher, le badge LCP s'affichera dans la timeline 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 de ces retards et vous suggérer des solutions.
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 bloquant 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 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 de document HTML. |
| Délai de chargement des ressources | Delta 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, dans le cas où 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 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. Cet exemple comporte 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 grande 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 possibles 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 la page Optimize Cumulative Layout Shift.
Comprendre le score des 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). La partie Window (Fenêtre) indique à quelle fenêtre de session 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 décalage de mise en page a obtenu le score 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. 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 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é 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
Affichez l'activité de rendu dans le canal de 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é GPU
Affichez l'activité GPU dans le canal GPU. La piste GPU est masquée par défaut. Pour l'activer, cochez GPU dans Paramètres.
Afficher le temps utilisateur
Pour obtenir des mesures de performances personnalisées, vous pouvez utiliser le temps utilisateur et visualiser vos temps avec le canal Durée. Pour en savoir plus, consultez 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 marques avec
performance.measure(). - Enregistrez vos performances.
- Affichez les mesures sur le canal Durée. Si le titre ne s'affiche pas, vérifiez le 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 trajectoires, cliquez sur l'icône Paramètres du panneau et cochez les options que vous préférez.
Exporter un enregistrement
Pour sauvegarder un enregistrement, cliquez sur Export (Exporter) .
Importer un enregistrement
Pour charger un enregistrement, sélectionnez Import (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.