Identifier des opportunités d'amélioration de l'expérience utilisateur grâce aux outils Web de Chrome
Publié le 11 mai 2021
Aujourd'hui, nous allons vous présenter les nouvelles fonctionnalités des outils Lighthouse, PageSpeed et DevTools pour vous aider à identifier les améliorations possibles pour votre site en termes de signaux Web Vitals.
Pour rappel, Lighthouse est un outil automatisé Open Source qui permet d'améliorer la qualité des pages Web. Vous le trouverez dans la suite d'outils de débogage Chrome DevTools et pourrez l'exécuter sur n'importe quelle page Web, publique ou nécessitant une authentification. Vous pouvez également trouver Lighthouse dans PageSpeed Insights, CI et WebPageTest.
Lighthouse 7.x inclut de nouvelles fonctionnalités, comme les captures d'écran d'éléments, pour une inspection visuelle plus facile des parties de votre UI qui ont un impact sur les métriques d'expérience utilisateur (par exemple, les nœuds qui contribuent au décalage de mise en page).
Nous avons également ajouté la prise en charge des captures d'écran d'éléments dans PageSpeed Insights, ce qui permet de repérer plus facilement les problèmes lors d'exécutions ponctuelles des performances des pages.
Mesurer les Core Web Vitals
Lighthouse peut mesurer synthétiquement les métriques Core Web Vitals, y compris le Largest Contentful Paint, le Cumulative Layout Shift et le Total Blocking Time (proxy de laboratoire pour le First Input Delay). Ces métriques reflètent le chargement, la stabilité de la mise en page et la préparation à l'interaction. D'autres métriques telles que la première peinture avec contenu, mise en avant dans l'avenir des Core Web Vitals, sont également disponibles.
La section "Métriques" du rapport Lighthouse inclut des versions de laboratoire de ces métriques. Vous pouvez l'utiliser comme vue récapitulative des aspects de l'expérience utilisateur qui nécessitent votre attention.
Les métriques de champ, comme celles du rapport d'expérience utilisateur Chrome ou de la RUM, ne présentent pas cette limite et constituent un complément précieux aux données de laboratoire, car elles reflètent l'expérience des utilisateurs réels. Les données sur le terrain ne peuvent pas fournir les types d'informations de diagnostic que vous obtenez en laboratoire. Les deux vont donc de pair.
Identifier les points à améliorer pour les métriques Web Vitals
Identifier l'élément "Largest Contentful Paint"
Le LCP mesure l'expérience de chargement perçue. Il marque le point pendant le chargement de la page où le contenu principal (ou le plus volumineux) a été chargé et est visible par l'utilisateur.
Lighthouse propose un audit "Élément identifié comme "Largest Contentful Paint" (Élément identifié comme "Largest Contentful Paint") qui identifie l'élément qui a été identifié comme "Largest Contentful Paint". Si vous pointez sur l'élément, il est mis en surbrillance dans la fenêtre principale du navigateur.
Si cet élément est une image, ces informations vous indiquent que vous pouvez optimiser le chargement de cette image. Lighthouse inclut un certain nombre d'audits d'optimisation des images pour vous aider à déterminer si vos images peuvent être mieux compressées, redimensionnées ou diffusées dans un format d'image moderne plus optimal.
Le bookmarklet LCP d'Annie Sullivan peut également vous aider à identifier rapidement l'élément LCP à l'aide d'un rectangle rouge en un seul clic.
Précharger les images découvertes tardivement pour améliorer le LCP
Pour améliorer le Largest Contentful Paint, préchargez vos images principales critiques si elles sont découvertes tardivement par le navigateur. Une découverte tardive peut se produire si un bundle JavaScript doit être chargé avant que l'image ne soit détectable.
Nous recevons régulièrement des questions sur le préchargement des images du LCP. Il peut être utile de les aborder brièvement.
Pouvez-vous précharger des images responsives ? Oui.
Imaginons que nous ayons une image hero responsive, comme spécifié à l'aide de srcset et sizes ci-dessous:
<img src="lighthouse.jpg"
srcset="lighthouse_400px.jpg 400w,
lighthouse_800px.jpg 800w,
lighthouse_1600px.jpg 1600w" sizes="50vw" alt="A helpful
Lighthouse">
Grâce aux attributs imagesrcset et imagesizes ajoutés à l'attribut link, nous pouvons précharger une image responsive à l'aide de la même logique de sélection d'images utilisée par srcset et sizes:
<link rel="preload" as="image" href="lighthouse.jpg"
imagesrcset="lighthouse_400px.jpg 400w,
lighthouse_800px.jpg 800w,
lighthouse_1600px.jpg 1600w"
imagesizes="50vw">
L'audit met-il également en évidence les opportunités de préchargement si l'image LCP est définie via un arrière-plan CSS ? Oui.
Toute image signalée comme image LCP, que ce soit via un arrière-plan CSS ou <img>, est une candidate si elle est détectée à une profondeur de cascade de trois ou plus.
Chargement différé des images hors écran et évitement de cette pratique pour le LCP
Les images hors écran qui ne sont pas essentielles à l'expérience utilisateur initiale peuvent être chargées de manière différée. Il s'agit d'une technique qui diffère le téléchargement d'une image jusqu'à ce qu'un utilisateur fasse défiler la page à proximité. Cela peut réduire les conflits réseau pour les éléments critiques et, dans certains cas, améliorer le LCP. L'audit "Différer les images hors écran" peut vous aider:
Les images critiques au-dessus de la ligne de flottaison, telles que l'image Largest Contentful Paint, ne doivent pas être chargées de manière différée. Cela peut retarder le chargement de l'image LCP. Lighthouse indique si une image LCP est chargée de manière incorrecte en différé via l'audit "L'image Largest Contentful Paint a eu un chargement différé" :
Identifier les contributions au CLS
Le CLS mesure la stabilité visuelle. Elle quantifie l'ampleur des déplacements visuels du contenu d'une page. Lighthouse propose un audit de débogage du CLS appelé "Éviter les grands décalages de mise en page".
Cet audit met en évidence les éléments DOM qui contribuent le plus aux décalages de la page. Dans la colonne "Élément" à gauche, vous trouverez la liste de ces éléments DOM, et à droite, leur contribution globale au CLS.
Grâce à la nouvelle fonctionnalité de capture d'écran des éléments Lighthouse, nous pouvons à la fois afficher un aperçu visuel des principaux éléments notés dans l'audit et cliquer pour zoomer pour une vue plus claire:
Pour le CLS post-chargement, il peut être utile de visualiser de manière persistante à l'aide de rectangles les éléments qui ont le plus contribué au CLS. Il s'agit d'une fonctionnalité que vous trouverez dans des outils tiers tels que le tableau de bord Core Web Vitals de SpeedCurve. J'aime utiliser le générateur de GIF de décalage de mise en page de Defaced pour:
Pour obtenir une vue d'ensemble des problèmes de décalage de mise en page sur l'ensemble du site, je me sers beaucoup du rapport Core Web Vitals de la Search Console. Cela me permet de voir les types de pages de mon site présentant un CLS élevé (ce qui m'aide à identifier les parties de modèle sur lesquelles je dois me concentrer):
Identifier le CLS à partir d'images sans dimensions
Pour limiter le décalage de mise en page cumulatif causé par des images sans dimensions, incluez des attributs de taille de largeur et de hauteur sur vos images et éléments vidéo. Cette approche garantit que le navigateur peut allouer la quantité d'espace appropriée dans le document pendant le chargement de l'image.
Consultez Définir la hauteur et la largeur des images est à nouveau important pour en savoir plus sur l'importance de réfléchir aux dimensions et au format des images.
Identifier les CLS à partir des annonces
Annonces de l'éditeur pour Lighthouse vous permet de trouver des opportunités d'améliorer l'expérience de chargement des annonces sur votre page, y compris les contributions au changement de mise en page et aux tâches longues qui peuvent retarder la disponibilité de votre page pour les utilisateurs. Dans Lighthouse, vous pouvez activer cette fonctionnalité via les plug-ins de la communauté.
N'oubliez pas que les annonces sont l'un des principaux facteurs de modification de la mise en page sur le Web. Il est important de:
- Placer des annonces non persistantes en haut de la fenêtre d'affichage
- Évitez les décalages en réservant la plus grande taille possible pour l'espace publicitaire.
Éviter les animations non composées
Les animations non composées peuvent sembler saccadées sur les appareils d'entrée de gamme si des tâches JavaScript lourdes occupent le thread principal. Ces animations peuvent entraîner des décalages de mise en page.
Si Chrome détecte qu'une animation n'a pas pu être composée, il le signale à une trace DevTools que Lighthouse lit, ce qui lui permet de lister les éléments avec des animations qui n'ont pas été composés et pour quelle raison. Vous les trouverez dans l'audit Éviter les animations non composées.
Déboguer First Input Delay / Total Blocking Time / Long Tasks
La métrique First Input mesure le délai entre le moment où un utilisateur interagit pour la première fois avec une page (par exemple, lorsqu'il clique sur un lien, appuie sur un bouton ou utilise une commande JavaScript personnalisée) et le moment où le navigateur est réellement en mesure de commencer à traiter les gestionnaires d'événements en réponse à cette interaction. Les tâches JavaScript longues peuvent avoir un impact sur cette métrique et sur son proxy, le temps de blocage total.
Lighthouse inclut un audit Éviter les tâches longues dans le thread principal qui liste les tâches les plus longues du thread principal. Cela peut vous aider à identifier les éléments qui entraînent le plus de retard. Dans la colonne de gauche, vous pouvez voir l'URL des scripts responsables des tâches longues du thread principal.
Sur la droite, vous pouvez voir la durée de ces tâches. Pour rappel, les tâches longues sont des tâches qui s'exécutent pendant plus de 50 millisecondes. Cela est considéré comme bloquant le thread principal suffisamment longtemps pour avoir un impact sur la fréquence d'images ou la latence d'entrée.
Si vous envisagez d'utiliser des services tiers pour la surveillance, j'aime aussi la chronologie d'exécution du thread principal de Calibre pour visualiser ces coûts, qui met en évidence les tâches parent et enfant qui contribuent aux tâches longues qui affectent l'interactivité.
Bloquer les requêtes réseau pour voir l'impact avant/après dans Lighthouse
Chrome DevTools permet de bloquer les requêtes réseau pour voir l'impact de la suppression ou de l'indisponibilité de ressources individuelles. Cela peut être utile pour comprendre l'impact des scripts individuels (par exemple, les implémentations ou les outils de suivi tiers) sur des métriques telles que le temps de blocage total (TBT) et le temps de réponse.
Le blocage des requêtes réseau fonctionne également avec Lighthouse. Voyons rapidement le rapport Lighthouse pour un site. Le score de performances est de 63/100 avec un TBT de 400 ms. En examinant le code, nous constatons que ce site charge un polyfill Intersection Observer dans Chrome, ce qui n'est pas nécessaire. Bloquez-le !
Nous pouvons effectuer un clic droit sur un script dans le panneau "Réseau" des outils de développement, puis cliquer sur Block Request URL pour le bloquer. Nous allons le faire ici pour le polyfill Intersection Observer.
Nous pouvons ensuite relancer Lighthouse. Cette fois, nous pouvons constater que notre score de performances s'est amélioré (70/100), tout comme le temps de blocage total (400 ms => 300 ms).
Remplacer les intégrations tierces coûteuses par une façade
Il est courant d'utiliser des ressources tierces pour intégrer des vidéos, des posts sur les réseaux sociaux ou des widgets dans des pages. Par défaut, la plupart des éléments intégrés se chargent immédiatement et peuvent être associés à des charges utiles coûteuses qui ont un impact négatif sur l'expérience utilisateur. Cela est inutile si le tiers n'est pas essentiel (par exemple, si l'utilisateur doit faire défiler l'écran avant de le voir).
Pour améliorer les performances de ces widgets, vous pouvez les charger de manière différée lors de l'interaction de l'utilisateur. Pour ce faire, affichez un aperçu léger du widget (une façade) et ne chargez la version complète que si un utilisateur interagit avec celui-ci. Lighthouse propose un audit qui recommande les ressources tierces pouvant être chargées en différé avec une façade, comme les vidéos YouTube intégrées.
Pour rappel, Lighthouse met en évidence le code tiers qui bloque le thread principal pendant plus de 250 ms. Cela peut exposer tous types de scripts tiers (y compris ceux créés par Google) qui peuvent être mieux différés ou chargés de manière paresseuse si leur rendu nécessite un défilement pour être vu.
Au-delà des Core Web Vitals
En plus de mettre en avant les métriques Core Web Vitals, les versions récentes de Lighthouse et PageSpeed Insights tentent également de fournir des conseils concrets à suivre pour améliorer la vitesse de chargement des applications Web axées sur JavaScript si vous avez activé les cartes sources.
Ils incluent une collection croissante d'audits visant à réduire le coût du code JavaScript sur votre page, par exemple en réduisant la dépendance aux polyfills et aux doublons qui peuvent ne pas être nécessaires pour l'expérience utilisateur.
Pour en savoir plus sur les outils Core Web Vitals, consultez le compte Twitter de l'équipe Lighthouse et What's new in DevTools (Nouveautés dans DevTools).
Image héros par Mercedes Mehling sur Unsplash.