Tech & Web

LCP (Largest Contentful Paint) : Définition, Seuils et Optimisation

Qu'est-ce que le LCP et comment est-il calculé ?

Le Largest Contentful Paint mesure le moment précis où le plus grand élément visible de la page termine son rendu dans le viewport. Les éléments pris en compte par le navigateur sont :

  • Images (<img>) — Y compris les images de premier plan et les images SVG.
  • Images d'arrière-plan CSS — Chargées via background-image: url().
  • Éléments vidéo — L'image poster ou la première frame affichée.
  • Blocs de texte — Les éléments contenant des noeuds texte (<h1>, <p>, etc.).

Le navigateur rapporte continuellement de nouveaux candidats LCP à mesure que la page se charge. Le dernier candidat rapporté avant que l'utilisateur interagisse (clic, scroll, frappe) devient le LCP final.

Seuils LCP : bon, à améliorer ou mauvais ?

Google définit trois niveaux de performance pour le LCP, mesurés au 75e percentile des visites réelles :

Temps LCPÉvaluationImpact utilisateur
≤ 2,5 sBonChargement perçu comme rapide, taux de rebond faible
2,5 s – 4 sÀ améliorerChargement perceptible, risque d'abandon accru
> 4 sMauvais53 % des visiteurs mobiles quittent la page

Les 4 phases du LCP

Pour optimiser efficacement le LCP, il faut comprendre ses quatre sous-parties. Chacune représente une étape du processus de chargement :

  • TTFB (Time to First Byte) — Temps entre la requête du navigateur et la réception du premier octet de réponse du serveur. Objectif : < 800 ms.
  • Resource Load Delay — Délai entre le TTFB et le début du chargement de la ressource LCP. Causé par les ressources bloquantes (CSS, JS).
  • Resource Load Duration — Temps de téléchargement de la ressource LCP elle-même (image, police). Dépend de sa taille et du débit réseau.
  • Element Render Delay — Temps entre la fin du téléchargement et le rendu effectif à l'écran. Causé par le JavaScript bloquant le thread principal.

Quelles sont les causes d'un LCP lent ?

Plusieurs facteurs contribuent à un LCP dégradé. Voici les causes les plus fréquentes :

  • Temps de réponse serveur élevé (TTFB) — Hébergement lent, absence de CDN, requêtes base de données non optimisées.
  • Ressources bloquant le rendu — CSS et JavaScript volumineux dans le <head> qui retardent l'affichage.
  • Images non optimisées — Formats lourds (PNG, BMP), dimensions excessives, absence de compression.
  • Chargement côté client (CSR) — Les applications SPA qui nécessitent JavaScript pour afficher le contenu principal.
  • Polices web bloquantes — Le texte ne s'affiche pas tant que la police custom n'est pas téléchargée (FOIT).

8 conseils pour améliorer votre LCP

  1. Optimisez et compressez vos images — Convertissez en WebP ou AVIF, redimensionnez aux dimensions d'affichage réelles et utilisez le responsive images (srcset).
  2. Préchargez la ressource LCP — Ajoutez <link rel="preload" as="image" href="hero.webp"> dans le <head> pour la prioriser.
  3. Réduisez le TTFB — Utilisez un CDN, activez la mise en cache serveur et optimisez vos requêtes backend.
  4. Éliminez le CSS bloquant — Injectez le CSS critique en inline et chargez le reste en asynchrone avec media="print".
  5. Différez le JavaScript non essentiel — Utilisez les attributs defer ou async sur les scripts tiers.
  6. Utilisez fetchpriority="high" sur l'image LCP — Indique au navigateur de prioriser cette ressource dans la file de téléchargement.
  7. Évitez le lazy loading sur l'élément LCP — L'attribut loading="lazy" retarde le chargement et dégrade le LCP.
  8. Configurez font-display: swap — Affichez un texte de remplacement immédiatement pendant le chargement de la police personnalisée.

Votre LCP dépasse-t-il les 2,5 secondes ?

Mesurez gratuitement le LCP de votre site et recevez un diagnostic complet avec des recommandations d'optimisation personnalisées.

Tester mon site →