GTmetrix, Pingdom, Varvy Pagespeed Optimization, WebPageTest, Google PageSpeed Insights, Google Lighthouse sont des outils pour mésurer la performance des sites web et suggérer les améliorations pour une meilleure expérience utilisateur. Dans cet article, nous allons voir plus en détail Google Lighthouse, qui est un outil open source conçu par Google en 2018 permettant d’améliorer l’expérience utilisateur sur les pages web, en auditant notamment la performance, l’accessibilité, le progressive web app, et le SEO.

Pourquoi c’est important ?
Google accorde beaucoup d’importance à  “l’expérience de page”, faisant partie de l’expérience utilisateur sur le web et prochainement utilisée par l’algorithme de classement du moteur de recherche. Selon Google:“Great page experiences enable people to get more done and engage more deeply; in contrast, a bad page experience could stand in the way of a person being able to find the valuable information on a page” 

Comment l’utiliser ?
Google Lighthouse peut être lancé depuis Chrome via les outils de développement, sa facilité d’emploi le rendant accessible à toute personne concernée par l’expérience utilisateur d’un site web.

  1. Allez sur le site que vous souhaitez auditer via le navigateur Chrome
  2. Appuyez sur Commande + Option + C (Mac) ou Ctrl + Maj + C (Windows, Linux, Chrome OS) pour ouvrir Chrome DevTools.
  3. Cliquez sur l’onglet « Lighthouse »
  4. Cliquez sur « Générer un rapport »

Comment ça marche ?
Google décompose l’expérience de page en plusieurs éléments mesurables, les plus importants étant regroupés dans la partie “Core Web Vitals” :

Core Web Vitals, l'expérience des pages web

Core Web Vitals, l’expérience des pages web

  1. Largest Contentful Paint (LCP), qui mesure le temps de chargement de la page. Il évalue lorsque le plus grand élément de contenu de la fenêtre devient visible. Il peut être utilisé pour déterminer quand le contenu principal de la page a fini de s’afficher à l’écran. Pour offrir une bonne expérience utilisateur, LCP doit se produire dans les 2,5 secondes suivant le début du chargement de la page. Les causes les plus courantes d’un mauvais LCP sont:
    • Temps de réponse du serveur lents,
    • JavaScript et CSS bloquant le rendu
    • Temps de chargement des ressources lents
    • Rendu côté client.
  2. First Input Delay (FID), qui mesure l’interactivité avec l’utilisateur. Il capture la première impression d’un utilisateur sur l’interactivité et la réactivité d’un site. Il mesure le temps entre le moment où un utilisateur interagit pour la première fois avec une page et le moment où le navigateur est réellement capable de répondre à cette interaction. Pour offrir une bonne expérience utilisateur, les pages doivent avoir un FID inférieur à 100 millisecondes.
    La principale cause d’un mauvais FID est une exécution JavaScript lourde. Optimiser la façon dont JavaScript analyse, compile et s’exécute sur votre page Web réduira directement le FID.
  3. Cumulative Layout Shift (CLS), qui mesure la stabilité visuelle. Pour offrir une bonne expérience utilisateur, les pages doivent conserver un CLS inférieur à 0,1.
Core web vitals metric Google

Core Web Vitals metrics Google

Ces trois “Core web vitals” facteurs clés, sont combinés aux facteurs suivants: 

  1. Mobile Friendly ou l’expérience mobile: La page se charge-t-elle rapidement? Le texte est-il trop petit pour être lu? Les boutons sont-ils trop petits pour être appuyés par le doigt? Le texte ou l’un des éléments de la page se chevauche-t-il d’une manière qui empêche les utilisateurs d’interagir avec la page comme prévu?
  2. Navigation sécurisée: La page contient-elle du contenu malveillant ou des logiciels malveillants? La page inclut-elle du contenu d’ingénierie sociale ou de phishing qui incite les utilisateurs à faire quelque chose de dangereux?
  3. HTTPS: La page est-elle diffusée en toute sécurité via HTTPS (via HTTP)?
  4. Interstitiels non intrusifs: La page affiche-t-elle fréquemment pop-ups,déplacer la page pendant que vous lisez ou rendre difficile la consommation du contenu de la page? Facile d’accès ou de navigation

Ces metrics sont tous réunis pour influencer la compréhension de Google de l’expérience des pages. Chaque élément a son propre poids dans le facteur de classement de l’expérience de page de Google, qui est l’un des nombreux autres facteurs qui alimentent l’algorithme dans son ensemble.

Lighthouse Scoring Calculator

Lighthouse Scoring Calculator

Dans l’exemple ci dessous, le site Carrefour est analysé avec Google Lighthouse via Chrome DevTools:

exemple un Test performance de page web Carrefour

Exemple d’un Test de performance de page web pour Carrefour

Un clic sur le bouton Générer un rapport et le résutat s’affiche après quelques secondes comme ci-dessous:

Exemple d'un rapport de test de performance de page web pour Carrefour

Exemple d’un rapport de test de performance de page web pour Carrefour

Les résultats de l’audit produisent un score pour 5 catégories :

  • Performance du site: vitesse de chargement et d’interactivité
  • Accessibilité: les sites sont totalement responsives et compatibles avec la majorité des écrans, respectent les standards d’accessibilité web
  • Meilleures pratiques: pour les développeurs et les gestionnaire de contenu en back office
  • Progressive web app: promu par Google pour les performances sur le mobile et le classement sur le moteur de recherche
  • Score SEO: analyse de 9 optimisations basiques

Les sites web s’appuyant généralement sur des solutions open source (CMS, Front-end, e-commerce), les stacks suivantes sont prises en charge pour des recommandations plus pertinentes : WordPress, Drupal, React, Angular, AMP, Magento.

En conclusion
L’utilisation de Google Lighthouse peut être la première étape pour un audit sur l’expérience d’un site, et appréhender les éléments à prendre en compte pour l’optimiser. Les résultats des analyses donnent des résultats tangibles et une progression facilement mesurable, les recommandations sont suffisamment explicites et précises pour être prises en charge par les équipes, ce qui peut être un bon moyen d’échange entre des acteurs concernés par le contenu et la réalisation du site. Préconisé par Google, l’outil va sans doute gagner en importance et faire partie des indispensables pour les webmasters, webdesigners, développeurs front-end, referenceurs,..
La partie SEO étant très basique, d’autres outils seront à utiliser en complément. En conclusion, la technique n’est pas un facteur de ranking mais une mauvaise technique est un facteur de deranking.

“While all of the components of page experience are important, we will rank pages with the best information overall, even if some aspects of page experience are subpar. A good page experience doesn’t override having great, relevant content. However, in cases where there are multiple pages that have similar content, page experience becomes much more important for visibility in Search,” selon Google.

Pour aller plus loin:
Staying off the Rocks: Using Lighthouse to Build Seaworthy Progressive Web Apps
Lighthouse : comprendre le score de performance web attribué à votre site https://www.blogdumoderateur.com/lighthouse-score-performance-web/
12 exemples de PWA en 2019 :https://www.artwai.com/12-exemples-de-pwa-en-2019/

Références:
Google LightHouse: https://developers.google.com/web/tools/lighthouse
Page Experience Becomes a Ranking Factor on Google: https://uptickmarketing.com/page-experience-becomes-a-ranking-factor-on-google/
Une nouvelle fonctionnalité pour des audits plus précis sur les CMS: https://www.blogdumoderateur.com/google-lighthouse-nouvelle-fonctionnalite-cms/
LightHouse Scoring Calculator: https://googlechrome.github.io/lighthouse/scorecalc/
Lighthouse best practices: https://web.dev/lighthouse-best-practices/
Formation SEO de Yann Lemort, MBAMCI