Découvrez les problèmes de performances d'affichage grâce à cette documentation de référence sur les options de performances de l'onglet Affichage.
Mettre en évidence les zones repeintes avec du clignotement de peinture
Lorsque cette option est activée, Chrome fait clignoter l'écran en vert chaque fois qu'un repeinture est effectuée.
Pour afficher les zones en cours de repeindre:
- Ouvrez l'onglet Rendu dans cette démonstration et cochez Paint flashing (Clignotement de la peinture).
- Observez le repeinture surligné en vert.
Si, sur une autre page, vous voyez clignoter entièrement en vert ou des zones de l'écran qui ne devraient pas être peintes, nous vous conseillons de chercher une solution.
Mettre en surbrillance les régions avec un décalage de mise en page
Les changements de mise en page entraînent des repeintures inattendues et peuvent être non seulement agaçants, mais nuisibles.
Pour afficher l'emplacement et l'heure des décalages de mise en page sur une page:
Ouvrez l'onglet Rendu, puis cochez la case Layout Shift Regions.
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 tuiles avec leurs bordures
L'option Bordures du calque permet d'afficher, en haut de la page, une superposition de bordures et de tuiles de calque.
Pour activer les bordures des calques:
- Ouvrez l'onglet Rendering (Rendu), puis cochez la case Layer Borders (Bordures du calque).
- Observez les bordures des calques en orange et en olive et les tuiles en cyan.
Pour en savoir plus sur les codes couleur, consultez les commentaires dans debug_colors.cc.
Affichez les images par seconde en temps réel avec les statistiques de rendu des images
Les statistiques de rendu des frames sont une superposition qui apparaît dans l'angle supérieur droit de la fenêtre d'affichage.
Pour ouvrir les statistiques de rendu des frames:
- Ouvrez l'onglet Rendu, puis cochez la case Statistiques de rendu des frames.
- Observez les statistiques dans l'angle supérieur droit de la page.
La superposition Statistiques de rendu des images indique:
- Estimation en temps réel du nombre d'images par seconde lorsque la page s'exécute.
- Chronologie de frames sous forme de tracé avec trois types de frames :
- Les images ont bien été affichées (lignes bleues)
- Images partiellement présentées (lignes jaunes)
- Cadres supprimés (lignes rouges)
- État de la trame GPU: activé ou désactivé. Pour en savoir plus, consultez la section Comment obtenir la rastérisation GPU.
- Utilisation de la mémoire GPU: nombre de Mo de mémoire utilisés et maximum.
Identifier les problèmes de performances de défilement
Utilisez les problèmes de performances de défilement pour identifier les éléments de la page qui ont 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 Rendering (Rendu), puis cochez la case Scrolling Performance Issues (Problèmes de performances de défilement).
- Observez les éléments mis en surbrillance et potentiellement problématiques.
Afficher les métriques 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.
Les Core Web Vitals sont un sous-ensemble de métriques Web Vitals qui 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 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 suivant le début du chargement de la page.
- Interaction to Next Paint (INP): mesure l'interactivité. Pour offrir une bonne expérience utilisateur, l'INP des pages doit être inférieur ou égal à 200 millisecondes.
- Cumulative Layout Shift (CLS): mesure la stabilité visuelle. Pour offrir une bonne expérience utilisateur, les pages doivent conserver un CLS de 0.1. ou moins.
Utilisez l'extension Chrome Web Vitals pour afficher les valeurs Core Web Vitals de votre page.