Core Web Vitals et LCP sur Next.js : corrections concrètes

2026-08-08

Le LCP (Largest Contentful Paint) mesure le moment où le plus grand élément visible se stabilise. Sur un portfolio Next.js, c'est presque toujours l'image hero.

Objectif

Viser un LCP mobile < 2,5 s sur les URLs stratégiques (home, services, contact).

Corrections prioritaires

Servir le hero en WebP compressé (qualité ~75–80).
Fournir un srcset + sizes adaptés au viewport.
Ajouter un preload avec imagesrcset / imagesizes.
Déclarer width et height pour limiter le CLS.
Éviter unoptimized sur l'image LCP si le pipeline Next Image est disponible.

Ce qu'il ne faut pas faire

Preload une seule largeur 1920w pour tous les mobiles.
Charger JPG 400+ Ko en LCP alors qu'un WebP < 100 Ko existe.
Se fier uniquement au score Lighthouse desktop.

Mesure

Validez dans Search Console (Expérience de page) et chrome://traces ou Web Vitals extension. Corrélez avec le déploiement (cache CDN, headers).