Optimiser les Core Web Vitals (LCP, INP, CLS) sur Next.js 15
Méthodes avancées pour atteindre un score PageSpeed de 100/100 avec les Server Components, le streaming SSR et la réduction de bundle JS.
Pourquoi les Core Web Vitals sont décisifs en 2025
Google a fait des Core Web Vitals un critère majeur de classement SEO et d'expérience utilisateur. Un score LCP supérieur à 2.5s ou un score INP au-dessus de 200ms dégrade directement vos conversions organiques.
Dans cet article, je partage les optimisations techniques que j'applique lors de mes audits de performance frontend.
1. Réduire le Largest Contentful Paint (LCP) < 1.2s
Le LCP mesure le temps nécessaire pour afficher le bloc de contenu principal (souvent une image Hero ou un gros titre).
- **Fetch Priority & Preload** : Marquez toujours l'image Hero principale avec `priority` et supprimez le lazy-loading pour ce visuel précis.
- **Polices auto-hébergées avec `next/font`** : Évitez les requêtes externes Google Fonts et utilisez `display: swap` avec préchargement des sous-ensembles latins.
- **Server Components (RSC)** : Éliminez le JavaScript d'hydratation pour tout le contenu statique au-dessus de la ligne de flottaison.
2. Maîtriser l'Interaction to Next Paint (INP)
L'INP a remplacé le FID pour mesurer la réactivité globale de l'interface lors des clics et interactions utilisateur.
- **Découpage des tâches longues (Long Tasks > 50ms)** : Utilisez `requestIdleCallback` ou `scheduler.postTask` pour différer les scripts d'analytics et de tracking.
- **Transitions React 19** : Enveloppez les mises à jour d'état non urgentes dans `useTransition` pour laisser le thread principal réactif aux clics.
3. Zéro Cumulative Layout Shift (CLS = 0)**
Pour éviter les sauts de page désagréables : - Définissez systématiquement `width` et `height` explicites sur tous les conteneurs média. - Réservez l'espace des bannières et popups avec des min-heights CSS.