Google Lighthouse pour vous aider à améliorer les performances de votre site.

Google Lighthouse pour vous aider à améliorer les performances de votre site.

Selon Google un site ayant un temps de chargement de moins de 5 secondes aurait deux fois plus de chance de réaliser des ventes qu’un site qui mettrait 15 secondes. Tous les professionnels du référencement (SEO) savent que la performance rime avec rentabilité. Nous voulons tous rendre notre site plus performant, mais comment s’y prendre ?

Pour répondre à ce besoin grandissant, Google nous a facilité le travail avec l’extension Google LightHouse. L’outil open source qui permet d’améliorer globalement la performance des pages d’un site en faisant un audit ou pré-audit SEO automatisé.

L’extension est, par ailleurs, recommandée par l’index mobile-first afin de coller avec la nouvelle politique de Google qui consiste à valoriser l’optimisation de la navigation sur mobile.

Google LightHouse est un outil pratique et simple d’utilisation bien que sa notation soit parfois critiquée par ses utilisateurs. Ces derniers oubliant qu’il s’agit d’un outil destiné à l’optimisation mobile.

La métrique de performance globale de Google LightHouse que l’on retrouve par code couleur reste un outil fiable, bien qu’il faille toujours regarder les résultats avec attention. Il est important d’analyser la composition de ces métriques afin de les comprendre ainsi que pour obtenir de réels changements en termes de performance. Nous nous intéressons tout au long de cet article aux cinq métriques de performance proposées par Google LightHouse. Nous verrons les définitions simplifiées des métriques ainsi que les méthodes à adopter pour que Google LightHouse nous octroie une bonne note. Nous commencerons par un aperçu de Google LightHouse dans son ensemble.

Google LightHouse : Comment l’utiliser pour tester les performances d’un site ?

Tout d’abord, il est important de comprendre que LightHouse ne testera qu’une seule page de votre site à la fois. Ce qui signifie que la note de performance obtenue par la page ne pourra pas être représentative de la performance globale du site. Pour obtenir un rapport d’audit global sur vote site, il faudra tester plusieurs pages ou utiliser d’autres outils d’audit ou encore utiliser les services d’une agence SEO qui offre des audits SEO. L’idéal serait d’identifier les pages principales de votre site (sans oublier les pages de paiement ou encore d’inscription) et de les tester. Après avoir lancé Google LightHouse sur chacune des pages que vous avez choisies, il faudra sauvegarder les données du rapport avant de commencer l’optimisation. Vous pouvez télécharger les données JSON avec LightHouse Viewer.

 

Google lighthouse metriques de performances

Google lighthouse les principales métriques de performances

Installer et exécuter LightHouse

Trois options s’offrent à vous, la première consiste à télécharger l’extension Chrome DevTools pour Google Chrome, vous pouvez aussi utiliser les outils de développement Chrome, ou encore utiliser Node. Si vous choisissez les deux premières options, prenez garde, car les résultats peuvent être faussés. Pour éviter ce scénario, passez en mode de navigation privée en prenant le soin de désactiver toutes les extensions.

Comprendre la métrique de performance de Google LightHouse

Pour cette troisième version de LightHouse, nous retrouvons les valeurs mesurées pour 5 indicateurs de performances que nous avons classés selon l’impact qu’elles ont sur votre score global de performance.

  • Time to Interactive
  • Speed Index
  • First ContentFul Paint
  • First CPU Idle
  • First Meaningful Paint

Time to Interactive (TTI)

Cette métrique permet d’évaluer l’interactivité d’une page, ou plutôt le temps nécessaire dont elle a besoin pour qu’elle devienne interactive. Pour une explication plus simple, on pourrait dire que lorsque l’utilisateur arrive sur la page il peut non seulement voir s’afficher le contenu qui l’intéresse, mais aussi cliquer dessus. La métrique TTI quantifie cette expérience.

À partir de quel moment une page devient interactive ?

Trois critères sont à prendre en compte pour considérer une page comme interactive :

  • La page a affiché un contenu utile
  • Les éléments les plus visibles de la page sont interactifs
  • La page répond aux interactions de l’utilisateur dans un délai maximum de 50 millisecondes

Google avait partagé un document à l’attention des développeurs de LightHouse, dans lequel il indiqué que « lors d’une étude de variabilité sur 100 sites populaires, le résultat obtenu était stable dans 82% des analyses » TTI étant une nouvelle métrique, il faut donc interpréter ses résultats avec précautions.

Obtenir une meilleure note pour la métrique TTI

Bien que le TTI soit un peu difficile à cerner, on peut comprendre qu’il y a trois étapes nécessaires :

  • First Meaningful Paint (voir plus bas)
  • Les éléments exploitables de la plage doivent être opérationnels avec le JavaScript.
  • Tous les scripts essentiels sont terminés sans causer un retard dans la réponse aux interactions des utilisateurs.

Il est important de considérer JavaScript, car il est bien souvent à l’origine d’un retard. En effet, si une page exécute JavaScript pour faire fonctionner les composants de la page, alors l’utilisateur ne pourra pas encore interagir. Le navigateur ne pourra non plus répondre en moins 50 millisecondes s’il y a une file d’attende de tâches à effectuer. Vous l’aurez compris pour obtenir un meilleur score pour la métrique TTI, il faudra le juste nécessaire en JS pour la page en cours d’affichage. Vous pouvez compresser et/ou optimiser les scripts, cela permettra d’envoyer moins d’informations au navigateur.

La meilleure des manières pour améliorer votre score TTI sera d’optimiser le démarrage de JavaScript et de supprimer tous les JavaScript inutiles. Il est possible de réduire les charges JavaScript avec TreeShaking et Code Splitting. Pour obtenir un score de 100% pour TTI il faudra que l’interaction de la page demandée se fasse en 1,36 seconde. Vous obtiendrez un score de 50, si votre page met 4,00 secondes ainsi qu’un score de 0 lorsque votre page mettra plus de 12,16 secondes. Cependant, on le rappelle la mesure de performance de vos utilisateurs réels ne pourra pas passer entre les mailles du monde réel et par conséquent les résultats de TTI peuvent ne pas être en corrélation avec la réalité.

Speed Index

Le Speed Index c’est le temps d’affichage moyen que met chaque partie visible de la page. Plus le score sera faible, mieux ce sera pour obtenir une bonne note. Google LightHouse utilise SpeedLine pour mesurer cet indice. Il prend en compte la taille de la fenêtre d’affichage et l’algorithme élaboré permet de calculer le temps d’affichage pour chacune des images. Pour que Google LightHouse attribue à votre Speed Index un score de 100, il faudra que la vitesse ne dépasse pas 1,97 seconde. Vous obtiendrez un score de 80 avec un temps 4,07 secondes, un score de 50 avec 5,80 secondes et de 0 avec plus de 17,63 secondes.

Obtenir une meilleure note pour le Speed Index

Il est important que le trajet qui mène jusqu’à la page visuelle soit le moins dense possible. Un trajet optimisé permettra d’afficher beaucoup plus rapidement le contenu aux utilisateurs et par conséquent vous obtiendrez une meilleure note pour votre Speed Index.

Qu’est-ce qui entrave le trajet pour accéder rapidement à la plage visuelle ?

Encore une fois, JavaScript fait l’objet de ralentissement. Il faudra donc réduire son temps d’exécution, mais aussi éliminer les ressources bloquant le rendu, réduire le travail sur le fil principal ou encore les demandes critiques. Google et Udacity proposent des cours pour comprendre au mieux cette optimisation.

First ContentFul Paint

Le FCP correspond au temps de chargement entre le moment où l’utilisateur fait une demande et le moment ou la demande s’affiche. La métrique du First ContentFul Paint indique le temps exact à partir duquel le navigateur a pu générer le premier élément par exemple l’image, le texte ou encore l’arrière-plan. C’est là qu’il est important de comprendre la différence entre le First ContentFul Paint et le First Meaningful Paint. Le premier se concentre sur la première chose qui s’affiche sur la page demandée tandis que le second concerne l’affichage du contenu pour laquelle l’utilisateur a demandé la page. Pour que Google LightHouse attribue à votre First ContentFul Paint un score de 100, il faudra que la vitesse ne dépasse pas 1,36 seconde. Un temps d’affichage de 2,84 secondes baissera votre score à 80 alors qu’un temps de chargement de 4,00 vous donnera un score de 50 et 12,16 secondes et plus vous octroiera un 0 pointé.

Obtenir une meilleure note pour le First ContentFul Paint

Avant que le contenu demandé par l’utilisateur lui soit affiché, le navigateur télécharge, analyse et traite toutes les feuilles de style externes. Le meilleur moyen de réduire le délai est de minimiser le contenu se situant au-dessus de la ligne de flottaison, d’autoriser la compression, d’optimiser les images, ou encore d’éliminer les codes JavaScript et CSS qui bloquent l’affichage du contenu se trouvant au-dessus de la ligne de flottaison. Vous pouvez utiliser la fonctionnalité de Dev Tool qui permet d’identifier les CSS non utilisées ainsi qui vous permettra d’obtenir des statistiques d’utilisateurs réels avec Google Analytics afin de pouvoir corréler les indicateurs de performance et les améliorations proposées.

First CPU Idle

Le First CPU Idle mesure le moment où la page demandée commence à être interactive. Cela signifie que la plupart des éléments qui constituent la page sont interactifs et que la page peut répondre à la plupart des demandes de l’utilisateur. En bref, bien que ce soit un peu lent, on arrive plus ou moins à interagir avec la plupart du contenu. C’est un peu la même chose que le TTI, à la différence qu’ici le First CPU Idle n’attend pas que les données arrivent en moins de 50 millisecondes. Lorsqu’un navigateur charge votre site, il y a essentiellement une file d’attente de scripts eux-mêmes en attente d’exécution. Toute entrée de l’utilisateur doit aller dans la même file d’attente.

Lorsque le navigateur ne peut pas répondre aux entrées de l’utilisateur, car d’autres tâches sont en cours d’exécution, l’utilisateur le perçoit comme un décalage. Un score de 100 vous sera attribué pour un temps de réponse pouvant aller jusqu’à 1,95. Une note de 80 si le temps ne dépasse pas les 4,39 secondes, ainsi qu’une note de 50 pour 6,50 secondes et enfin de 0 pour plus de 22,40 secondes.

Obtenir une meilleure note pour le First CPU Idle

 Pour optimiser l’efficacité du contenu, il faudra passer par deux étapes :

  • Réduire au maximum les actions en cours de chargement et d’exécution (éliminer les téléchargements inutiles)
  • Optimiser l’encodage du transfert de chaque ressource avec la compression et la mise en cache.

First Meaningful Paint

Nous l’avions abordé dans la partie du First Contenful Paint, et nous avions expliqué qu’il s’agissait du moment précis où le contenu principal que l’utilisateur a demandé est apparu à l’écran. Le contenu principal est bien entendu diffèrent selon chaque page. Par exemple pour une page de produit commercial, le contenu pourra être une image, alors que pour un article de blog le contenu principal sera plutôt le titre et le texte qui se situe au-dessus de la ligne de flottaison. Ou encore, lorsque l’on tape une recherche le « First Meaningful Paint » sera l’apparition des résultats de recherche. Le First Meaningful Paint implique donc que le contenu principal (la raison pour laquelle l’utilisateur est venu jusqu’ici) soit visible. Tout ce qui se rapporte à l’en-tête de page, ou encore la barre de navigation ne peuvent pas être pris en compte.

Pour obtenir un score de 100, il faudra que le contenu principal apparaisse en moins de 1,36 seconde. Pour obtenir un score de 80, il ne faudra pas monter au-dessus de 2,81 secondes, et pour un score de 50 il faudra réaliser un temps d’affichage de 4,00 secondes et pour un zéro il faudra réaliser un temps d’affiche de 12,16 secondes et plus.

Obtenir une meilleure note pour le First Meaningful Paint

Cette métrique permet de remettre en question la hiérarchie des éléments qui constitue votre mise en page en fonction des raisons pour lesquelles l’utilisateur est venu jusqu’ici. Plus il y aura d’éléments à charger sur votre page, plus le contenu principal prendra du temps pour arriver. Il faudra privilégier les ressources du dessus de la ligne de flottaison avant de charger les scripts hors écran. Vous pouvez aussi améliorer votre note, en choisissant des polices d’écriture simple. Cela lui permettra d’être affiché plus rapidement. Revoyez les scripts de votre page et demandez-vous s’ils sont vraiment nécessaires. Auquel cas, ils devront être supprimés. Pensez aux ressources externes, comme les widgets et plugins qui ajoutent du temps de ressource au site.

Pour conclure, nous pouvons dire que tous les sites sont confrontés à ces mesures de performance, qui sont très importantes pour la pérennité d’un bon SEO et une bonne expérience UX. En prenant en compte nos conseils, vous verrez certainement vos scores augmenter.

N’hésitez pas à tester plusieurs fois votre site pour pouvoir obtenir la meilleure performance possible.