Largest Contentful Paint (LCP)

Ce que vérifie ce contrôle

Lit le LCP depuis Google PageSpeed Insights (qui exécute Lighthouse contre votre URL). La valeur est le temps, en secondes, jusqu’à ce que le plus grand élément au-dessus de la ligne de flottaison finisse de s’afficher — généralement une image hero, une affiche vidéo ou un gros titre.

Valeur LCP	Verdict
≤ 2,5 s	Bon
2,5–4,0 s	À améliorer
> 4,0 s	Mauvais

Pourquoi c’est important

Le LCP est l’un des trois Core Web Vitals de Google. Un LCP médiocre ne fait pas que rétrograder votre classement — il se propage à chaque tunnel de conversion. Les données de Google montrent que les pages avec un LCP sous 2,5 s ont un taux de rebond ~25 % plus bas que celles au-dessus de 4 s.

Le LCP est dominé par la vitesse de chargement de l’élément LCP — pas par la vitesse d’exécution de votre JavaScript. L’élément LCP est presque toujours une image. Donc 80 % des corrections LCP concernent la livraison d’images.

Comment le corriger

Par ordre d’impact approximatif :

1. Précharger l’image LCP. Dans votre <head> :

<link rel="preload" as="image" href="/hero.webp" fetchpriority="high" />

Cela démarre le téléchargement de l’image avant que le navigateur ait fini de parser le reste du HTML.

2. Servir des formats modernes. AVIF ou WebP, avec un repli JPEG pour les anciens navigateurs :

<picture>
  <source srcset="/hero.avif" type="image/avif" />
  <source srcset="/hero.webp" type="image/webp" />
  <img src="/hero.jpg" alt="..." width="1200" height="600" fetchpriority="high" />
</picture>

3. Définir des dimensions explicites sur le <img> (attributs width + height). Les navigateurs réservent l’espace sans attendre que l’image charge.

4. Redimensionner pour le viewport. Ne servez pas une hero 4000×3000 à un mobile. Utilisez srcset avec plusieurs résolutions.

5. Auto-héberger les polices ou utiliser font-display: swap. Une webfont bloquant le rendu retarde l’élément LCP s’il s’agit d’un titre.

6. Sortir l’image LCP du lazy-loading. Si votre bibliothèque charge tout en lazy, la hero doit explicitement s’en exclure (loading="eager", fetchpriority="high").

Questions fréquentes

Mon élément LCP est du texte, pas une image. Et maintenant ?

Vous êtes déjà en bonne forme — le texte s’affiche vite. Le correctif concerne en général les ressources bloquantes : différer le JS non critique, inliner le CSS critique, éliminer les webfonts bloquantes.

Pourquoi mon LCP diffère entre PageSpeed et mon propre navigateur ?

PageSpeed simule une connexion 4G lente sur un Android milieu de gamme. Votre machine de dev est en fibre. Fiez-vous toujours aux données terrain (CrUX), pas à votre DevTools local.

Un CDN aide-t-il pour le LCP ?

Oui — un CDN réduit le temps d’aller-retour vers votre serveur d’origine, ce qui raccourcit directement le temps pour démarrer le téléchargement de l’image. Cloudflare, Bunny et Fastly sont des choix courants.