Optimisation des applications React pour les Core Web Vitals

La performance d’une app React n’est pas seulement la vitesse — c’est comment le site se ressent pour l’utilisateur. Google mesure cela avec trois métriques principales :

• LCP (Largest Contentful Paint) : temps avant l’affichage du contenu principal.
• INP (Interaction to Next Paint) : délai de réponse après un clic ou un toucher.
• CLS (Cumulative Layout Shift) : quant le layout « saute » pendant le chargement.

La bonne nouvelle : améliorer ces métriques ne demande pas de magie. Il faut mesurer, prioriser et appliquer de bonnes pratiques.

---

1. Évitez les re-renders inutiles

Chaque render coûte du CPU. Si un composant re-render sans raison, vous perdez en performance sans gain.

Utilisez React.memo, useMemo et useCallback seulement où ça aide :

tsxCopier
const ExpensiveList = React.memo(({ data }) => {
  // affiche une grande liste
});

const Container = ({ items }) => {
  const sortedItems = useMemo(() => sortData(items), [items]);
  const handleClick = useCallback(() => console.log('clicked'), []);

  return <ExpensiveList data={sortedItems} onClick={handleClick} />;
};

Conseil : utilisez-les sur de grandes listes ou des calculs lourds. Les appliquer partout peut compliquer le code et même dégrader la performance.

---

2. Divisez le bundle avec React.lazy

Les grosses apps envoient beaucoup de JavaScript au premier chargement. Cela retarde le LCP. Chargez seulement ce dont l’utilisateur a besoin maintenant :

tsxCopier
import React, { Suspense } from 'react';
const Dashboard = React.lazy(() => import('./Dashboard'));

function App() {
  return (
    <Suspense fallback={<div>Chargement...</div>}>
      <Dashboard />
    </Suspense>
  );
}

Les routes ou modules lourds arrivent à la demande, et le premier chargement reste plus léger.

---

3. Optimisez images et polices

• Utilisez WebP ou AVIF quand possible.
• Pour les polices, font-display: swap évite le texte invisible pendant le téléchargement.
• Servez des images à la bonne taille avec srcset et loading="lazy".

Ces changements touchent directement le LCP — la métrique liée à ce qui apparaît à l’écran.

---

4. Mesurez avant d’optimiser

Des outils comme Lighthouse, WebPageTest et le React Profiler montrent où le temps est passé.

Sans mesure, vous optimisez au feeling.

---

5. Références utiles

• React Docs – Performance
• Google Web.dev – Core Web Vitals
• Webpack Bundle Analyzer
• React Profiler
• Lighthouse CLI

---

Conclusion

Améliorer les Core Web Vitals en React est un travail continu : moins de re-renders, bundles plus petits, images et polices bien configurées — et mesure constante.

Le résultat est un site plus rapide et plus agréable à utiliser.