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, PageSpeed et des outils de développement comment votre site peut améliorer les Signaux Web.
Pour vous rafraîchir la mémoire, découvrez Lighthouse Open Source et automatisé permettant d'améliorer la qualité des pages Web. Vous la trouverez dans le la suite d'outils de débogage vers n'importe quelle page Web, publique ou nécessitant une authentification. Lighthouse se trouve PageSpeed des 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 parties de votre interface utilisateur ayant un impact sur les métriques d'expérience utilisateur (par exemple, quels nœuds contribuent à la mise en page Maj).
Nous avons également pris en charge les captures d'écran des éléments sur PageSpeed Insights, ce qui permet d'obtenir repérer 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 les métriques Largest Contentful Paint, Layout Shift et Total Blocking Time (un proxy de l'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 telles que First Contentful Paint mis en avant dans l'avenir de Les Core Web Vitals s'y trouvent également.
La page "Métriques" du rapport Lighthouse inclut des versions expérimentales de ces métriques. Vous pouvez utiliser il s'agit d'une vue récapitulative des aspects de l'expérience utilisateur qui requièrent votre attention.
<ph type="x-smartling-placeholder">
Métriques de champ, comme celles fournies dans l'expérience utilisateur Chrome Signaler ou RUM, je n'ai pas cette fonctionnalité limites et constituent un complément précieux aux données expérimentales, car elles reflètent l'expérience des utilisateurs réels dont vous disposez. Les données de terrain ne permettent pas d'obtenir les mêmes informations de diagnostic que dans l'atelier. main dans la main.
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. Elle marque le moment du chargement de la page au moment le contenu principal (ou "largest") a été chargé et est visible par l'utilisateur.
Lighthouse comporte un élément "Largest Contentful Paint" d'audit qui identifie l'élément avec le plus grand tableau de contenu. 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, cette information peut vous aider à optimiser le chargement. de cette image. Lighthouse inclut plusieurs audits d'optimisation des images pour vous aider à comprendre si vos images pourraient être mieux compressées, redimensionnées ou livrées dans une meilleure image moderne .
Vous verrez peut-être aussi LCP Bookmarklet d'Annie Sullivan est 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 votre héros critique. si le navigateur les découvre en retard. Une découverte tardive peut se produire si Le bundle JavaScript doit être chargé pour que l'image soit visible.
<ph type="x-smartling-placeholder">
Quelques questions fréquentes nous sont posées sur le préchargement des images LCP qui peuvent également être utiles 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'images que 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 CSS arrière-plan ? 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écouvertes à 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 le message "Largest Contentful Paint" (image à chargement différé) audit:
Identifier les contributions du CLS
Le Cumulative Layout Shift est une mesure de la stabilité visuelle. Il quantifie la proportion le contenu change visuellement. 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 l'élément La colonne de gauche contient la liste de ces éléments DOM et, à droite, leur CLS global. contribution.
Grâce à la nouvelle fonctionnalité de captures d'écran des éléments Lighthouse, nous pouvons à la fois afficher un aperçu de l'élément les éléments clés mentionnés dans l'audit, ainsi que la possibilité de cliquer pour zoomer afin d'obtenir une vue plus claire:
Pour le CLS post-chargement, il peut y avoir une valeur dans la visualisation persistante avec des 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 Tableau de bord Core Web Vitals de SpeedCurve et que j'adore utiliser avec le GIF de Defaced (mise en page) Générateur pour:
Pour avoir une vue d'ensemble des problèmes de décalage de mise en page à l'échelle du site, je peux exploiter pleinement le tableau de bord de la Search Console le rapport "Signaux Web". Cela me permet de voir les types de pages de mon site avec un CLS élevé (dans ce cas, nous aider à identifier partiels auxquels je dois consacrer mon temps):
<ph type="x-smartling-placeholder">
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 important de définir la hauteur et la largeur des images. à nouveau pour une un bon point sur l'importance de réfléchir aux dimensions et au format de l'image.
Identifier le CLS dans les annonces
Les annonces d'éditeur pour Lighthouse vous permettent : Identifier des opportunités d'améliorer le chargement des annonces sur votre page, y compris pour les contributions au décalage de la mise en page et aux longues tâches pouvant augmenter le délai d'utilisation de votre page par les utilisateurs. Dans Lighthouse, vous pouvez l'activer via les plug-ins de la communauté.
N'oubliez pas que les annonces les principales composantes des 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 être saccadées sur les appareils bas de gamme si elles sont lourdes. Les tâches JavaScript maintiennent le thread principal occupé. Ces animations peuvent introduire des décalages de mise en page.
Si Chrome détecte qu'une animation ne peut pas être composée, il la signale à une trace des outils de développement Lighthouse lit les éléments avec des animations qui n'ont pas été composites, et pour pour quelle raison. Vous les trouverez dans la section Éviter les images des animations.
Déboguer le retard de la première entrée / temps total de blocage / 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 un lien, appuyez sur un bouton ou utilisez une commande JavaScript personnalisée) à l'heure à laquelle le navigateur est réellement capable de commencer à traiter les gestionnaires d'événements en réponse à cette interaction. Code JavaScript long Les tâches 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 et les plus longues sur le thread principal. Cela peut vous aider à identifier les facteurs qui contribuent le moins d'entrée. Dans la colonne de gauche, nous pouvons voir l'URL des scripts responsables du thread principal long. tâches.
À droite, nous pouvons voir la durée de ces tâches. Pour rappel, les longues tâches sont des tâches qui s'exécuter pendant plus de 50 millisecondes. Le thread principal est alors bloqué suffisamment longtemps impacter 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 l'exécution du thread principal de la timeline. pour visualiser ces coûts, ce qui met en évidence les tâches parents et enfants contribuant 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 peuvent bloquer requêtes pour 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 outils de suivi tiers) sur comme le temps total de blocage et le délai avant interactivité.
Le blocage des requêtes réseau fonctionne également avec Lighthouse. Examinons rapidement 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. Bloquez-les !
Nous pouvons effectuer un clic droit sur un script dans le panneau DevTools Network, puis cliquer sur Block Request URL pour bloquer
C'est ce que nous allons faire pour le polyfill "Observateur d'intersection".
Nous pouvons ensuite relancer Lighthouse. Cette fois, nous constatons que notre score de performance s'est amélioré (70/100), car a une durée totale de blocage (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 ou des widgets sur les réseaux sociaux . Par défaut, la plupart des intégrations se chargent immédiatement et peuvent être associées à des charges utiles coûteuses qui avoir 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 pour la voir).
Pour améliorer les performances de ces widgets, une pratique consiste à les charger en différé sur l'écran d'interaction. Pour ce faire, affichez une aperçu léger du widget (façade) et ne charge la version complète que si un utilisateur interagit avec lui. Lighthouse propose un audit qui recommande des ressources tierces avec une façade en différé, comme des vidéos YouTube intégrées.
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
Outre les Core Web Vitals, les versions récentes de Lighthouse et PageSpeed Insights essayez de fournir des conseils concrets qui vous permettront d'améliorer la vitesse de chargement applications peuvent se charger si vous avez activé les cartes sources.
Il s'agit notamment d'un nombre croissant d'audits visant à réduire le coût de JavaScript sur votre page, comme la réduction de la dépendance aux polyfills et aux doublons qui ne sont pas forcément nécessaires à l'expérience utilisateur.
Pour en savoir plus sur les outils Core Web Vitals, consultez le site Lighthouse compte Twitter de l'équipe et What's new in DevTools.
Image héros de Mercedes Mehling dans Unsplash.