Découvrez les problèmes de performances d'affichage grâce à cette référence des options liées aux performances dans l'onglet Affichage.
Mettre en évidence les zones repeintes avec des clignotements
Lorsque cette option est activée, Chrome clignote l'écran en vert chaque fois qu'une nouvelle peinture est appliquée.
Pour afficher les zones en cours de repeinture :
- Ouvrez l'onglet Rendering (Rendu) dans cette démonstration et cochez la case Paint flashing (Clignotement de la peinture).
- Observez l'opération de repeinture mise en évidence en vert.
Si, sur une autre page, la totalité de l'écran clignote en vert ou des zones de l'écran que vous ne pensiez pas peindre, nous vous conseillons de poursuivre vos recherches.
Mettre en évidence les zones déplacées dans la mise en page
Les décalages de mise en page entraînent des recolorations inattendues et peuvent être non seulement gênants, mais aussi nuisibles.
Pour afficher l'emplacement et le moment des changements de mise en page sur une page :
Ouvrez l'onglet Rendu et cochez Régions avec décalage de mise en page.
Actualisez la page. Certaines zones du décalage de mise en page sont brièvement mises en surbrillance violette.
Afficher les calques et les tuiles avec des bordures de calque
Utilisez l'option Bordures des calques pour afficher une superposition des bordures des calques et des tuiles en haut de la page.
Pour activer les bordures des calques :
- Ouvrez l'onglet Rendering (Rendu) et cochez Layer Borders (Bordures de calque).
- Observez les bordures des calques en orange et olive, et les tuiles en cyan.
Pour en savoir plus sur les codes couleur, consultez les commentaires dans debug_colors.cc.
Afficher le nombre d'images par seconde en temps réel avec les statistiques de rendu des images
Les statistiques sur le rendu des images s'affichent en superposition dans l'angle supérieur droit de votre fenêtre d'affichage.
Pour ouvrir la page Statistiques de rendu des images:
- Ouvrez l'onglet Rendering (Rendu) et cochez la case Frame rendering stats (Statistiques de rendu des frames).
- Consultez les statistiques en haut à droite de la page.
La superposition Statistiques de rendu d'image affiche les éléments suivants :
- Estimation en temps réel du nombre d'images par seconde lors de l'exécution de la page.
- Chronologie des cadres sous forme de graphique avec trois types de cadres :
- Frames correctement affichés (lignes bleues)
- Cadres partiellement présentés (lignes jaunes)
- Cadres supprimés (lignes rouges).
- État de la trame GPU: activé ou désactivé. Pour en savoir plus, consultez Comment obtenir une rastérisation GPU.
- Utilisation de la mémoire GPU: nombre de Mo de mémoire utilisés et nombre maximal de Mo.
Identifier les problèmes de performances de défilement
Utilisez Problèmes de performances de défilement pour identifier les éléments de la page qui comportent des écouteurs d'événements liés au défilement susceptibles de nuire aux performances de la page.
Pour afficher les éléments potentiellement problématiques:
- Ouvrez l'onglet Affichage et cochez Problèmes de performances de défilement.
- Observez les éléments potentiellement problématiques mis en surbrillance.
Afficher les métriques Core 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.
Les Core Web Vitals constituent un sous-ensemble de signaux Web qui s'appliquent à toutes les pages Web. Chacune des métriques Core Web Vitals représente une facette distincte de l'expérience utilisateur, est mesurable sur le terrain et reflète l'expérience réelle d'un résultat critique centré sur l'utilisateur. Les métriques Core Web Vitals sont les suivantes :
- Largest Contentful Paint (LCP) : mesure les performances de chargement. Pour offrir une bonne expérience utilisateur, le LCP doit se produire dans les 2,5 secondes à compter du début du chargement de la page.
- Interaction to Next Paint (INP): mesure l'interactivité. Pour offrir une bonne expérience utilisateur, les pages doivent avoir un INP inférieur ou égal à 200 millisecondes.
- Cumulative Layout Shift (CLS): mesure la stabilité visuelle. Pour offrir une bonne expérience utilisateur, les pages doivent maintenir un CLS de 0,1 ou moins.
Utilisez l'extension Chrome Web Vitals pour afficher les valeurs Core Web Vitals de votre page.