LightHouse, optimisez votre site web et votre SEO

LightHouse, optimisez votre site web et votre SEO

by Johan Chemin Posted in Outils

LightHouse est un outil fourni par Google. Il permet de réaliser des audits de page web publics, de site où un identifiant est demandé ou de SaaS. 

Le logo de LightHouse

Utilisable de plusieurs manières selon vos besoins, c’est un outil puissant pour travailler le référencement et améliorer l’expérience utilisateurs de votre site. Vous lui donnez une URL, il se charge de générer un rapport sur tout ce qui peut être optimisé. Vous aurez ainsi des recommandations sur les performances de votre site, son accessibilité, son référencement naturel et sur les bonnes pratiques pour une page web. 

Comment l’utiliser ? 

Le plus simple est d’installer l’extension disponible ici. Vous n’aurez plus qu’à vous mettre sur la page voulue, et cliquer sur le bouton « Generate report » pour accéder au rapport. 

Mais il existe 3 autres manières de l’utiliser :  

  • Via la console de chrome, dans l’onglet « audit » (un peu plus friendly pour les développeurs, voici le github pour les intéresser) 
  • En ligne de commande (pour automatiser depuis un script Shell) 
  • Avec un module Node js (pour l’intégrer à vos services et le gérer comme vous le souhaitez). 

Qu’est-ce qu’il vérifie ? 

LightHouse vérifie 4 mesures pour vous donner l’état de votre site internet. Il attribue à chacune un score entre 0 et 100. Le but est de se rapprocher au maximum de 100. 

Rapport LightHouse pour Catchr
Le rapport sortie sur catchr.io.

Les performances

LigthHouse teste ici la vitesse de chargement de votre site. Il se base sur plusieurs caractéristiques : 

  • « First ContentFul Paint », le temps que met le premier élément du DOM à se charger dans votre navigateur. 
  • « First Meaningful Paint », le temps que met le premier contenu à s’afficher pour l’utilisateur.  
  • « Speed Index », le temps que met le contenu à se charger dans votre page. LightHouse génère une vidéo de l’affichage de votre page et compte le nombre d’images que met votre contenu à s’afficher. 
  • « First CPU idle », le temps mis par votre page pour devenir au minimum interactive : lorsque suffisamment d’éléments sont chargés pour que l’utilisateur puisse interagir et que le temps de réponse soit correct. 
  • « Time to Interactive », le temps mis par votre page pour devenir complètement interactive : ici il faut que votre contenu soit affiché (calculé avec le « First Meaningful Paint ») et que les actions de vos utilisateurs aient une réponse de moins de 50 millisecondes. 
  • « Max Potential First Input Delay », le temps maximum que peut expérimenter un utilisateur après une action sur votre page. 

Pour augmenter ce score (et réduire vos temps de chargement), il y a quelques actions rapides à mettre en place systématiquement : réduisez au maximum la taille de vos images (tout en gardant un minimum de qualité). Enlevez le code inutile (il ne faut pas d’élément HTML en trop, de CSS inutile…). Minifiez le CSS et le JavaScript. Évitez les redirections trop nombreuse avant d’arriver à votre page. LightHouse vous dira quelles sont les optimisations que vous pouvez encore réaliser.  

L’accessibilité 

Votre site est considéré comme accessible s’il peut être utilisé par littéralement tout le monde. Il est facile de concevoir un site pour le plus grand nombre. Mais tout le monde ne navigue pas sur internet grâce à une souris ou à un clavier. L’accessibilité vise à rendre votre site consultable pour les personnes ayant des difficultés ou des handicaps. Cela passe par certaine pratique de LightHouse évalue ici. Nous verrons ici les principales recommandations pour rendre votre site accessible :  

  • Suivez une construction logique de votre page en HTML. Les titres principaux doivent être en <h1>, les secondaires en <h2> et ainsi de suite. Les éléments de textes dans une balise <p>. Le déroulement de la page doit être logique et utilisable en utilisant la touche fabulation de votre clavier pour passer d’élément en élément. Les listes doivent être dans des balises <ul/ol> <li> 
  • Un utilisateur doit pouvoir rentrer et sortir de chaque élément au clavier. Il ne doit pas se retrouver dans une boucle qui l’empêcherait de continuer sa lecture de la page. 
  • Les éléments interactifs doivent se distinguer lorsqu’ils sont sélectionnés. Un bouton qui a le focus doit avoir une petite animation pour signifier que c’est un bouton sélectionné. 
  • Les couleurs du fond d’écran et du contenu doivent suffisamment se distinguer pour une lecture facile et agréable. 
  • La page doit avoir une balise <title> qui donne un résumé du contenu. 
  • Chaque élément de contenu HTML doit avoir ses propriétés correctement renseignées. Une balise <img> pour une image doit avoir l’attribut « alt » correctement indiqué. Il en va de même pour tout élément qui ne serait pas un texte, il doit être interprétable pour quelqu’un qui écouterait le contenu de votre page. 

Il existe beaucoup de règles pour rendre votre site accessible. LightHouse vous fournira une liste complète de recommandations. 

Le SEO

LightHouse s’assure que votre page est construite pour bien respecter les conditions des navigateurs. Tout ceci mérite un article a part entière que vous trouverez ici.

Votre référencement naturel dépend aussi des performances de votre site et de son accessibilité. En travaillant ces 2 points, vous améliorez le score SEO. 

Les bonnes pratiques

Les bonnes pratiques sont un ensemble de recommandations pour la mise en place de votre site internet. Voici les principales bonnes pratiques à respecter :  

  • Mettez un Doctype dans vos pages HTML « <!DOCTYPE html> ». Cela permet au navigateur de savoir comment charger votre page et lui évite parfois un rendu étrange (le « quirks mode » qui survenait parfois quand Internet Explorer était encore dans ses anciennes versions et était très utilisé). 
  • Sécurisez vos sites grâce à un certificat SSL : votre URL doit alors commencer par https://. Il existe des services gratuits vous le permettant, par exemple Letsencrypt.
  • Évitez d’avoir des erreurs dans la console du navigateur : corrigez-les, votre site s’en portera mieux et LightHouse appréciera. Vos pages se chargeront plus rapidement et vous améliorez vos performances et votre SEO. 
  • Respectez le ratio de vos images. Si celle-ci est déformée, vous serez pénalisé. Vous pouvez vérifier les attributs « width » et « height » de vos balises <img>. Ceux-ci doivent conserver le ratio initial de l’image. Votre CSS peut aussi modifier une image. 
  • Vérifier que vos librairies JavaScript sont à jour et n’ont pas de failles. LightHouse vous avertira si vous utilisez une ancienne version ou si une faille a été détectée dans une librairie que vous utilisez. Il vous faudra alors la mettre à jour sans tarder. 

Pour conclure : 

LightHouse est un outil très complet pour l’audit de votre site internet et à l’avantage d’être complètement gratuit. Chaque point étudié par cet outil viendra avec son lot de recommandations pour l’optimiser. Et bien souvent des explications pour les réaliser. Il serait dommage de passer à côté, car il vous permet de gagner des places en référencement naturel, d’améliorer votre expérience utilisateur et ainsi de satisfaire plus de visiteurs.