Nouveau site
Le plus gros point sur lequel j’ai avancé ces dernières semaines, c’est créer un nouveau site. Je vous invite à aller lire mon précédent article, “Notre nouveau site, avec mode sombre !" pour y voir ce qui a changé.
Performance de construction du site
En utilisant hugo --templateMetrics --templateMetricsHints, j’ai réussi à passer de ≈14s de build time à ≈10s.
4 secondes ce n’est pas beaucoup, mais ce qui est le plus important est que ce temps est maintenant plutôt linéaire,
alors qu’avant il était polynomial.
Ce que je veux dire par là, c’est que chaque page générait des partials – des bouts de page.
La plupart de ces bouts de page étaient les mêmes partout (ex : le pied de page),
ou pour chaque partie du site (ex : l’en-tête).
En utilisant les cached partials d'Hugo, j’ai pu réutiliser les bouts de page déjà générés quand ce sont les mêmes, au lieu d’en regénérer des nouveaux. Ça change quelques secondes aujourd’hui, mais ça aura un très gros impact plus tard à mesure que ce site grossira.
Vitesse de chargement des pages
| Page | Avant | Après |
|---|---|---|
| https://monkiprojects.com/ | 93/100 sur mobile, 98/100 sur ordinateur | 93/100 sur mobile, 98/100 sur ordinateur |
| https://monkiprojects.com/blog/our-new-website-with-dark-mode/ | 76/100 sur mobile, 93/100 sur ordinateur | 90/100 sur mobile, 98/100 sur ordinateur |
Voir https://web.dev/performance-scoring/ pour le calcul des scores.
Problèmes (reglés ou non)
Les images n’ont pas la bonne taille
Serve images that are appropriately-sized to save cellular data and improve load time.
Dans notre dernier article, avec beaucoup d’images, Google a estimé le gain de temps à ≈180s !
Charger les images dans des formats nouvelle génération
Image formats like JPEG 2000, JPEG XR, and WebP often provide better compression than PNG or JPEG, which means faster downloads and less data consumption.
Dans notre dernier article, avec beaucoup d’images, Google a estimé le gain de temps à ≈30s !
Cumulative Layout Shift (déplacement cumulé de la page)
Cumulative Layout Shift measures the movement of visible elements within the viewport.
Nos pages ont un fort Cumulative Layout Shift (CLS). Je n’ai pas encore essayé d’améliorer ça, mais je le ferai un jour.