Faire de la webperf sans être déçu

par Mathilde Duboille et François Hendriks, édition 2021

Retour d’experience sur un projet d’amélioration de performance pour un géant de e-commerce du luxe français.

Objectif : Faire passer le score Lighthouse en 3G de 2/100 à 70/100. Ambitieux 🧐 ? Et oui… Mais avec une équipe de choc de 3 développeurs à temps plein sur le projet 🧑🏽‍💻👩🏼‍💻!

Ce talk parlera du gros travail de performance qui a été fait sur un site SSR en NextJS, notamment avec :

🌳 Une réduction drastique de la taille du bundle d’un facteur 3 grâce à du tree shaking et une chasse aux dépendances dupliquées dans un mono-repo.
🤖 Une réduction de 4s sur le Time To Interactive grâce au lazy loading de nos pages mais aussi de nos composants React, tout ca sans impacter le SEO.
💤 Une reduction de moitié du Total Blocking Time grâce à la mise en place d’une solution de Lazy Hydrating.

Malgré tous ces efforts et l’enthousiasme de l’équipe, le projet a été marqué par de nombreux moments de déception.

Spoiler alert : Nous n’avons pas réussi à atteindre la barre des 70/100 ni même la barre des 20/100 en 3G.

Spoiler Alert 2 : En 4G, le score lighthouse est passé de 40 à plus de 95 /100 🎉. Les clients ont remarqué l’énorme amélioration de la performance du site et étaient donc très satisfaits.

Si vous aussi vous avez peur d’être déçu sur vos améliorations de performance, ce talk vous donnera de précieux conseils pour savourer au maximum tous vos efforts.

Présenté par Mathilde Duboille Développeuse Web, Theodo

Développeuse web depuis plus de 2 ans et membre active de la communauté performance et dev front au sein de Theodo.

Présenté par François Hendriks Tech Lead, Theodo

Francois travaille depuis plus de deux ans chez Theodo en tant que Tech Lead. Convaincu que nos outils de développement devraient être écrits dans des langages rapides comme Go ou Rust, il fait régulièrement des audits ou des missions de performance touchant au front comme au back.