Google Lighthouse, une solution open source conçue par Google, sert à évaluer et à améliorer les performances, l'accessibilité, les bonnes pratiques et le référencement des sites web. Il fournit des recommandations pour optimiser l'expérience utilisateur en simulant le chargement et le rendu des pages, mesurant ainsi diverses métriques comme la vitesse de chargement et l'efficacité du réseau. En identifiant les problèmes d'accessibilité, de sécurité et de conception, il permet aux développeurs et aux propriétaires de sites de créer des expériences en ligne plus performantes et conviviales.

 

Lighthouse réalise des audits sur les pages web en simulant le processus de chargement et de rendu dans un environnement contrôlé. Il mesure diverses métriques de performance, telles que la vitesse de chargement de la page, l'efficacité du réseau, la performance du rendu et l'interactivité. Il vérifie également les problèmes d'accessibilité, tels que la structure HTML appropriée, le texte alternatif pour les images et le support de la navigation au clavier. De plus, Lighthouse examine la mise en œuvre des bonnes pratiques, comme l'utilisation de connexions sécurisées (HTTPS), l'optimisation des images et du code, et garantit la conception responsive.

Après avoir effectué les audits, Lighthouse génère un rapport détaillé avec un score de performance et des recommandations pour l'amélioration. Le rapport met en évidence les domaines où le site web excelle et les domaines qui nécessitent une attention ou une optimisation. Il propose des suggestions spécifiques, des extraits de code et des ressources pour résoudre les problèmes identifiés et améliorer les performances globales du site web et l'expérience utilisateur.

Google Lighthouse est largement utilisé par les développeurs, les designers et les propriétaires de sites web comme un outil précieux pour identifier et résoudre les goulots d'étranglement de performance, les barrières d'accessibilité et les déficiences en SEO. En suivant les recommandations de Lighthouse, les propriétaires de sites web peuvent fournir des sites web plus rapides, plus accessibles et adaptés aux moteurs de recherche, offrant ainsi une expérience utilisateur exceptionnelle.

 

 

Naviguer dans le rapport Lighthouse : comprendre les mesures et les insights

Le rapport de Lighthouse offre une évaluation complète avec des insights détaillés sur les performances, l'accessibilité, les bonnes pratiques et le référencement (SEO) d'un site web. Il comprend diverses mesures et recommandations pour améliorer la qualité globale du site et l'expérience utilisateur.

Voici quelques métriques clés généralement incluses dans un rapport de Lighthouse:

 

Métriques de performance

Performance metrics

 

Lighthouse mesure des métriques liées aux performances, évaluant la vitesse de chargement et la réactivité du site, aidant à identifier les domaines à optimiser.

 

First Contentful Paint (FCP)

FCP

FCP, ou "First Contentful Paint", est une mesure cruciale de la performance d'un site web, évaluant le laps de temps nécessaire pour afficher le premier élément de contenu significatif à l'utilisateur. En d'autres termes, il indique quand les utilisateurs voient quelque chose de concret sur leur écran, signalant ainsi que la page est en cours de chargement et que du contenu est en train d'être affiché.

Cette mesure se concentre spécifiquement sur le rendu du "contenu principal" d'une page, comme du texte, des images ou d'autres éléments visuels essentiels. Elle exclut les tâches en arrière-plan, telles que le chargement de scripts ou de feuilles de style, qui n'ont pas d'impact immédiat sur l'expérience visuelle.

L'importance du FCP réside dans sa capacité à offrir une perspective centrée sur l'utilisateur concernant la vitesse de chargement de la page. Un temps FCP plus court indique un processus de rendu plus rapide, ce qui améliore l'expérience utilisateur en réduisant le temps de chargement perçu. En général, viser un temps FCP inférieur à 1 à 2 secondes est recommandé pour assurer une satisfaction optimale des utilisateurs.

En surveillant et en optimisant le FCP, les développeurs peuvent identifier et résoudre les problèmes de performance qui pourraient ralentir le rendu initial du contenu, tels que des ressources volumineuses, des réponses lentes du serveur ou une exécution de code inefficace. Cela peut considérablement améliorer la perception de la performance du site par les utilisateurs, favorisant ainsi une meilleure interaction et potentiellement des taux de conversion plus élevés.

 

Comment améliorer le FCP ?

Optimiser le FCP implique d'apporter des modifications à différents aspects d'un site web afin d'accélérer le rendu du contenu initial. Voici quelques stratégies et bonnes pratiques à suivre :

  • Optimiser le temps de réponse du serveur
    Réduire le temps nécessaire au serveur pour répondre aux requêtes en optimisant les configurations du serveur, en utilisant des techniques de mise en cache et en employant des réseaux de diffusion de contenu (CDNs) pour servir les ressources statiques plus près des utilisateurs.

  • Minimiser les ressources bloquant le rendu
    Identifier et réduire au minimum les ressources bloquant le rendu telles que le CSS et le JavaScript qui empêchent le navigateur de rendre le contenu rapidement. Intégrer le CSS critique en ligne ou le charger de manière asynchrone pour que le contenu initial soit affiché rapidement.

  • Compresser et optimiser les images
    Réduire la taille des fichiers d'image sans perte significative de qualité visuelle. Utiliser des formats d'image modernes (comme le WebP) et mettre en œuvre des techniques d'image réactive, telles que le chargement paresseux ou l'utilisation d'attributs srcset, pour fournir des images de taille appropriée en fonction du viewport de l'utilisateur.

  • Prioriser le contenu visible
    Assurer que le contenu critique, visible dès le premier coup d'œil, est chargé et rendu en premier. En priorisant le contenu visible, les utilisateurs perçoivent le site comme se chargeant rapidement même si d'autres ressources sont encore en cours de récupération.

  • Éliminer ou reporter les scripts tiers inutiles
    Evaluer la nécessité de chaque script tiers et supprimer ou reporter ceux qui ne sont pas essentiels pour l'affichage du contenu initial. Charger les scripts non critiques de manière asynchrone ou après le rendu du contenu initial.

  • Optimiser la livraison du CSS
    Minimiser les fichiers CSS, supprimer les styles inutilisés et envisager d'intégrer en ligne le CSS critique pour réduire les requêtes réseau et améliorer la vitesse de rendu.

  • Activer la mise en cache du navigateur
    Utiliser des en-têtes et des mécanismes de mise en cache appropriés pour permettre au navigateur de mettre en cache les ressources statiques, réduisant ainsi le temps de chargement pour les visites ou les chargements de pages ultérieurs.

  • Implémenter l'optimisation du code et des ressources
    Passer en revue et optimiser le code HTML, JavaScript et CSS du site pour de meilleures performances. Minimiser et compresser les fichiers de code, supprimer les espaces inutiles et utiliser des techniques de découpage de code pour charger uniquement le code nécessaire pour chaque page.

  • Utiliser des outils de suivi des performances et de profilage
    Utiliser des outils tels que Lighthouse, PageSpeed Insights ou les outils de développement du navigateur pour mesurer et identifier les problèmes affectant le FCP. Ces outils offrent des informations détaillées sur les problèmes spécifiques et proposent des suggestions pour les résoudre.

 

Indice de vitesse / Speed Index (SI)

L'Indice de vitesse (SI) est une mesure de performance qui évalue la rapidité avec laquelle les éléments visuels d'une page web sont rendus. Il évalue le temps de chargement perçu d'une page en observant la progression du rendu du contenu au fil du temps.

Contrairement à des métriques telles que le Premier Contenu Peint (FCP), qui se concentrent sur le premier élément de contenu, l'Indice de vitesse examine l'ensemble du processus de rendu. Il détermine le moment moyen où les parties visibles de la page deviennent progressivement visibles pendant le chargement.

Un indice de vitesse plus bas signifie un temps de chargement perçu plus rapide. Un SI plus faible indique que les éléments visuels de la page sont rendus plus rapidement, permettant aux utilisateurs de voir et d'interagir avec la page plus rapidement.

L'Indice de vitesse est précieux car il prend en compte l'ensemble de l'expérience de chargement, y compris l'ordre d'apparition du contenu et le temps nécessaire au rendu. Il offre une compréhension plus approfondie de la perception de la vitesse de chargement de la page par l'utilisateur par rapport à des métriques individuelles telles que le FCP ou le Temps d'interaction.

Pour améliorer l'Indice de vitesse, des stratégies d'optimisation similaires peuvent être appliquées à d'autres métriques de performance. Cela comprend l'optimisation des temps de réponse du serveur, la réduction des ressources bloquant le rendu, la compression et l'optimisation des images, la priorisation du contenu visible, et l'optimisation du code et des ressources. En améliorant ces aspects, vous pouvez réduire le temps nécessaire au chargement visuel d'une page, ce qui se traduit par un Indice de vitesse plus bas et une meilleure expérience utilisateur.

 

Quel est le score d'Indice de vitesse considéré comme bon ?

Un bon score d'Indice de vitesse devrait être inférieur à 3,4 secondes.

Speed Index score

 

Largest Contentful Paint (LCP)

Le LCP tout simplement est une mesure de performance qui évalue le temps nécessaire pour que le plus grand élément de contenu visible soit rendu dans le viewport d'une page web.

 

Il évalue ainsi la vitesse de chargement de l'élément de contenu le plus important, tel qu'une image, une vidéo ou un élément textuel en bloc, que les utilisateurs voient en accédant initialement à une page web.

 

Ce critère est crucial car il indique à quel point le contenu principal devient rapidement visible, ce qui contribue à une meilleure expérience utilisateur en réduisant le temps de chargement perçu et en permettant aux utilisateurs d'interagir plus rapidement avec un contenu significatif.

 

Pour obtenir un bon score LCP, il est crucial d'optimiser différents aspects qui influent sur le rendu de l'élément de contenu le plus volumineux. Voici quelques stratégies efficaces :

  • Optimisation des images
    Comprimer et dimensionner correctement les images peut considérablement améliorer le LCP. Utilisez des formats d'image modernes, des techniques de chargement différé, ou mettez en place des solutions d'images adaptatives pour fournir des images de taille appropriée pour différents appareils.
  • Priorisation du contenu critique
    Assurez-vous que l'élément de contenu le plus important, ainsi que d'autres contenus essentiels au-dessus du pli, se chargent rapidement et deviennent visibles dès que possible. Accordez la priorité au chargement des ressources essentielles et réduisez au minimum les éléments bloquants le rendu qui retardent le chargement du contenu.
  • Amélioration des temps de réponse du serveur
    Optimisez les configurations du serveur, utilisez des mécanismes de mise en cache et profitez des CDN pour réduire le temps nécessaire au serveur pour répondre et livrer le contenu aux utilisateurs.
  • Optimisation du CSS et du JavaScript
    Minimisez et compressez les fichiers CSS et JavaScript pour réduire leur taille et améliorer les temps d'analyse et d'exécution. Supprimez le code inutilisé et assurez-vous une livraison efficace du code pour éviter le blocage du rendu.

En améliorant ces aspects et en surveillant continuellement les performances à l'aide d'outils tels que Lighthouse ou PageSpeed Insights, vous pouvez améliorer le Largest Contentful Paint et ainsi l'expérience utilisateur perçue et la vitesse de chargement de votre site web.

Pour offrir une bonne expérience utilisateur, les sites web devraient viser à avoir un LCP de 2,5 secondes ou moins pour au moins 75% des visites de page.

 

LCP

 

Cumulative Layout Shift (CLS)

CLS est une mesure de performance qui évalue la stabilité visuelle d'une page web pendant son processus de chargement. Il quantifie la quantité de décalages de mise en page inattendus qui se produisent lorsque le contenu se charge et se rend sur la page.

Les décalages de mise en page se produisent lorsque les éléments d'une page changent de position ou de taille de manière inattendue, provoquant le déplacement du contenu et pouvant perturber l'expérience de l'utilisateur. CLS se concentre sur l'effet cumulatif de tous ces décalages de mise en page qui se produisent dans le viewport.

 

CLS est particulièrement pertinent pour évaluer la stabilité visuelle d'une page web, notamment dans les situations où le contenu se charge de manière asynchrone ou lorsque des ressources telles que des images ou des publicités sont insérées dynamiquement. Il aide à évaluer dans quelle mesure la mise en page d'une page reste cohérente et évite les perturbations visuelles agaçantes ou déroutantes.

CLS est calculé en multipliant la fraction d'impact (la fraction de la fenêtre d'affichage affectée par le décalage) par la fraction de distance (la distance parcourue par l'élément par rapport à la taille de la fenêtre d'affichage). Le score CLS varie de 0 à 1, des valeurs plus faibles indiquant une meilleure stabilité visuelle.

Pour réduire le Cumulative Layout Shift et améliorer l'expérience utilisateur, voici quelques stratégies à considérer :

  • Définir des attributs de taille pour les images et les vidéos
    Préciser la largeur et la hauteur pour allouer l'espace requis avant leur chargement, évitant ainsi les déplacements brusques lors de leur affichage. 

  • Réserver de l'espace pour les publicités et le contenu dynamique
    Prévoir de l'espace sur la page pour les publicités, images ou autres contenus chargés dynamiquement, évitant ainsi les changements de mise en page lors de leur insertion.

  • Éviter d'insérer du contenu au-dessus du contenu existant
    Assurer que le nouveau contenu ajouté ne pousse pas le contenu existant vers le bas, provoquant des changements de mise en page. Utiliser des techniques telles que le pré- chargement ou les espaces réservés pour prévoir l'espace pour le contenu qui sera chargé dynamiquement.
  • Charger les polices et autres ressources tôt
    Donner la priorité au chargement des polices, scripts et autres ressources pour minimiser les changements de mise en page causés par un chargement retardé ou l'apparition soudaine de contenu. 

  • Tester et surveiller CLS
    Effectuer régulièrement des tests et surveiller le Cumulative Layout Shift à l'aide d'outils comme Lighthouse ou les outils de développement du navigateur pour repérer les zones problématiques et suivre les améliorations. Adressez-vous à tous les problèmes causant des changements de mise en page et itérez sur les optimisations.

En visant un faible Cumulative Layout Shift, vous assurez une expérience visuellement plus stable pour vos utilisateurs, garantissant ainsi la cohérence du contenu de la page et évitant les changements de mise en page perturbateurs susceptibles de causer de la frustration ou des problèmes d'utilisabilité.

 

Quel est un bon score CLS ?

Pour offrir une expérience utilisateur satisfaisante, les sites web devraient viser un score CLS de 0,1 ou moins. Pour garantir cet objectif pour la plupart de vos utilisateurs, il est recommandé de viser le 75e percentile des chargements de pages, en segmentant les résultats selon les appareils mobiles et de bureau.

 

CLS

 

Total Blocking Time (TBT)

Le TBT de Lighthouse est une mesure de performance qui évalue la durée totale, en millisecondes, de toutes les tâches bloquantes qui surviennent lors du chargement initial d'une page. Il quantifie le temps pendant lequel le thread principal du navigateur est occupé par des tâches qui bloquent l'interaction de l'utilisateur et empêchent la réactivité de la page.

Le thread principal dans un navigateur web gère diverses tâches, notamment l'exécution de JavaScript, l'exécution de calculs de style, la mise en page et le rendu. Lorsque ces tâches prennent beaucoup de temps à se terminer, cela peut entraîner des retards dans l'interaction de l'utilisateur, donnant l'impression que la page est peu réactive ou lente.

 

Le temps total de blocage se concentre spécifiquement sur la période pendant laquelle la page se charge et traite le code JavaScript. Il capture le moment où le navigateur est occupé à exécuter des tâches qui peuvent retarder les interactions de l'utilisateur, telles que la gestion des événements ou la réponse aux saisies de l'utilisateur.

Un score de TBT plus bas indique que le thread principal est disponible pour les interactions utilisateur pendant une plus grande partie du processus de chargement. En revanche, un score de TBT plus élevé suggère que le thread principal est occupé par des tâches bloquantes, ce qui peut entraîner des retards dans l'interaction de l'utilisateur.

Optimiser le temps total de blocage est important pour améliorer l'interactivité et la réactivité d'une page web. Certaines stratégies pour améliorer le TBT comprennent :

  • Optimiser l'exécution du JavaScript ;
  • Reporter le JavaScript non critique ;
  • Minimiser les ressources bloquantes le rendu ;
  • Prioriser la réactivité aux entrées utilisateur.

 

Quel est un bon score TBT ?

Pour offrir une bonne expérience utilisateur, les sites web devraient s'efforcer d'avoir un TBT de moins de 200 millisecondes, lorsqu'ils sont testés sur du matériel mobile moyen.

 

Métriques d'accessibilité

Accessibility metrics

 

Lighthouse évalue l'accessibilité en scrutant des éléments tels que la structure HTML correcte, le texte alternatif pour les images, la prise en charge de la navigation au clavier et le respect des normes d'accessibilité (par exemple, les directives WCAG). Il offre des indications sur l'état d'accessibilité du site web et recommande des améliorations pour garantir une expérience inclusive.

 

Métriques des meilleures pratiques

Best practices metrics

 

Lighthouse analyse la conformité du site web aux meilleures pratiques, notamment l'utilisation de connexions sécurisées (HTTPS), des stratégies de mise en cache efficaces, des images et un code optimisés, ainsi que d'autres pratiques recommandées par l'industrie. Il met en lumière les domaines où des améliorations peuvent être apportées pour améliorer les performances, la sécurité et l'efficacité du site web.

 

Métriques SEO

SEO metrics

 

Lighthouse examine les facteurs liés au référencement naturel (SEO), tels que les balises méta, les en-têtes, la convivialité mobile et l'explorabilité. Il propose des recommandations pour améliorer la visibilité du site web dans les résultats des moteurs de recherche, ce qui entraîne ultimement une augmentation du trafic organique et une amélioration du classement dans les moteurs de recherche.

 

 

Conclusion

Optimiser les performances d'un site web est crucial pour offrir une expérience utilisateur rapide, réactive et agréable. Des outils tels que Lighthouse fournissent des informations précieuses sur diverses métriques de performance, permettant aux développeurs d'identiAier les domaines à améliorer et de réaliser des optimisations basées sur les données.

Des métriques telles que le First Contentful Paint (FCP), le Largest Contentful Paint (LCP), l'indice de vitesse (SI), le temps total de blocage (TBT) et le décalage de mise en page cumulatif (CLS) offrent des mesures précieuses de différents aspects des performances d'un site web.

En comprenant ces métriques et leur importance, les développeurs peuvent mettre en œuvre diverses stratégies d'optimisation, notamment la réduction des ressources bloquant le rendu, l'optimisation des images et du code, la priorisation du contenu critique, l'amélioration des temps de réponse du serveur et la résolution des problèmes entraı̂nant des décalages de mise en page. La surveillance régulière, les tests et les itérations sont essentiels pour maintenir et améliorer les performances au fil du temps.

 

 

Ressources:
Partager cet article