Doing webperf without being disappointed

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

Feedback on a performance optimization project for a French luxury e-commerce giant.

Objective: Increasing the Lighthouse score on 3G from 2/100 to 70/100. Ambitious 🧐? Oh yeah… But with a crack team of 3 full time developers on the project 🧑🏽‍💻👩🏼‍💻!

This talk will talk about the big performance work that has been done on an SSR site in NextJS, including:

🌳 A drastic reduction of the bundle size by a factor of 3 thanks to tree shaking and a hunt for duplicated dependencies in a mono-repo.
🤖 A reduction of 4s on the Time To Interactive thanks to the lazy loading of our pages but also of our React components, all this without impacting the SEO.
💤 A reduction of half of the Total Blocking Time thanks to the implementation of a Lazy Hydrating solution.

Despite all these efforts and the enthusiasm of the team, the project was marked by many moments of disappointment.

Spoiler alert: We didn’t manage to reach the 70/100 mark or even the 20/100 mark in 3G.

Spoiler Alert 2: In 4G, the lighthouse score went from 40 to over 95 /100 🎉. Customers noticed the huge improvement in site performance and were therefore very satisfied.

If you too are worried about being disappointed with your performance improvements, this talk will give you valuable tips on how to make the most of your efforts.

Presented in French by Mathilde Duboille Web Developer, Theodo

Web developer for more than 2 years and active member of the performance and front-end dev community within Theodo.

Presented in French by François Hendriks Tech Lead, Theodo

Francois has been working for more than two years at Theodo as a Tech Lead. Convinced that our development tools should be written in fast languages such as Go or Rust, he regularly does audits or performance missions involving both the front and back ends.