Cursor
FigmaOPTIMISER LE LCP
Prérequis
- Accès Lighthouse, Chrome DevTools Performance ou Vercel Speed Insights
- Composant Image next/image sur le hero ou équivalent
- Maquette Figma avec dimensions cibles des visuels above-the-fold
- Projet Next.js avec next/font ou stratégie polices documentée
Le LCP (Largest Contentful Paint) mesure le temps d’affichage du plus grand élément visible. Sur un site vitrine Next.js, le coupable habituel est l’image hero ou la police de titre. Vous allez identifier l’élément LCP, optimiser images et polices, puis valider l’impact en lab et en données field.
Comprendre le LCP sur un site vitrine
Le LCP mesure le rendu du plus grand élément visible dans le viewport initial — souvent l’image hero, un bloc texte large ou une bannière.
Un mauvais LCP dégrade l’expérience mobile et peut impacter la visibilité SEO sur les pages à fort trafic.
Sur Next.js, le diagnostic commence par une trace Performance : repérez la ressource marquée LCP dans le waterfall réseau.
Image LCP : format, taille et priority
Utilisez `next/image` avec `priority` sur l’élément LCP uniquement — pas sur toutes les images above-the-fold.
Servez AVIF ou WebP, dimensions proches du rendu réel, attribut `sizes` cohérent avec le layout responsive.
Évitez le lazy-load sur l’image LCP : `priority` ou `loading="eager"` selon l’API Image.
Polices web et rendu du titre
Préférez `next/font` pour l’auto-hébergement et la réduction des requêtes tierces.
Limitez les graisses chargées (souvent 2 familles × 2 graisses suffisent sur un vitrine).
Utilisez `display: swap` ou l’équivalent next/font pour éviter le FOIT prolongé sur le titre hero.
Erreurs fréquentes
Mettre `priority` sur toutes les images : le navigateur ne sait plus quoi charger en premier.
Hero 3000 px exporté Figma alors que le rendu max est 1200 px : poids inutile.
Polices Google Fonts chargées en parallèle de next/font : double téléchargement.
Optimiser en lab sans vérifier le field (CrUX, Search Console, Speed Insights).
Ce qu’il faut retenir
Une seule image `priority`, formats modernes, dimensions réalistes.
Polices auto-hébergées et subset de graisses.
Mesure field pour valider l’impact réel utilisateur après déploiement.
FAQ
C’est le seuil « bon » Google au 75e percentile. Priorisez les pages à fort trafic et conversion ; ajustez le hero avant la longue traîne.
Oui si un titre ou paragraphe occupe la plus grande zone visible. Dans ce cas, optimisez surtout les polices et le CSS bloquant.
Pas systématiquement. Évitez que l’animation retarde le rendu de l’élément LCP ; testez avec prefers-reduced-motion activé.
