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 surbrillance les zones repeintes avec un clignotement de la peinture
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) de cette démonstration, puis cochez Paint flashing (Clignotement de la peinture).
- Observez la nouvelle peinture en vert.
Si, sur une autre page, l'ensemble de l'écran clignote en vert ou que des zones de l'écran que vous pensiez ne pas devoir peindre sont peintes, envisagez d'examiner plus en détail.
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 Rendering (Rendu) et cochez Layout Shift Regions (Régions de décalage de mise en page).
Actualisez la page. Les zones de décalage de mise en page sont brièvement mises en surbrillance en violet.
Afficher les calques et les cartes avec des bordures
Utilisez Bordures de calque pour afficher une superposition de bordures de calque et de tuiles au-dessus 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 le codage couleur, consultez les commentaires dans debug_colors.cc.
Afficher les images par seconde en temps réel avec les statistiques de rendu des frames
Les statistiques de rendu des frames sont une superposition qui s'affiche en haut à droite de votre vue.
Pour ouvrir les statistiques de rendu d'image:
- Ouvrez l'onglet Rendering (Rendu) et cochez la case Frame rendering stats (Statistiques de rendu des frames).
- Examinez 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 pendant l'exécution de la page.
- Chronologie des cadres sous forme de graphique avec trois types de cadres :
- Frames correctement affichés (lignes bleues)
- Frames partiellement présentés (lignes jaunes)
- Images manquantes (lignes rouges)
- État de la rastérisation du GPU: activée ou désactivée. Pour en savoir plus, consultez Obtenir la rastérisation du GPU.
- Utilisation de la mémoire GPU: nombre de Mo de mémoire utilisés et maximum.
Identifier les problèmes de performances du 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 qui peuvent nuire aux performances de la page.
Pour afficher les éléments potentiellement problématiques:
- Ouvrez l'onglet Rendu, puis cochez Problèmes de performances du défilement.
- Observez les éléments potentiellement problématiques mis en surbrillance.
Afficher les 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 métriques Core Web Vitals sont un sous-ensemble de signaux Web. Elles s'appliquent à toutes les pages Web. Chacune des métriques Core Web Vitals représente un aspect distinct de l'expérience utilisateur, est mesurable sur le terrain et reflète l'expérience réelle d'un résultat essentiel axé 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.