Google Lighthouse est devenu l’outil de facto pour de nombreux sites web pour mesurer leurs performances avec un seul score : le Lighthouse performance score. Une nouvelle version, Lighthouse 6,0, est maintenant disponible sur npm dans Chrome Canary, PageSpeed Insights et GSC Console. D’ici la mi-juillet, Lighthouse 6,0 sera entièrement déployé pour les utilisateurs Chrome dans Chrome 84. Il est maintenant temps de vous assurer que votre site est prêt pour la nouvelle version avec un audit de score Lighthouse 6,0.
Lighthouse 6,0 est livré avec de nouvelles mesures et des mesures dépréciées, ainsi qu’une nouvelle formule de pondération pour calculer les scores de performance. Cette nouvelle version, ainsi que l’annonce que Core Web Metrics sera ajouté à l’algorithme de classement de Google dans la mise à jour de Google page Experience, sont des signes clairs que le géant de la recherche met l’accent sur la vitesse perçue – la vitesse à laquelle un utilisateur perçoit une page comme chargée. Plus les utilisateurs perçoivent rapidement votre site à charger, plus votre rang est élevé et plus vous recevrez de conversions.
Les six mesures Lighthouse que vous devez optimiser
Google se soucie de la façon dont les utilisateurs vivent le Web. Deux sites Web peuvent terminer le chargement au même moment, mais l’un d’eux peut sembler se charger plus rapidement, en fonction de la façon dont le contenu est affiché sur la page. Alors que les deux sites ont terminé le chargement simultanément, Google favorisera ce dernier, le site avec une performance perçue plus rapidement.
Les scores de Lighthouse 6,0 sont basés sur une moyenne pondérée de six mesures de vitesse centrées sur l’utilisateur . First Contentful Paint (FCP), Speed Index (si) et Greatest Contentful Paint (LCP) mesurent la vitesse de charge perçue et conservent un poids combiné de 55 % dans le score Lighthouse d’un site Web dans la version 6. Un autre 40% du score est basé sur des métriques mesurant la réactivité, un autre aspect impactant la perception de la vitesse par un utilisateur. Il s’agit notamment du temps de blocage total (TBT) et du temps de passage à l’interactivité (TTI). Les 5 derniers % du score sont basés sur une métrique qui mesure la stabilité visuelle, appelée CLS (Cumulative Layout Shift).
First Meeting Paint (FMP) et First CPU Idle (FCI) du score Lighthouse 5,7 ont été remplacés par de meilleures mesures pour mesurer la vitesse d’un point de vue centré sur l’utilisateur. Il s’agit des plus grands Paint Contentful (LCP) et total Blocking Time (TBT) dans Lighthouse 6,0.
| Phare 5,7 | Poids | Phare 6,0 | Poids |
|---|---|---|---|
| Peinture de première qualité (FCP) | 20% | Peinture de première qualité (FCP) | 15% |
| Indice de vitesse (si) | 27% | Indice de vitesse (si) | 15% |
| Première peinture significative (FMP) | 7% | Peinture de plus grande qualité (LCP) | 25% |
| Premier CPU inactif (FCI) | 13% | Temps de blocage total (TBT) | 25% |
| Temps d'interactivité (TTI) | 33% | Temps d'interactivité (TTI) | 15% |
| - | - | Décalage de mise en page cumulé (CLS) | 5% |
Voici les mesures à six vitesses sur lesquelles vous devez vous concentrer lorsque vous auditez votre site Web en préparation de Lighthouse 6,0. Les métriques sont présentées dans l’ordre dans lequel elles sont mesurées lors du chargement de la page.
Une liste de contrôle simplifiée couvrant les vitesses que vous devriez viser à fournir et les techniques d’optimisation par métrique sont disponibles au bas de cet article.
Première peinture Contentful
FCP marque le premier point lorsqu’un utilisateur peut voir n’importe quel contenu de page à l’écran. Ce contenu comprend du texte, des images, des graphiques ou des fichiers SVG. FCP avait un poids de 20 % dans Lighthouse 5,7, mais seulement 15 % de poids sur votre score Lighthouse 6,0.
Dans la bande de film ci-dessus, le FCP pour le chargement de la première page est mesuré à 0,6 secondes. C’est à ce moment que le contenu apparaît pour la première fois sur la page d’accueil de TheTieBar.com, mais vous remarquerez que ce n’est pas le cas lorsque tout le contenu est visible. C’est une distinction importante entre la première et la plus grande peinture contentful. Le LCP est mesuré à 0,9 secondes lorsque le contenu au-dessus du pli est affiché.
Au fur et à mesure que vous parcourez votre audit de score Lighthouse 6,0, assurez-vous que vos pages ont une moyenne de FCP de 2 secondes ou moins, car il s’agit du seuil de la métrique pour le 75e percentile et est considéré comme rapide par Google. Les FCP de 2 à 4 secondes sont considérés comme des vitesses modérées, et les FCP de plus de 4 secondes tombent sous le 50e percentile et sont classés comme lents.
Si vous trouvez que le chargement des FCP est trop lent, cela peut être dû à un ou plusieurs des facteurs suivants :
- Trop de ressources bloquant le rendu
- Fichiers CSS volumineux
- Absence de connexions sécurisées avec des sources tierces
- Temps de réponse du serveur longs
- Redirections de plusieurs pages
- Ressources statiques non mises en cache
- Taille DOM excessive
Pour optimiser votre FCP, tenez compte des éléments suivants :
- Intégrer les ressources critiques, reporter les ressources non critiques et supprimer tout ce qui n’est pas utilisé pour réduire l’impact des URL bloquant le rendu.
- Supprimez tous les caractères inutiles du CSS pour réduire la taille des fichiers.
- Utilisez Preconnect pour établir des connexions précoces avec des sources tierces importantes.
- Réduisez les temps de réponse du serveur en optimisant la logique applicative du serveur ou en mettant à niveau votre matériel serveur pour disposer de plus de mémoire.
- Évitez plus qu’une redirection d’une page.
- Utilisez la mise en cache HTTP pour mettre en cache les ressources statiques.
- Avoir moins de 1 500 nœuds au total, une profondeur de moins de 32 nœuds et un nœud parent avec moins de 60 nœuds enfants pour réduire la taille du DOM.
Indice de vitesse
Si mesure la progression visuelle du chargement d’une page et calcule un score global pour la rapidité avec laquelle le contenu est peint. Dans Lighthouse 5,7, si avait un poids de 27 % sur le score de performance d’un site Web. Dans Lighthouse 6,0, cette valeur est semi-diminuée, ce qui influence 15 % du score de performance d’une page. Google considère toujours cela comme une mesure perceptuelle clé, car une page avec un affichage d’image lent peut être perçue comme janky.
Lighthouse mesure si en capturant une bande de film d’une page lors de son chargement dans le navigateur et en analysant la progression visuelle image par image. La durée moyenne à laquelle les parties visibles de la page sont affichées détermine le si. Cette mesure varie en fonction de la taille de l’écran de l’appareil.
Au fur et à mesure de votre audit de score Lighthouse 6,0, visez SIS en 4.3s ou moins. Cette vitesse se classe dans le 75e percentile et est considérée comme rapide par Google. Les pages avec SIS entre 4,3 et 5,8 secondes sont modérées, et les SIS plus lents que 5,8 secondes tombent sous le 50e percentile et sont considérés comme lents.
Les temps si plus lents ont tendance à être dus aux facteurs suivants :
- Les temps de chargement sur le thread principal dépassent 4 secondes
- Le temps d’exécution JavaScript dépasse 3,5 secondes
- Les gros fichiers de police provoquent un flash de texte invisible (FOIT).
Pour réduire les temps de travail si, tenez compte des éléments suivants :
- Implémentez le fractionnement du code, supprimez le code inutilisé et compressez le code pour réduire la charge sur le thread principal et le temps d’exécution JavaScript.
- Assurez-vous que le texte reste visible pendant le chargement de la police Web pour éviter FOIT.
Peinture de plus grande qualité
Le LCP est une nouvelle mesure ajoutée à Lighthouse 6,0 et reçoit une pondération de 25 % dans le score de performance d’un site. LCP remplace la première peinture significative (FMP) de Lighthouse 5,7. Bien que les deux métriques mesurent le temps d’affichage du plus grand élément de contenu, FMP est connu pour produire des résultats incohérents et ne peut être normalisé que dans certains navigateurs Web.
LCP mesure lorsque le plus grand élément de contenu est entièrement visible à l’écran. Les éléments de contenu mesurés comprennent les éléments de niveau bloc, les images (y compris les images contenues dans les fichiers SVG) et les vidéos. Il s’agit d’une mesure extrêmement importante pour les sites Web de commerce électronique, car elle marque le moment où la plupart des utilisateurs perçoivent la page comme entièrement chargée et sont plus susceptibles de faire un achat.
Dans l’exemple ci-dessus, le LCP est de 0,9 secondes, lorsque l’image principale est entièrement peinte. Cette mesure capture un moment distinct où un utilisateur perçoit une page entièrement chargée, mais le contenu peut toujours être chargé en dessous du pli.
Les sites Web les plus performants, comme ceux de Layer0 (maintenant Edgio), fournissent des LCP en moins d’une seconde. Les PCL jusqu’à 2,5 secondes sont considérés comme rapides et se classent dans le 75e percentile pour cette métrique. Les LCP entre 2,5 secondes et 4 secondes sont considérés comme modérés, nécessitant une amélioration, et les LCP dépassant 4 secondes tombent en dessous du 50e percentile et sont considérés comme lents par Google.
Les LCP lents proviennent généralement d’un ou de plusieurs des éléments suivants :
- Temps de réponse du serveur lents
- JavaScript et CSS bloquant le rendu
- Temps de chargement des ressources longs
- Problèmes de rendu côté client
Si vous trouvez plus lent que les LCP souhaités lors de votre audit de score Lighthouse 6,0, tenez compte des points suivants :
- Optimisez les temps de réponse des serveurs en acheminant le trafic vers le CDN le plus proche disponible, en mettant en cache les ressources, en servant les pages HTML en premier et en établissant des connexions tierces précocement.
- Réduisez les CSS en supprimant les CSS inutiles, différez les CSS non critiques et les CSS critiques en ligne. Réduisez le temps de blocage JavaScript en compressant les fichiers JavaScript.
- Pour réduire les temps de chargement des ressources, optimisez et compressez les fichiers image et texte, et préchargez les ressources importantes.
- Optimisez le rendu côté client en utilisant le rendu côté serveur et le pré-rendu.
Temps de blocage total
Le TBT remplace le FCI de Lighthouse 5,7, qui contenait auparavant 13 % de poids. Dans Lighthouse 6,0, le Service d’orientation pas à pas mesure la réactivité des pages et comptera pour 25 % d’une note de performance. Le Service d’orientation pas à pas mesure la gravité du caractère non interactif d’une page avant qu’elle ne devienne interactive de manière fiable.
Vous connaissez ces cas douloureux : vous attendez qu’une page se charge, et enfin, elle semble prête. Vous appuyez sur le produit que vous souhaitez voir, mais rien ne se passe. Appuyez-vous à nouveau ? Cette période d’attente est connue pour causer littéralement du stress chez les consommateurs. Essentiellement, TBT est la durée pendant laquelle un consommateur ressent ce stress dû à la non-interactivité d’une page.
Source : web.dev
Cette mesure est mesurée en calculant la somme du temps « bloqué » (tâches qui prennent plus de 50 ms) entre le premier élément de contenu affiché (FCP) et le moment où un utilisateur peut interagir pleinement avec la page (TTI). Par exemple, dans l’image ci-dessus, cinq tâches ont lieu dans le thread principal, mais seulement trois d’entre elles dépassent 50 ms. La première de 200 ms, la seconde de 40 ms et la troisième de 105 ms. TBT est (200+40+105) 345 ms.
Une tâche qui prend plus de 50 ms sera suffisamment longue pour qu’un utilisateur remarque et perçoive la page comme lente, ou pire, inactive, et l’amène à quitter. Pour éviter cela, visez à ce qu’un TBT de moins de 300 ms soit considéré comme rapide. Les TBT entre 300 ms et 600 ms sont considérés comme des vitesses modérées et nécessitent une amélioration. Les TBT plus lents que 600 ms tombent en dessous du 50e percentile et sont considérés comme lents.
Les tâches longues sont généralement causées par un ou plusieurs des éléments suivants :
- Code tiers qui bloque le thread principal pendant 250 ms ou plus
- Le temps d’exécution JavaScript prend plus de 3,5 secondes
- Le thread principal est occupé pendant plus de 4 secondes pendant le chargement
- Un volume élevé de requêtes réseau et de grandes tailles de transfert
Pour améliorer cette mesure, tenez compte des éléments suivants :
- Chargez efficacement du JavaScript tiers à l’aide des attributs async ou DEFER sur les balises de script, établissez des connexions précoces à des origines tierces importantes et utilisez le lazy-loading.
- Pour accélérer l’exécution JavaScript et réduire la charge sur le thread principal, implémentez le fractionnement du code, supprimez le code inutilisé et compressez le code.
- Optimisez CSS et JavaScript pour réduire le nombre de ressources et la taille des transferts.
Temps d’interaction
TTI est la troisième métrique reportée de Lighthouse 5,7, mais Google a réduit son poids de 33 % à 15 % dans Lighthouse 6,0. TTI est une mesure complémentaire de TBT, qui mesure le temps nécessaire à une page pour devenir fiable ou entièrement interactive. Lighthouse considère qu’une page est interactive de manière fiable lorsque le premier élément de contenu est affiché, que ses scripts initiaux (le cas échéant) ont été chargés, et qu’elle peut répondre aux entrées de l’utilisateur dans un délai de 50 ms.
Pour un utilisateur, les TTI lents peuvent donner l’impression qu’une page est inactive ou cassée. Bien qu’une page semble interactive, ce n’est pas parce que le thread principal est bloqué (mesuré par TBT). Lorsque vous auditez votre site Web pour Lighthouse 6,0, visez les TTI en 5,2 secondes ou moins pour être considérés comme rapides. Les TTI entre 5,2 et 7,3 secondes sont considérées comme des vitesses modérées, et les TTI plus lents que 7,3 secondes sont considérés comme lents et auront une incidence sur la volonté des consommateurs de rester sur place.
Si votre audit de score Lighthouse 6,0 montre de mauvaises vitesses TTI, cela peut être dû à un ou plusieurs des facteurs suivants :
- Grandes tailles de charge utile et long temps d’analyse de script
- Temps de chargement des ressources longs
- Le code tiers bloque le thread principal pendant 250 ms ou plus
- Chaînes de demandes critiques
- Vitesse du thread principal et temps d’exécution JavaScript lents
- Nombre élevé de ressources ou tailles de transfert importantes
Réduire le temps TTI peut être fait en optimisant votre JavaScript. Cela inclut :
- Réduisez et compressez les fichiers JavaScript pour réduire la taille de la charge utile et le temps d’analyse des scripts.
- Demandes de préchargement et/ou ajout de préconnexion pour des temps de chargement plus rapides.
- Chargez efficacement du JavaScript tiers en utilisant les attributs async ou defer sur les balises de script et en utilisant le lazy-loading.
- Réduisez l’effet des chaînes de requêtes critiques sur les performances en réduisant le nombre de ressources critiques et en optimisant l’ordre dans lequel les ressources restantes sont chargées.
- Implémentez le fractionnement du code, supprimez le code inutilisé et compressez le code pour réduire la charge sur le thread principal et le temps d’exécution JavaScript.
- Optimisez CSS et JavaScript pour réduire le nombre de ressources et la taille des transferts.
Décalage de mise en page cumulé
CLS est la troisième nouvelle métrique introduite dans Lighthouse 6,0, et c’est la seule à ne pas remplacer une métrique de Lighthouse 5,7. CLS représente les 5 derniers % de votre score Lighthouse 6,0 et mesure la stabilité visuelle.
Cette mesure mesure la fréquence à laquelle les utilisateurs subissent des changements de mise en page inattendus. Vous avez déjà fait l’expérience : vous êtes sur le point de toucher un produit, et BAM, soudain, vous touchez autre chose sur la page parce que les éléments ont changé. Ces expériences peuvent être assez ennuyeuses et considérées comme janky pour un utilisateur.
CLS est mesuré par la somme totale de tous les scores de décalage de mise en page individuels pour chaque décalage de mise en page inattendu qui se produit pendant toute la durée de vie de la page. Un bon CLS est inférieur à 0,1 et se classe dans le 75e percentile pour la performance. Un CLS entre 0,1 et 0,25 est considéré comme modéré, et toute mesure supérieure à 0,25 tombe en dessous du 50e percentile et est considéré comme lent par Google.
Si vous trouvez un CLS médiocre lors de votre audit de score Lighthouse 6,0, cela est probablement dû à l’un des facteurs suivants :
- Une image ou une vidéo se redimensionnant elle-même
- Police qui se charge tardivement et qui s’affiche plus ou moins grande que prévu
Pour améliorer cette mesure, tenez compte des éléments suivants :
- Incluez les dimensions exactes sur vos images et éléments vidéo
- Évitez les publicités contextuelles ou les bannières
- Évitez les polices provoquant un FOIT/FOUT
Les scores Lighthouse vous montrent ce que Google pense de votre site
Le score de performance Lighthouse d’une page indique comment Google perçoit la page en termes de vitesse. Chaque mesure dans Lighthouse 6,0 reflète la meilleure tentative de Google pour mesurer la façon dont les utilisateurs perçoivent la vitesse. Si un score tombe en dessous des normes, il sera perçu comme lent, non seulement par les utilisateurs, mais par le géant de la recherche lui-même, ce qui aura des impacts négatifs sur les revenus et le référencement.
Google classe les sites plus rapidement et plus haut sur la page de résultats des moteurs de recherche. Au-delà du référencement, la vitesse du site a eu un impact significatif sur les conversions et les revenus. Amazon, par exemple, a constaté qu’un retard de 1 seconde dans le chargement de la page pouvait coûter à l’entreprise 1,6 milliard de dollars de perte par an.
Résultat
Cette dernière version de Lighthouse démontre l’accent mis par le géant de la recherche sur les métriques de vitesse perceptuelles. Les métriques de notation de Lighthouse 6,0 tentent de mesurer la rapidité avec laquelle les visiteurs perçoivent votre page comme entièrement chargée (même si elle exécute toujours des processus en arrière-plan).
Trois indicateurs, First Contentful Paint, Speed Index et Greatest Contentful Paint, mesurent la vitesse de charge perçue et représentent 55 % de votre score de performance. Visez des FCP de 2 secondes, des LCP de 2,5 et des SIS de 4,3 secondes ou moins.
Un autre 40 % d’un score de performance est basé sur des métriques perceptuelles mesurant la réactivité d’une page. Il s’agit notamment du temps de blocage total et du temps d’interactivité. Un audit de score FAST Lighthouse 6,0 affichera un TBT en moins de 300 ms et un TTI en moins de 5,2 secondes, ou un utilisateur percevra votre site comme Janky.
Enfin, personne n’aime le texte ou les images qui sautent dans et hors de l’écran. Le décalage de mise en page cumulatif est la sixième mesure à prendre en compte dans votre audit Lighthouse 6,0. Visez des mesures CLS inférieures à 0,1, et vous recevrez la totalité des 5% du poids qu’il détient dans votre score de performance.
Pour recevoir une liste de contrôle simple couvrant les vitesses que vous devriez viser à fournir dans votre audit de score Lighthouse 6,0, ainsi que les techniques d’optimisation par métrique, veuillez remplir le formulaire ci-dessous.
