Performance web : optimiser les Core Web Vitals de vos applications Angular et React

Depuis que Google a intégré les Core Web Vitals dans son algorithme de classement, la performance web est devenue un enjeu SEO autant qu'un enjeu d'expérience utilisateur. LCP, CLS, INP : ces trois métriques mesurent concrètement ce que ressent l'utilisateur face à votre application. Voici comment les comprendre, les mesurer et les améliorer dans vos projets Angular et React.

Comprendre les trois métriques clés

Le Largest Contentful Paint (LCP) mesure le temps d'affichage du plus grand élément visible — généralement une image hero ou un bloc de texte principal. Un bon LCP doit être inférieur à 2,5 secondes. Le Cumulative Layout Shift (CLS) quantifie la stabilité visuelle : un score inférieur à 0,1 indique que les éléments ne "sautent" pas pendant le chargement, ce qui est frustrant pour l'utilisateur. Enfin, l'Interaction to Next Paint (INP), qui a remplacé le FID en 2024, mesure la réactivité globale de la page lors de toutes les interactions — clics, saisies clavier, tapotements — et doit rester sous 200 ms pour être considéré comme bon.

Mesurer avec les bons outils

Avant d'optimiser, il faut mesurer avec précision. Lighthouse (intégré dans Chrome DevTools) donne un audit instantané en conditions de laboratoire — utile pour détecter des régressions pendant le développement. Le PageSpeed Insights de Google combine ces données de lab avec des données de terrain réelles (Chrome User Experience Report), ce qui reflète l'expérience de vos vrais utilisateurs. Pour aller plus loin, la bibliothèque JavaScript web-vitals vous permet d'intégrer la collecte de métriques directement dans votre application et de les envoyer à votre système d'analytics pour un monitoring continu en production. Enfin, WebPageTest offre des simulations avec throttling réseau et conditions mobiles qui révèlent souvent des problèmes invisibles en développement local.

Optimiser le LCP : images et ressources critiques

L'image hero est souvent la principale cause d'un LCP dégradé. Utiliser le format WebP ou AVIF réduit le poids de 30 à 50 % sans perte de qualité visible. L'attribut fetchpriority="high" sur l'image LCP demande au navigateur de la télécharger en priorité, avant même que le parser HTML n'ait fini son travail. Dans Angular, le NgOptimizedImage (disponible depuis Angular 15) gère automatiquement le lazy loading, les tailles responsives et le fetchpriority — son adoption seule peut améliorer le LCP de plusieurs secondes. Côté React, des composants comme next/image (Next.js) ou la librairie react-intersection-observer permettent un lazy loading intelligent. Pensez également au preload des polices critiques et à l'élimination du CSS inutilisé via PurgeCSS ou le mode JIT de Tailwind.

Améliorer INP et CLS dans vos SPA

Les Single Page Applications (SPA) Angular et React sont particulièrement exposées à un INP élevé à cause du JavaScript long à exécuter. La stratégie la plus efficace est le code splitting avec le lazy loading des routes : Angular le supporte nativement avec loadComponent(), et React avec React.lazy(). Déplacer les traitements lourds dans des Web Workers libère le thread principal pour les interactions utilisateur. Pour le CLS, réservez toujours l'espace des images avec des attributs width et height ou des conteneurs aspect-ratio, et préférez les animations CSS aux animations JavaScript qui modifient le layout. Dans Angular, la détection de changements zoneless combinée à ChangeDetectionStrategy.OnPush réduit considérablement le nombre de re-renders inutiles, ce qui améliore directement l'INP.