A propos

Auditer, améliorer et monitorer le plus régulièrement et automatiquement possible son site web constituent la clé d'un bon référencement par les moteurs de recherche.

De fait, un site lent, ne respectant pas les standards d'accessibilité ou les bonnes pratiques de développement aura peu de chances de figurer dans les 10 premiers sites affichés lors d'une recherche sur Google.

Rassurez-vous : une bonne (éco-) conception et un peu de bons sens (pas d'images qui pèsent 5 mo...) vous permettront assez facilement d'obtenir des scores corrects.

Google a mis à disposition des développeurs, depuis plusieurs années, différents outils qui vous aideront à mieux analyser la performance de votre site web.

Par exemple, Lighthouse est fourni dans le navigateur Chrome (> Plus d'outils > Outils de développement > Lighthouse), vous permettant de lancer un test "à la volée" sur la page affichée.

Mais, il est assez fastidieux de lancer manuellement ces tests sur plus d'une page, quand vous souhaitez effectuer des comparaisons. Et je suis tombé par hasard, en 2023, sur les travaux de Zach Leatherman.

Le créateur du framework Eleventy avait en effet publié un projet personnel nommé 'speedlify' qui se proposait d'automatiser les appels à l'API Google Lighthouse, via un module NPM dédié nommé 'performance leaderboard'.

Après l'avoir utilisé quelques mois pour mesurer les performances des sites institutionnels de l'emblématique indice CAC40, j'ai souhaité le réécrire en appelant directement l'API en question.

J'ai donc bâti une application en Vue.js, mon framework Javascript de prédilection. Et voici, WebCheck'CAC40 !

Un tableau collationne les 4 métriques principales issues de Lighthouse (performance, accessibilité, Bonnes pratiques, SEO), chacune notée sur 100, ainsi que la répartition du poids des pages auditées. Plus la note globale est proche de 400, meilleur est le site !

Un clic sur l'une des lignes du tableau vous permet de récupérer des indicateurs encore plus fins, comme le FCP, le SI, le LCP, le TBT ou encore le CLS.

En sus, un affichage de l'empreinte carbone de la page est proposée, via Website Carbon Calculator, en fonction de la disponibilité de l'API.

Cet outil évoluant régulièrement, vous pouvez avantageusement consulter le changelog pour suivre les nouveautés.

Retrouvez davantage d'informations sur la génèse de cet outil en lisant ce billet de mon blog personnel.