Rechercher des possibilités d'améliorer l'expérience utilisateur avec les outils Web de Chrome.
Aujourd'hui, nous allons aborder les nouvelles fonctionnalités de Lighthouse, de PageSpeed et des outils de développement pour vous aider à déterminer comment votre site peut améliorer les Signaux Web.
Pour rappel, Lighthouse est un outil automatisé Open Source conçu pour améliorer la qualité des pages Web. Vous la trouverez dans la suite d'outils de débogage Chrome DevTools et vous l'exécutez sur n'importe quelle page Web, publique ou nécessitant une authentification. Vous trouverez également Lighthouse dans PageSpeed Insights, CI et WebPageTest.
Lighthouse 7.x inclut de nouvelles fonctionnalités telles que des captures d'écran d'éléments, pour une inspection visuelle plus simple des parties de votre interface utilisateur ayant une incidence sur les métriques d'expérience utilisateur (par exemple, quels nœuds contribuent au décalage de mise en page).
Nous avons également ajouté la prise en charge des captures d'écran d'éléments sur PageSpeed Insights, ce qui permet de détecter plus facilement les problèmes liés aux exécutions ponctuelles de pages.
Mesurer les Core Web Vitals
Lighthouse peut mesurer synthétiquement les métriques Core Web Vitals, y compris Largest Contentful Paint, Cumulative Layout Shift et Total Blocking Time (un proxy d'atelier pour le First Input Delay). Ces métriques reflètent le chargement, la stabilité de la mise en page et l'aptitude aux interactions. D'autres métriques, comme First Contentful Paint, qui ont été mises en avant dans l'avenir des Core Web Vitals sont également présentes.
La section "Métriques" du rapport Lighthouse contient les versions expérimentales de ces métriques. Vous pouvez l'utiliser 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 de la méthode RUM, ne sont pas concernées par cette limitation et constituent un complément précieux aux données expérimentales, 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 concernant le rapport Core 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. Passez la souris 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 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 pourraient être mieux compressées, redimensionnées ou fournies 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 de héros critiques 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.
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 de héros responsive spécifiée à l'aide des éléments 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 en utilisant 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 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 é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. 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 dans les cas suivants:
Les images critiques situées au-dessus de la ligne de flottaison, telles que l'image Largest Contentful Paint, ne doivent pas être chargées de façon 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" (l'image Largest Contentful Paint a été chargée en différé) :
Identifier les contributions du CLS
Le Cumulative Layout Shift est une mesure de la stabilité visuelle. Il quantifie l'évolution visuelle du contenu d'une page. Lighthouse propose un audit de débogage du CLS appelé "Éviter les décalages de mise en page importants".
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 captures d'écran des éléments Lighthouse, nous pouvons à la fois afficher un aperçu des éléments clés mentionnés dans l'audit et 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 pour identifier les éléments qui ont le plus contribué au CLS. Cette fonctionnalité est présente dans les outils tiers tels que le tableau de bord Core Web Vitals de SpeedCurve. J'aime beaucoup utiliser le générateur de GIF de mise en page de Defaced pour:
Le rapport Core Web Vitals de la Search Console fournit une vue d'ensemble des problèmes de décalage de mise en page à l'échelle du site. Cela me permet de voir les types de pages de mon site avec un CLS élevé (dans ce cas, pour identifier les parties du modèle sur lesquelles je dois passer du temps):
Identifier le CLS à partir d'images sans dimensions
Pour limiter le décalage de mise en page cumulatif causé par des images sans dimensions, ajoutez les attributs de largeur et de hauteur à vos images et éléments vidéo. Cette approche garantit que le navigateur peut allouer la bonne quantité d'espace dans le document pendant le chargement de l'image.
Consultez la section Il est à nouveau important de définir la hauteur et la largeur des images pour un bon résumé de l'importance de réfléchir aux dimensions et au format des images.
Identifier le CLS dans les annonces
Les annonces d'éditeur pour Lighthouse vous permettent d'identifier des opportunités d'amélioration de l'expérience de chargement des annonces sur votre page, y compris en ce qui concerne les contributions au décalage de la mise en page et les longues tâches pouvant augmenter le délai d'utilisation de votre page par 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:
- Faites attention lorsque vous placez des annonces non persistantes en haut de la fenêtre d'affichage
- Éliminer 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 apparaître comme saccadées sur les appareils bas de gamme si le thread principal est occupé par de lourdes tâches JavaScript. Ces animations peuvent introduire des décalages de mise en page.
Si Chrome découvre qu'une animation ne peut pas être composée, il la signale à une trace Lighthouse des outils de développement, 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 le retard de la première entrée / temps total de blocage / tâches longues
La métrique "First Input" 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 en mesure de 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 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 longues tâches sont des tâches qui s'exécutent pendant plus de 50 millisecondes. Cela est considéré comme un blocage du 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 le visuel de chronologie d'exécution du thread principal de Calibre pour visualiser ces coûts, qui met en évidence les tâches parentes et enfants contribuant à de longues tâches qui ont un impact sur l'interactivité.
Bloquez 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 vous aider à comprendre le coût des scripts individuels (par exemple, des intégrations ou des outils de suivi tiers) pour des métriques telles que le temps total de blocage et le délai avant interactivité.
Le blocage des requêtes réseau fonctionne également avec Lighthouse. Jetons un coup d'œil rapide au rapport Lighthouse pour un site. Le score de performance est de 63/100 avec un volume de données de latence 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. Alors, bloquons-les !
Nous pouvons effectuer un clic droit sur un script dans le panneau DevTools Network, 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 voir 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 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 critique (par exemple, si l'utilisateur doit faire défiler la page 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 chargez la version complète uniquement si un utilisateur interagit avec lui. Lighthouse propose un audit qui recommande des ressources tierces pouvant être chargées de manière différée avec une façade, telles que des 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 permet d'exposer tous types de scripts tiers (y compris ceux créés par Google). Il peut être préférable de différer le chargement ou d'effectuer un chargement différé si ce qu'ils affichent nécessite un défilement pour les afficher.
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.
Elles incluent un nombre croissant d'audits visant à réduire le coût de JavaScript sur votre page, par exemple en réduisant la dépendance aux polyfills et aux doublons qui ne sont peut-être pas nécessaires à l'expérience utilisateur.
Pour en savoir plus sur les outils Core Web Vitals, consultez régulièrement le compte Twitter de l'équipe Lighthouse et les nouveautés des outils de développement.
Image héros de Mercedes Mehling sur Unsplash.