Trouver des opportunités d'améliorer l'expérience utilisateur avec les outils Web de Chrome
Aujourd'hui, nous allons voir les nouvelles fonctionnalités des outils de Lighthouse, PageSpeed et DevTools pour vous aider à déterminer comment votre site peut améliorer les Signaux Web.
Pour vous rafraîchir la mémoire, Lighthouse est un outil automatisé Open Source qui améliore la qualité des pages Web. Vous la trouverez dans la suite d'outils de débogage Chrome DevTools. Vous pouvez l'exécuter sur n'importe quelle page Web, publique ou nécessitant une authentification. Lighthouse est également disponible dans PageSpeed Insights, CI et WebPageTest.
Lighthouse 7.x inclut de nouvelles fonctionnalités telles que des captures d'écran d'éléments, pour faciliter l'inspection visuelle des parties de votre UI ayant un impact sur les métriques sur l'expérience utilisateur (par exemple, les nœuds qui contribuent au changement de mise en page).
PageSpeed Insights accepte également les captures d'écran des éléments, ce qui permet de détecter plus facilement les problèmes liés aux exécutions ponctuelles des performances des pages.
Mesurer les Signaux Web essentiels
Lighthouse peut mesurer de manière synthétique les métriques Signaux Web essentiels, y compris Largest Contentful Paint, Cumulative Layout Shift et Total Blocking Time (un proxy d'atelier pour First Input Delay). Ces métriques reflètent le chargement, la stabilité de la mise en page et l'aptitude à interagir. D'autres métriques telles que First Contentful Paint mises en avant à l'avenir des Signaux Web essentiels sont également disponibles.
La section "Métriques" du rapport Lighthouse inclut des versions expérimentales de ces métriques. Vous pouvez vous en servir comme une vue récapitulative des aspects de l'expérience utilisateur qui requièrent votre attention.
Les métriques de champ, telles que celles du rapport d'expérience utilisateur Chrome ou du RUM, ne présentent pas cette restriction et constituent un complément précieux aux données de test, car elles reflètent l'expérience des utilisateurs réels. Les données réelles ne peuvent pas fournir les types d'informations de diagnostic que vous obtenez dans l'atelier. Les deux vont donc de pair.
Identifier comment améliorer les Signaux Web
Identifier l'élément Largest Contentful Paint
Le LCP est une mesure de l'expérience de chargement perçue. Lors du chargement de la page, il marque le moment où le contenu principal (ou le plus volumineux) est chargé et est visible par l'utilisateur.
Lighthouse dispose d'un audit "Largest Contentful Paint" qui identifie l'élément concerné par la plus grande peinture contenue. Pointez sur l'élément pour le mettre en surbrillance dans la fenêtre principale du navigateur.
Si cet élément est une image, ces informations constituent un indice utile pour 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 pourraient être mieux compressées, redimensionnées ou livrées dans un format d'image moderne plus optimal.
Le Bookmarklet LCP 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 héros essentielles si elles sont découvertes tard par le navigateur. Une découverte tardive peut se produire si un bundle JavaScript doit être chargé avant que l'image ne soit visible.
Voici quelques questions courantes concernant le préchargement d'images LCP qui méritent peut-être d'être abordées brièvement.
Est-il possible de précharger les images responsives ? Oui.
Supposons que nous ayons une image héros responsive, comme spécifié à l'aide de srcset et sizes, comme indiqué 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'image que celle 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 mettra-t-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 en tant qu'image LCP, que ce soit via un arrière-plan CSS ou <img>, est candidate si elle est découverte avec une profondeur de cascade de trois ou plus.
Chargement différé des images hors écran et éviter cela 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. Cette technique diffère 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 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 dans les cas suivants:
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 incorrectement chargée en différé via l'audit "L'image Largest Contentful Paint a été chargée en différé" :
Identifier les contributions du CLS
Cumulative Layout Shift est une mesure de la stabilité visuelle. Elle quantifie le décalage visuel du contenu d'une page. Lighthouse dispose d'un audit de débogage CLS intitulé "É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 globale au CLS.
Grâce à la nouvelle fonctionnalité de captures d'écran de l'élément Lighthouse, nous pouvons à la fois voir un aperçu visuel des éléments clés notés dans l'audit et cliquer pour zoomer pour obtenir une vue plus claire:
Pour le CLS post-chargement, il peut y avoir une valeur dans la visualisation persistante à l'aide de rectangles, quels éléments ont le plus contribué au CLS. Cette fonctionnalité est disponible dans des outils tiers tels que le tableau de bord Signaux Web essentiels de SpeedCurve. J'adore utiliser le générateur de GIF Layout Shift de Defaced pour:
Pour obtenir une vue d'ensemble des problèmes de décalage de mise en page à l'échelle du site, le rapport "Signaux Web essentiels" de la Search Console est très loin d'être négligeable. Cela me permet d'identifier les types de pages de mon site qui présentent un CLS élevé (dans ce cas, je peux identifier les parties du modèle sur lesquelles je dois passer du temps):
Identifier le CLS d'images sans dimensions
Pour limiter le Cumulative Layout Shift causé par des images sans dimensions, incluez les attributs de largeur et de hauteur sur vos images et vos é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 la section Définir la hauteur et la largeur des images est encore une fois important pour en savoir plus sur l'importance de réfléchir aux dimensions et au format des images.
Identifier le CLS des publicités
Les annonces d'éditeur pour Lighthouse vous permettent d'améliorer l'expérience de chargement des annonces sur votre page, y compris les contributions au décalage de mise en page et les longues tâches susceptibles de retarder le temps d'utilisation de votre page. Dans Lighthouse, vous pouvez activer cette fonctionnalité via les plug-ins de la communauté.
N'oubliez pas que les annonces sont l'un des plus grands facteurs de décalage de mise en page sur le Web. Il est important de:
- Faites attention lorsque vous placez des annonces non fixes en haut de la fenêtre d'affichage
- Éliminez 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 se présenter comme des à-coups sur les appareils bas de gamme si des tâches JavaScript lourdes maintiennent le thread principal occupé. 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 la signale aux outils de développement trace Lighthouse, ce qui lui permet de répertorier les éléments avec 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 / Temps de blocage total / Tâches longues
La première entrée mesure le temps écoulé 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 personnalisée basée sur JavaScript) 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 le proxy de cette métrique, "Total Blocking Time".
Lighthouse inclut un audit Éviter les longues tâches du thread principal qui répertorie les tâches les plus longues du thread principal. Cela peut être utile pour identifier les pires facteurs du délai d'entrée. Dans la colonne de gauche, nous pouvons voir l'URL des scripts responsables de longues tâches 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 qu'il 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 également le calendrier d'exécution du thread principal de Calibre visuel pour visualiser ces coûts, qui met en évidence les tâches parents et enfants contribuant à de longues tâches ayant un impact sur l'interactivité.
Bloquer des 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 le coût des scripts individuels (par exemple, les intégrations ou les outils de suivi tiers) sur des métriques telles que le temps total bloqué (TBT) et le délai avant interactivité.
Le blocage des requêtes réseau fonctionne également avec Lighthouse. Jetons un coup d'œil au rapport Lighthouse pour un site donné. Le score de performance est de 63/100, avec un TTC de 400 ms. En explorant le code, nous constatons que ce site charge un polyfill "Intersection Observer" dans Chrome, ce qui n'est pas nécessaire. bloquons-le !
Nous pouvons effectuer un clic droit sur un script dans le panneau DevTools Network, puis cliquer sur Block Request URL pour le bloquer. Ici, nous allons procéder de cette manière pour le polyfill "Intersection Observer".
Nous pouvons ensuite relancer Lighthouse. Cette fois, nous constatons que notre score de performances s'est amélioré (70/100), tout comme le temps total de blocage (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 intégrations se chargent immédiatement et peuvent être associées à des charges utiles coûteuses qui ont un impact négatif sur l'expérience utilisateur. C'est du gaspillage si le tiers n'est pas essentiel (par exemple, si l'utilisateur doit faire défiler la page avant de le voir).
Pour améliorer les performances de ces widgets, un modèle consiste à les charger en différé lors d'une interaction de l'utilisateur. Pour ce faire, affichez un aperçu léger du widget (une façade) et chargez la version complète uniquement si un utilisateur interagit avec lui. Lighthouse propose un audit qui recommandera des ressources tierces pouvant être chargées de manière différée avec une façade, telles que les intégrations de vidéos YouTube.
Pour rappel, Lighthouse met en surbrillance le code tiers qui bloque le thread principal pendant plus de 250 ms. Cela peut révéler toutes sortes de scripts tiers (y compris ceux créés par Google) qui peuvent valoir la peine d'être reportés ou d'être chargés de manière différée, si leur affichage nécessite un défilement.
Au-delà des Signaux Web essentiels
En plus de mettre en avant les Signaux Web essentiels, les versions récentes de Lighthouse et de PageSpeed Insights visent également à fournir des conseils concrets que vous pouvez suivre pour améliorer la vitesse de chargement des applications Web utilisant beaucoup de JavaScript si vous avez activé les cartes sources.
Ceux-ci incluent un nombre croissant d'audits visant à réduire le coût de JavaScript sur votre page, par exemple la réduction du recours aux polyfills et aux doublons qui ne sont peut-être pas nécessaires pour l'expérience utilisateur.
Pour en savoir plus sur les outils des Signaux Web essentiels, consultez régulièrement le compte Twitter de l'équipe Lighthouse et les nouveautés des outils de développement.
Hero image (Image principale) de Mercedes Mehling sur Unsplash.