Mise à jour performance du blog
J'ai travaillé sur la mise à jour de la perf du blog suite aux conseils d'un expert SEO. J'ai appris énormément de choses intéressantes grâce à lui et j'essaye de les mettre en application. Le but étant d'améliorer l'expérience de navigation sur la 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.
FAQ
À quoi servent concrètement les façades pour les iframes YouTube ou SoundCloud ?
Une façade remplace l'iframe par une image ou un bloc statique qui ne se charge qu'au survol ou à l'entrée dans le champ de vision. Cela évite de bloquer le rendu de la page avec du contenu lourd que les robots SEO n'indexent de toute façon pas.
Faut-il supprimer ses modules pour améliorer les performances ?
Non, l'idée est plutôt de changer la façon dont ils sont chargés. On peut par exemple différer le chargement des CSS et scripts non indispensables à l'affichage initial, sans rien retirer du site.
Combien de temps faut-il prévoir pour ce type d'optimisation ?
Moins d'une journée de travail suffit pour appliquer les principales optimisations front-end et constater des gains significatifs sur les scores Lighthouse.
Lighthouse est-il le bon outil pour mesurer ces améliorations ?
C'est un bon point de départ accessible directement depuis Chrome, mais le mieux reste de combiner cet outil avec un accompagnement humain pour identifier ce que les scores seuls ne montrent pas forcément.
Est-ce que Next.js garantit de bonnes performances dès le départ ?
Next.js offre de très bonnes bases, mais l'ajout progressif de modules tiers peut rapidement dégrader les scores. Les optimisations front-end restent indispensables au fil du temps.
Alexandre P.
Développeur passionné depuis plus de 20 ans, j'ai une appétence particulière pour les défis techniques et changer de technologie ne me fait pas froid aux yeux.
Poursuivre la lecture
