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 contient les versions expérimentales 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 de terrain ne peuvent pas fournir les types d'informations de diagnostic que vous obtenez dans l'atelier, 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 lors du chargement de la page lorsque le contenu principal (ou "plus volumineux") a été chargé et est visible par l'utilisateur.
Lighthouse dispose d'un audit "Largest Contentful Paint" qui identifie l'élément correspondant au plus grand élément 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 LCP Bookmarklet d'Annie Sullivan peut également vous être utile pour identifier rapidement l'élément LCP avec 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.
Certaines questions courantes que nous nous posons sur le préchargement des images LCP peuvent également mériter d'être abordées brièvement.
Pouvez-vous précharger les 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 une <img>, est candidate si elle est découverte avec une profondeur de cascade d'au moins trois.
Chargement différé des images hors écran et évitement de ce type de chargement 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 reporte le téléchargement d'une image jusqu'à ce que l'utilisateur fasse défiler la page à proximité, ce qui peut réduire les conflits sur le réseau pour les ressources 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 le chargement différé d'une image LCP est incorrect via l'audit "Largest Contentful Paint" (image Largest Contentful Paint) :
Identifier les contributions au CLS
Le décalage de mise en page cumulatif est une mesure de 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 verrez la liste de ces éléments DOM et, à droite, leur contribution CLS globale.
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 beaucoup 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 contribuant aux décalages de mise en page sur le Web. Il est important de:
- Soyez prudent lorsque vous placez des annonces non fixes 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 peut réellement commencer à traiter les gestionnaires d'événements en réponse à cette interaction. Les longues tâches JavaScript peuvent avoir une incidence sur cette métrique et sur le proxy associé, à savoir le temps de blocage total.
Lighthouse inclut un audit Éviter les longues tâches du thread principal qui répertorie les tâches les plus longues sur le thread principal. Cela peut être utile pour identifier les facteurs qui contribuent le plus au retard d'entrée. Dans la colonne de gauche, vous pouvez voir l'URL des scripts responsables des tâches longues du thread principal.
À droite, nous pouvons 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. On considère que cela bloque 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
Les outils pour les développeurs Chrome permettent de bloquer les requêtes réseau afin de voir l'impact de la suppression ou de la non-disponibilité de ressources individuelles. Cela peut être utile pour comprendre l'impact des coûts 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. Examinons 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. C'est ce que nous allons faire pour le polyfill "Observateur d'intersection".
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).
Remplacez 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 par exemple les charger en différé lors de l'interaction 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 de vous fournir des conseils concrets pour améliorer la vitesse de chargement des applications Web qui utilisent beaucoup 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.