De l'éco-conception pour le web avec Hugo
Un site vitrine léger et rapide, conçu avec le générateur de site statique Hugo et TailwindCSS : retour sur une démarche d'éco-conception.
Mais qui est ce Hugo dont je vais vous parler ? Notre dernier stagiaire ? Eh bien non, raté !
Hugo est un CMS écrit en Go, d'où son nom, qui plutôt qu'un CMS est un générateur de site statique : du HTML, à l'ancienne, presque. Car si le résultat est bel et bien un site HTML tel qu'on les faisait en 1999 (les gifs en moins), Hugo met à votre disposition pléthore d'outils et de fonctions qui rendent la création de sites plus rapide et plus moderne.
Et comme chez Mu on avait envie de voir ce qu'on pouvait tirer d'une telle solution et jusqu'où on pouvait aller dans l'éco-conception, on a pris quelques jours pour refondre un site vitrine : le site personnel de Guillaume, l'humain derrière Mu.
Hugo : un moteur de template
Hugo permet de séparer la « vue » dans un fichier HTML du contenu (en Markdown), et donc de n'intégrer qu'une seule fois chaque gabarit de page.
Hugo redimensionne et compresse aussi vos images à la volée, fait des boucles, des conditions… bref, tout ce qu'on attend d'un moteur de template moderne, comme Twig ou Blade.
À la sortie, un site HTML natif, qui obtient sans effort 100/100 à Lighthouse. Quand on sait l'importance de ces détails pour le référencement, c'est déjà un argument en soi, sans compter que vos visiteurs ne seront pas tentés de quitter un site trop lent.
Une réflexion globale : les librairies et dépendances
Un site statique est rapide par essence : il faut donc pousser la logique jusqu'au bout. Ce qui ralentit habituellement les sites, ce sont toutes les dépendances qu'on a pris l'habitude d'utiliser par commodité : jQuery, Bootstrap…
On s'en débarrasse donc, tout en gardant un CSS moderne (flexbox, grid, responsive), des assets compilés et un peu d'interactivité (menu responsive, lightbox).
Pour le design, c'est l'occasion de tester TailwindCSS : un framework CSS léger, très configurable et personnalisable, qui permet un développement rapide.
Pour le JavaScript, le plus léger serait de tout faire en JS natif, mais c'est encore rébarbatif. Le site s'appuie donc sur Alpine.js, un framework très léger souvent associé à Tailwind, pour le menu burger sur mobile et la lightbox des photos.
Pour minifier CSS et JS, préfixer le CSS et surtout le purger de toutes les classes inutiles, on utilise PostCSS. Résultat :
- 5,3 Ko de CSS
- 9 Ko de JavaScript
Éco-conception, donc
L'éco-conception web, c'est réduire au maximum l'empreinte écologique d'un site. Et pour ça, on réduit ce dont il a besoin pour fonctionner :
- la bande passante utilisée pour son transfert vers le navigateur ;
- la puissance de calcul nécessaire sur le serveur pour l'afficher ;
- l'espace disque requis pour l'héberger.
Le site pèse quelques dizaines de Ko, et comme c'est du HTML, aucun traitement serveur avant envoi. Pour les photos, Hugo les compresse, les dimensionne et les convertit en WebP, avec un chargement différé natif en HTML5.
Enfin, les polices WOFF2 variables sont chargées en local, et surtout pas depuis un domaine tiers comme Google Fonts. Poids total de la page, avec une grande photo en fond : 180 Ko, dont 100 Ko pour l'image et 45 Ko pour les polices.
Pour aller plus loin : éco-conception et RGPD
Pour mesurer l'audience, Google Analytics impose un bandeau de gestion des cookies. On a donc cherché une alternative légère, hébergée en Europe et libre : Plausible, une petite entreprise allemande autofinancée, open source et auto-hébergeable.
Son script fait 1 Ko et fournit les statistiques essentielles. Les données des visiteurs ne quittent pas l'Europe, et plus de popup agaçant : tout le monde y gagne.
La suite ?
Ce premier site réalisé avec Hugo, en quelques jours seulement, s'avère très convaincant : chargement instantané, design moderne et fluide, et plus de bandeau cookies.
Il faut être honnête : on perd le back-office de WordPress, ce n'est donc pas une alternative complète. Mais quand le client ne modifie pas son contenu lui-même, la vitesse, l'absence de bandeau cookies et l'insensibilité aux attaques deviennent de très bons arguments. Il faut juste savoir quand cette solution est la plus adaptée.
Côté hébergement, c'est très simple : un petit FTP, GitHub Pages ou Netlify suffisent.
Vous êtes intrigué par cette démarche ? Parlons-en.
Comme tout ce que nous utilisons ici est libre, notre template Hugo l'est aussi : mugoPhotos, template Hugo pour photographes, sur GitHub.