Migrating L'Équipe's website from Nuxt 2 to Vue 3 and TypeScript

France's leading sports media platform reached a performance ceiling. We moved it to an island architecture while ensuring minimal side effects.

Context

L'Équipe is the leading sports media platform in France. The website serves millions in monthly visits. The scale peaks in the hundreds of millions of visits during big events like the World Cup and the Olympics.

The problem

When incremental tuning did not pay off as much as it used to, we knew we had to pivot the strategy if we wanted to make meaningful progress. The goal was to move well into the top 10 of France's Media category in the performance rankings.

The approach

The default choice was to upgrade from Nuxt 2 to Nuxt 3. Though it would guarantee better security and better developer experience, it would not guarantee tangibly better performance.

The approach was to strip everything down to the basics: Node.js and Express, with Vue for its component approach and server rendering capability, and TypeScript for safe type checking and fewer bugs.

Astro was tempting, but the existing codebase was in Nuxt, so migrating to Vue 3 was sensible and far easier. We took Astro's concept of island architecture and rebuilt it for our Vue 3 needs.

My work

I personally worked and reported on these lines:

The Lives listing and Lives pages, where matches and races were live-streamed and commented on
The rankings and results pages
Rework of the athlete profile pages
Core Web Vitals mainly around those pages: diagnosing and fixing LCP, CLS and INP regressions
New feature delivery alongside product owners and designers, with pixel-accurate rendering for desktop and mobile devices
Integration of web experiences of those pages into the native iOS and Android apps, through a custom PWA mechanism
End-to-end coverage of the platform's critical journeys with Cypress

The result

The migration was the work of eight engineers. The observable outcomes are as follows:

Roughly 50% of the URLs flagged "needs improvement" turned green on mobile, and roughly 90% on desktop, measured in Google Search Console

Google Search Console results for L'Équipe's URLs after the migration

Core Web Vitals improved across the whole site
L'Équipe reached 6th place in the Fasterize ranking of the most visited French sites, media category, at the date that ranking was published
95% of technical regressions were dealt with in the following two weeks

Sources

Figures on this page come from material L'Équipe published itself.

De SPA à MPA: reprendre en main la performance, on the L'Équipe tech blog
The Fasterize ranking of the most visited French sites
The CTO's note on LinkedIn