Publié le 2 avril 2025
Le panneau Performances des outils de développement Chrome est incroyablement puissant. Il contient des données sur presque tous les problèmes possibles liés au comportement d'exécution de votre site. Cette richesse de données peut toutefois être écrasante: de nombreux développeurs peuvent avoir du mal à savoir par où commencer, et même les experts peuvent avoir du mal à isoler un problème particulier dans un chargement de page complexe.
Des outils tels que Lighthouse ont été développés pour y remédier. Ils analysent les traces de performances et fournissent une liste concise des problèmes potentiels et des solutions possibles. Toutefois, cette approche présente également un inconvénient: sans détails, il peut être difficile de voir à quel moment les problèmes se produisent les uns par rapport aux autres. Si vous souhaitez comprendre le contexte de la trace complète, vous devez repartir de zéro dans le panneau "Performances".
La nouvelle barre latérale Insights comble cette lacune en intégrant les insights Lighthouse directement dans le panneau Performances. Les recommandations s'affichent désormais directement dans le panneau lorsque vous examinez une trace. Plus important encore, l'intégration permet aux insights de mettre en évidence des événements et de superposer des explications directement dans la chronologie des performances. Pointez sur un insight pour faire un zoom avant et mettre en évidence les parties pertinentes de la trace, visualiser les chemins critiques ou signaler les goulots d'étranglement des performances dans leur contexte complet.
Utiliser la barre latérale "Insights"
Vous avez peut-être déjà remarqué la nouvelle barre latérale, qui a été ajoutée dans Chrome 131 avec quelques insights initiaux et qui en a reçu d'autres à chaque nouvelle version de Chrome depuis.
Pour l'afficher, cliquez sur Enregistrer dans le panneau "Performances", chargez une URL ou interagissez avec une page, puis arrêtez l'enregistrement. La barre latérale peut être réduite sur le côté gauche du panneau "Performances" si vous l'avez fermée par le passé. Pour l'afficher, cliquez sur le bouton . Une liste d'insights s'affichera pour vous aider à identifier les problèmes de performances.
Comme dans un rapport Lighthouse, la barre latérale affiche un ensemble d'insights sur l'enregistrement que vous venez de réaliser. Elle identifie les problèmes de performances ou d'expérience utilisateur, ou fournit des données pour vous aider à filtrer et à diagnostiquer les problèmes vous-même. En bas de l'écran se trouve une section Insights transmis effondrée, qui contient les insights qui n'ont pas été identifiés comme problématiques pour cet enregistrement, que ce soit parce qu'un problème de performances particulier ne s'est pas produit ou que l'insight n'était tout simplement pas applicable (par exemple, si vous avez effectué une trace des interactions avec la page et que vous n'avez pas navigué).
Enfin, si la trace que vous avez enregistrée inclut des navigations vers plusieurs pages, chaque page dispose de son propre ensemble d'insights que vous pouvez parcourir pour examiner chaque navigation séparément. Cliquez sur l'icône à côté de l'URL. La vue chronologique zoomera sur la partie de la trace qui s'est produite sur cette page.
Insights sur le chargement de la page
Un chargement de page rapide est essentiel pour offrir une bonne expérience utilisateur. Le Largest Contentful Paint (LCP) est la métrique Core Web Vitals qui permet de mesurer le chargement de la page. La barre latérale "Insights" propose des insights dédiés à l'amélioration du LCP, ainsi que des insights sur d'autres aspects du chargement de la page.
Insights sur le LCP
Pour comprendre et améliorer le LCP, il est recommandé de commencer par les phases du LCP, une approche consistant à diviser le temps de chargement de l'élément le plus visible en quatre sous-parties et à les traiter séparément.
Cliquez sur LCP par phase dans l'onglet "Insights" sur la gauche. La répartition du temps passé dans chaque sous-partie s'affiche dans l'onglet "Insights". Pointez ou cliquez sur chaque sous-partie de l'onglet "Insights" pour la mettre en surbrillance ou effectuer un zoom avant sur la timeline des performances afin d'examiner les événements de cette période. Si les données réelles sont activées et que les données de chargement de l'LCP de l'image sont disponibles pour votre site, les valeurs du 75e centile pour les sous-composants seront également incluses dans l'insight.
La détection des requêtes LCP suggère des améliorations pour charger la ressource LCP, l'un des problèmes les plus courants affectant le LCP sur le Web. Il superpose la chronologie avec des annotations qui indiquent quand l'image aurait pu être chargée et la durée de chargement estimée qui aurait pu être économisée.
D'autres insights permettent d'identifier les problèmes au sein des sous-composants du LCP. La latence de la demande de document met en évidence les optimisations potentielles de la requête de navigation envoyée au serveur. Requêtes bloquant le rendu : indique les requêtes qui bloquent le rendu initial de la page jusqu'à ce qu'elles soient terminées, même si le contenu (comme le LCP) est prêt à être affiché.
Insights sur le chargement de la page au-delà du LCP
Des insights supplémentaires vous aident à identifier les problèmes potentiels qui ont un impact sur les performances globales de chargement de la page au-delà du LCP.
L'un des plus grands défis est les performances des ressources tierces. Ils sont souvent nécessaires pour des raisons commerciales, mais les développeurs Web ont peu de contrôle direct sur leurs performances. L'insight Tierces catégorise les ressources et l'activité du processeur par entités first party et tierces, et indique celles qui ont consommé le plus de temps et de ressources. Pointez sur chaque entité pour mettre en surbrillance son activité dans les chronologies des performances et des réseaux. Cet insight fonctionne en tandem avec la case à cocher "Atténuer les tiers" et les nouvelles entrées propriétaires/tiers dans l'onglet "Récapitulatif".
Affichage de la police indique les polices qui auraient pu utiliser font-display: swap ou optional pour ne pas empêcher l'affichage du texte lors du chargement des polices.
L'arborescence des dépendances réseau identifie les longues chaînes de dépendances dans le chargement de votre page, où la ressource A charge la ressource B, qui charge la ressource C, et C est important pour l'apparence ou la fonctionnalité de la page. Chaque requête dépendante peut ajouter une latence importante au chargement de la chaîne complète, en particulier pour les utilisateurs disposant de connexions de mauvaise qualité.
Enfin, pour les ressources d'images, Améliorer la diffusion des images identifie les images qui pourraient être considérablement optimisées, ce qui peut entraîner un temps de téléchargement important pour extraire des octets supplémentaires inutiles.
Insights sur la réactivité
L'Interaction to Next Paint (INP) peut être décomposée en sous-parties, comme le LCP. L'insight INP par phase ajoute des superpositions à la chronologie des performances pour mettre en évidence ces sous-parties, ce qui vous permet de voir leur relation directe avec l'activité du thread principal.
Les interactions qui mettent à jour la page passent souvent beaucoup de temps à recalculer les styles et la mise en page. L'un des meilleurs prédicteurs de la durée de la mise en page et du style est la taille du DOM, à la fois en termes de nombre total de nœuds et de profondeur de l'arborescence. Optimiser la taille du DOM indique la taille du DOM de la page et met en évidence les événements qui ont probablement été aggravés par la grande taille du DOM.
Les reflows forcés alertent sur une menace courante pour la réactivité: les lectures et écritures entrelacées dans le DOM qui nécessitent que le navigateur effectue la mise en page, par exemple en ajoutant de nouveaux éléments au DOM, puis en appelant une fonction DOM qui lit la taille d'un élément à l'écran. Même si vous savez que deux parties du DOM ne se répercutent pas l'une sur l'autre, sans contenant de contenu explicite, le navigateur peut être contraint de recomposer l'intégralité de la page en raison de dépendances inconnues entre les deux.
La plupart des pages sur le Web définissent désormais un volets mobiles explicite, mais si elles ne le font pas, elles risquent de dépenser des centaines de millisecondes supplémentaires à chaque clic pendant que le navigateur attend une entrée supplémentaire possible. L'insight Optimiser la fenêtre d'affichage pour les mobiles vous avertit lorsque la fenêtre d'affichage n'est pas définie correctement.
Enfin, si l'option Activer les statistiques du sélecteur CSS (lent) est sélectionnée, l'insight Coûts des sélecteurs CSS s'affiche, offrant un aperçu des performances de recalcul des styles. Notez que l'option Activer les statistiques du sélecteur CSS (lent), qui doit être activée pour obtenir cet insight, ralentit considérablement les performances des pages.
Informations sur la stabilité de la mise en page
Le décalage de mise en page cumulé (CLS) dispose de son propre tracé "Décalages de mise en page" dans la chronologie. Il affiche les décalages individuels regroupés dans des fenêtres (clusters) de cinq secondes maximum, qui sont utilisés pour calculer le score CLS.
L'insight Principales causes des décalages de mise en page met en évidence le pire cluster de CLS et liste les décalages de mise en page individuels qui le composent. Pointez sur chaque décalage de la liste ou du canal pour afficher une capture d'écran de la page, qui visualise le décalage avec un calque animé.
Conclusion
Les insights visent à exploiter toute la puissance de Lighthouse dans le contexte complet du panneau Performances, afin de rendre les traces plus faciles à comprendre et d'associer les insights aux données dont ils proviennent.
Nous améliorons activement les insights actuels et d'autres sont en cours de développement. Testez la barre latérale "Insights" et dites-nous comment nous pourrions l'améliorer ou quels autres insights vous aimeriez voir.