Optimiser le LCP sur Next.js

Ouvrez Chrome DevTools, onglet Performance ou Lighthouse, et repérez l'élément marqué LCP. Souvent : image hero, `h1` avec webfont lourde, ou slider.

Testez en build production sur une preview Vercel, pas en `next dev`. Le mode développement fausse les métriques.

Comparez mobile et desktop : l'élément LCP change parfois selon le viewport. Optimisez d'abord la variante mobile si c'est votre trafic majoritaire.

Remplacez les `<img>` bruts par `next/image`. Spécifiez `width` et `height` (ou `fill` avec conteneur dimensionné) pour éviter le layout shift.

Sur l'image LCP, ajoutez `priority` : Next.js précharge et évite le lazy-load sur cet asset.

Servez des tailles adaptées : `sizes` correct pour que le mobile ne télécharge pas une image 2400 px. Formats AVIF/WebP sont gérés automatiquement.

Évitez les carrousels auto-play en hero : le LCP peut être une slide invisible au premier rendu.

Utilisez `next/font` pour héberger les polices sans requête Google Fonts bloquante. Limitez le nombre de graisses chargées.

Le texte hero en webfont non optimisée retarde parfois le LCP plus qu'une image compressée.

Auditez le CSS critique : tout style au-dessus de la ligne de flottaison doit être minimal. Reportez le reste.

Un TTFB élevé retarde tout, y compris le LCP. Privilégiez le statique (`generateStaticParams`) ou le cache ISR pour les pages vitrine.

Sur Vercel, vérifiez que la page n'est pas dynamique sans raison (`force-dynamic` partout est un piège).

Si le LCP dépend de données API lentes, streammez le shell et chargez le bloc lourd en second, ou précalculez.