Mise à jour performance du blog

Les besoins en performance

Vous connaissez peut-être Lighthouse ? L'extension Chrome de Google qui permet d'évaluer la performance de votre site. Je me suis penché dernièrement sur la performance du blog et j'essaie d'obtenir les meilleurs scores afin d'améliorer votre confort et aussi afin de m'amuser un peu, je dois l'admettre.

La performance, ce n'est pas que pour faire joli : plus votre site est pratique, rapide et ergonomique, plus le classement SEO est meilleur.

J'ai fait pas mal de choses sur le blog pour qu'il soit optimisé pour le SEO. Je me pensais pas mal à ce niveau. Mais en ce moment, je me fais accompagner par un expert SEO, en la personne de Sébastien Schuck , qui est à la fois bon techniquement et bon en contenu. Il m'a prouvé que j'avais tort de penser que le travail était fini. Je suis très satisfait de nos sessions, et je ne peux que vous recommander ses services.

Mon score Lighthouse avant optimisation

En mobile, j'obtenais un très mauvais 37/100 :

En desktop, j'étais à 58/100 :

Pourquoi ces résultats ?

Next.js seul est très performant, mais il se trouve qu'au fil du temps, j'ai ajouté des modules additionnels. Entre les extensions de charts, la coloration syntaxique pour les blocs de code, la gestion du markdown, les iframes YouTube, les iframes SoundCloud, etc... Tout cela ne fait qu'alourdir le chargement de mes pages.

Pour autant, faut-il supprimer les modules ?

Absolument pas, il faut optimiser notre manière de nous en servir. Compresser au maximum, décaler le chargement des modules non bloquants pour la page, etc. En gros, si vous n'avez pas besoin d'un CSS pour que la page commence à s'afficher, vous pouvez faire en sorte que son chargement soit non bloquant, et il en va de même pour les scripts.

De plus, les iframes peuvent se gérer différemment. Étant donné que les robots SEO ne prennent pas en compte ce contenu, il est inutile de les charger automatiquement si vous n'en avez pas besoin. Vous pouvez créer une façade (une image ou un bloc placeholder) qui pourra charger dynamiquement le contenu sur un mouseover ou avec un intersection-observer.

Voici un exemple de façade (à gauche) et d'iframe à droite :

Ici, à gauche, vous avez une façade, et une fois que la souris passe dessus, avec un mouseover, je vais intégrer dynamiquement l'iframe YouTube. Cette manœuvre permet de charger du contenu lourd après le contenu de vos pages, en permettant à Google de crawler tout ce qui est important d'abord.

Il en est de même pour tout le contenu en dessous de la ligne de flottaison. Si votre contenu est en bas de la page, l'utilisation d'une façade est plus que recommandée !

J'avais déjà travaillé sur des optimisations côté serveur, mais j'admets que je n'avais pas trop poussé les optimisations côté front. Maintenant que je m'y suis mis, je trouve que les changements sont drastiques : il y a un avant et un après !

Mon score Lighthouse après optimisation

En mobile, je passe à 88/100 :

En desktop, je passe à 97/100 :

Bilan après optimisation du blog

Ces optimisations sont assez rapides à faire et demandent moins d'une journée de travail, pourquoi s'en priver ?

Aussi, je recommande à tous ceux qui veulent se lancer sur ce chantier d'utiliser les bons outils et de ne pas hésiter à se faire accompagner. Nous n'avons pas la science infuse.