Passer de 4,2 s à 0,9 s de chargement : ce qui a réellement compté
Retour sur l'optimisation d'une application React lente, et sur les trois changements qui ont produit 90 % du gain.
- Performance
- React
- Web
Une application interne mettait plus de quatre secondes à devenir utilisable. Après mesure, trois changements ont suffi à ramener ce délai sous la seconde. Voici lesquels, dans l'ordre de leur impact réel.
Mesurer avant de toucher au code
La première étape n'était pas une optimisation, mais une mesure. Sans profil précis, on optimise au hasard et on perd du temps sur des détails invisibles.
Les métriques que je surveille :
- LCP (Largest Contentful Paint) — quand l'utilisateur voit le contenu principal
- TBT (Total Blocking Time) — combien de temps la page reste figée
- Poids du JavaScript transmis — souvent la vraie cause
Dans notre cas, le diagnostic était sans appel : 1,8 Mo de JavaScript envoyés au premier chargement.
1. Découper le bundle par route
L'application chargeait l'intégralité du code, y compris l'éditeur de rapports que 5 % des utilisateurs ouvraient réellement.
const ReportEditor = lazy(() => import("./ReportEditor"));
Résultat : -62 % de JavaScript au premier chargement. C'est le changement qui a produit le plus gros gain, pour environ deux heures de travail.
2. Remplacer les bibliothèques trop lourdes
Une bibliothèque de manipulation de dates représentait à elle seule 71 ko compressés, pour trois appels de formatage. Intl.DateTimeFormat, disponible nativement, a suffi.
new Intl.DateTimeFormat("fr-FR", { dateStyle: "long" }).format(date);
Le réflexe utile : avant d'installer un paquet, vérifier son poids réel et se demander si la plateforme ne fait pas déjà le travail.
3. Servir les images au bon format et à la bonne taille
Des images de 2000 px de large étaient affichées dans des vignettes de 320 px. Passer à un format moderne et à des tailles adaptées a supprimé près de 900 ko.
Le bilan
| Changement | Gain sur le LCP |
|---|---|
| Découpage par route | -1,7 s |
| Bibliothèques allégées | -0,5 s |
| Images optimisées | -1,1 s |
La leçon principale : les gains viennent rarement de micro-optimisations de code. Ils viennent de ce que l'on choisit de ne pas envoyer au navigateur.