Optimiser son site web avec Lighthouse

Cet article vise à démontrer que des gains rapides peuvent être réalisés pour rendre son site plus vert, en suivant simplement les recommandations d’outils très accessibles du navigateur : EcoIndex et Lighthouse pour n’en citer que 2 directements utilisables dans Chrome.

Bien sûr, il ne s’agit pas de s’arrêter à ces premières actions, mais si tous les sites pouvaient déjà bénéficier de quelques heures d’attention écoresponsable, tout le monde se porterait un peu mieux.

Je peux regretter moi-même de n’avoir pas fait cet effort plus tôt, ou invité à le faire à plusieurs occasions.

Voici donc les étapes que j’ai suivies pour mon site de test (celui que vous voyez).

Etat des lieux

L’outil EcoIndex permet d’avoir une première mesure synthétique de l’empreinte environnementale en Consommation d’eau et émission de CO2, et un score coloré de A à G, comme pour mon frigo.

Les paramètres servant au calcul du score sont donnés : le Poids de la page, la complexité (taille du DOM) et le nombre de requêtes avec des indications générales sur comment les améliorer.

Pour une analyse plus fine, le site EcoIndex invite à installer et utiliser le plugin GreenITAnalysis pour produire l’EcoIndex en s’appuyant en particulier sur Lighthouse.

Pour poursuivre l’analyse et l’amélioration, partons directement de ce qui existe sur Chrome : Lighthouse.

Le premier rapport Lighthouse donne des scores pas bons pour un site statique sur les différents axes Performance (69), Accessibility (86), Best Practices (83), SEO (92).

Par où commencer ?

Les premiers conseils de chaque catégorie Lighthouse sont ceux qui rapportent le plus. Etonnemment ils sont aussi raccord avec la diminution d’impacts sociaux (accessibilité) et environnementaux (performance). En suivant le principe de Pareto, commençons donc par l’aspect Performance et progressons sur les quick-wins faciles à corriger, sur l’ensemble des catégories.

Les outils de développement standard de chaque navigateur permettent aussi de ce rendre compte des éventuelles erreurs sur la page. Ici aucune, mais ce serait les premières à investiguer et corriger pour une valeur “fonctionnelle” du site en plus d’éviter d’appeler des ressources inutilement.

En se donnant moins de 2 heures TVA comprise, Tests de Valeur Appréciée ;-) voici les corrections que j’ai pu mettre en place.

Performance - URL de publication du site

Dans l’onglet DevTools network, il apparaît que les ressources sont chargées du moins appelées 2 fois ! Une fois à l’url racine (sans www) et une fois avec www l’url de redirection cible.

La modification dans Hugo consiste simplement à modifier dans la configuration, l’url de publication pour être conforme à celle de routage en www.

Best practices - Utiliser les dernières versions des bibliothèques

Le premier conseil de cette rubrique porte sur les versions de bibliothèque javascript comportant des failles de sécurité.

Pour bootstrap et jquery, il est facile de récupérer les dernières versions direrctement minifiées. Bien sûr cela demande quelques précautions avec des tests de non régression.

(30 min)

Performance - Supprimer les bibliothèques js / css inutiles

Dans l’onglet Coverage, nous pouvons voir le taux d’utilisation des CSS/Javascript au cours de la navigation. En ayant pris soin de parcourir les différentes sections qui peuvent solliciter des ressources différentes, nous constatons les bibliothèques inutilisées (100%)

Performance - Images Taille et format

Utiliser le format Webp au lieu du jpg. J’en profite pour changer d’image pour une plus petite, sans dégrader l’UX ni “l’image de marque” du site.

Best-practies

Fournir une image de taille adaptée à l’affichage. En l’occurence, cette recommandation apparaît demandant de fournir une image deux fois plus grande. Je juge cela non utile du point de vue impact et passe au suivant.

Accessibility - Images / Logos

Accessibilité : Utiliser des couleurs avec un meilleur contraste entre le texte et le fond.

Avec l’outil https://coolors.co/contrast-checker vous saisissez vos valeurs et Click to enhance propose une meilleure couleur.

Accessibilité : Mettre un texte alt aux images du logo.

Les prochaines fois

Me voici venu à bout, en quelques minutes, des principaux défauts remontés par Lighthouse et obtenu une nette amélioration des scores, qui passent au vert.

Motivant !

Pour itérer un peu plus tard, je note quelques pistes à investiguer, qui peuvent aussi se rencontrer sur bon nombre de sites:

• réduire l’import de bootstrap et jquery au strict nécessaire (CSS / JS)
• faire un pas de plus vers l’accessibilité (usage des ARIA)
• optimiser le serveur et la publication (cache Apache - NGINX et CDN)