Le panneau Performance marque chaque tâche de longue durée par un triangle rouge dans l'angle supérieur droit et un avertissement dans l'onglet Summary (Résumé) pour indiquer les tâches sur le thread principal dont l'exécution prend beaucoup de temps et dont les performances sont lentes:
Dans vos enregistrements de performances, certaines de ces tâches de longue durée peuvent être des événements Recalculer le style. Un événement Recalculer le style permet de suivre le temps nécessaire au navigateur pour effectuer les opérations suivantes:
- Parcourez les éléments DOM sur une page pour trouver toutes les règles de style CSS qui correspondent à un élément donné.
- Calculez le style réel de chaque élément en fonction des règles de style CSS correspondantes.
Les styles CSS doivent être recalculés chaque fois que l'applicabilité des règles CSS a changé, par exemple dans les cas suivants:
- Des éléments sont ajoutés au DOM ou supprimés de celui-ci.
- Les attributs d'un élément sont modifiés, comme la valeur d'un attribut de classe ou d'identifiant.
- L'utilisateur effectue une entrée (par exemple, un mouvement de souris ou un changement de sélection de l'élément), ce qui peut affecter les règles
:hover.
Les événements de longue durée Recalculate Style (Recalculer le style) peuvent provoquer des problèmes de performances et être à l'origine de longs retards de présentation qui affectent l'Interaction to Next Paint (INP) de votre site Web. Si vous identifiez des événements Recalculer le style de longue durée, vous pouvez utiliser l'onglet Statistiques des sélecteurs pour identifier les sélecteurs CSS qui prennent le plus de temps et ralentissent les performances.
L'onglet Statistiques sur les sélecteurs fournit des statistiques sur les sélecteurs de règles CSS impliqués dans un ou plusieurs événements Recalculer le style d'un enregistrement des performances.
Enregistrer une trace des performances avec les statistiques des sélecteurs activées
Pour afficher les statistiques de vos sélecteurs de règle CSS lors d'événements de longue durée Recalculate Style (Recalculer le style), enregistrez une trace des performances en activant le paramètre de capture Selector Stats (Statistiques des sélecteurs).
Pour enregistrer une trace des performances avec des statistiques de sélecteur:
Ouvrez une page Web, la page de démonstration de la galerie photo, par exemple.
Ouvrez les outils de développement et accédez au panneau Performances.
Dans le panneau Performances, cliquez sur le bouton Paramètres Paramètres de capture, puis cochez la case Activer les statistiques du sélecteur CSS.
Cliquez sur radio_button_checked Enregistrer, exécutez le scénario que vous souhaitez améliorer, puis cliquez sur radio_button_checked Arrêter.
Consultez ensuite les statistiques du sélecteur CSS, comme décrit dans les sections suivantes.
Afficher les statistiques sur le sélecteur de règle CSS pour un seul événement
Pour afficher les statistiques des sélecteurs de règles CSS impliqués dans un événement Recalculer le style unique:
Enregistrez une trace des performances avec les statistiques des sélecteurs activées.
Recherchez un événement Recalculer le style dans l'enregistrement des performances, puis cliquez dessus.
Dans la section inférieure du panneau Performances, ouvrez l'onglet Statistiques du sélecteur.
Tableau des sélecteurs CSS dans l'onglet "Statistiques des sélecteurs"
L'onglet Statistiques sur les sélecteurs contient un tableau de sélecteurs CSS. Le tableau affiche les informations suivantes pour chaque sélecteur CSS:
| Colonne | Description |
|---|---|
| Temps écoulé (ms) | Temps passé par le navigateur à correspondre à ce sélecteur CSS. Cette durée est exprimée en millisecondes (ms), où 1 ms correspond à 1/1 000 de seconde. |
| Tentatives de correspondance | Nombre d'éléments que le moteur de navigateur a tenté de faire correspondre à ce sélecteur CSS. |
| Nombre de correspondances | Nombre d'éléments que le moteur de navigateur a mis en correspondance avec ce sélecteur CSS. |
| % de non-correspondances à chemin lent | Ratio entre les éléments qui ne correspondaient pas à ce sélecteur CSS et ceux que le moteur de navigateur a tenté de mettre en correspondance et pour lesquels le moteur de navigateur a dû utiliser un code moins optimisé pour la mise en correspondance. |
| Sélecteur | Sélecteur CSS correspondant. |
| Feuille de style | Feuille de style CSS contenant le sélecteur CSS |
Lorsque vous avez terminé, dans le panneau Performances, ouvrez Paramètres Paramètres de capture et décochez la case Activer les statistiques du sélecteur CSS.
Afficher les statistiques sur le sélecteur de règle CSS pour plusieurs événements
Pour afficher les statistiques globales des sélecteurs de règles CSS impliqués dans plusieurs événements Recalculate Style (Recalculer le style), copiez plusieurs tableaux de statistiques sur les sélecteurs dans une feuille de calcul, comme suit:
Enregistrez une trace des performances avec les statistiques des sélecteurs activées.
Recherchez le premier événement Recalculer le style qui vous intéresse, puis cliquez dessus.
Dans la section inférieure du panneau Performances, ouvrez l'onglet Statistiques du sélecteur.
Effectuez un clic droit sur le sélecteur de tableau de statistiques, puis sélectionnez Copier le tableau.
Collez le tableau dans une feuille de calcul, par exemple Google Sheets.
Répétez les étapes précédentes avec les autres événements Recalculer le style qui vous intéressent.
Lorsque vous avez terminé, dans le panneau Performances, ouvrez Paramètres Paramètres de capture et décochez la case Activer les statistiques du sélecteur CSS.
Afficher les statistiques globales sur le sélecteur de règle CSS pour l'enregistrement complet
Pour afficher les statistiques globales des sélecteurs de règles CSS impliqués dans l'enregistrement des performances:
Enregistrez une trace des performances avec les statistiques des sélecteurs activées.
Cliquez sur une zone vide du graphique de flammes pour désélectionner tout événement pouvant être sélectionné.
Sélectionnez toute la plage d'enregistrement. Pour ce faire, double-cliquez sur le graphique du processeur en haut du panneau Performance.
Dans la section inférieure du panneau Performances, ouvrez l'onglet Statistiques du sélecteur. Une nouvelle ligne s'affiche en haut de l'écran, avec des données sur les totaux pour tous les sélecteurs.
Lorsque vous avez terminé, dans le panneau Performances, ouvrez Paramètres Paramètres de capture et décochez la case Activer les statistiques du sélecteur CSS.
Analyser les statistiques du sélecteur CSS
Pour trier les données du tableau Statistiques sur les sélecteurs par ordre croissant ou décroissant, cliquez sur un en-tête de colonne. Par exemple, pour voir quels sélecteurs CSS prennent le plus de temps, cliquez sur l'en-tête de colonne Temps écoulé (ms).
Pour essayer d'améliorer les performances de votre page Web, concentrez-vous sur les sélecteurs CSS qui:
- Le calcul a pris beaucoup de temps (valeur Temps écoulé (ms) élevée).
- Le navigateur a tenté de trouver une correspondance à de nombreuses reprises (valeur Tentatives de correspondance élevée).
- Le navigateur ne correspondait pas à beaucoup d'éléments (Nombre de correspondances faible par rapport à la valeur Tentatives de correspondance).
- qui présentent un pourcentage élevé de non-correspondances à chemin lent.
Par exemple, dans la capture d'écran précédente:
- Le premier sélecteur CSS (
html body .ps[tooltip...) a nécessité le plus de temps. - Le moteur de navigateur a tenté de faire correspondre ce sélecteur CSS 1 104 fois, mais aucun élément n'a été trouvé.
Par conséquent, ce sélecteur CSS est le premier candidat à essayer d'améliorer.
Essayez de modifier vos sélecteurs CSS afin qu'ils prennent moins de temps pour effectuer des calculs et qu'ils correspondent à moins d'éléments sur la page. La façon d'améliorer vos sélecteurs CSS dépend de votre cas d'utilisation particulier.
Répétez les étapes de ce tutoriel pour vérifier que vos modifications ont permis de réduire la durée de l'événement Recalculer le style dans la colonne Temps écoulé (ms).