LCP (Largest Contentful Paint)

Définition

Le LCP (Largest Contentful Paint) mesure le temps nécessaire pour que le plus grand élément de contenu visible dans le viewport soit entièrement rendu. C’est l’un des trois Core Web Vitals de Google et un facteur de ranking depuis 2021.

Un bon LCP indique que le contenu principal de la page se charge rapidement.

Seuils de performance

• Bon : ≤ 2,5 secondes
• À améliorer : 2,5 - 4 secondes
• Mauvais : > 4 secondes

L’objectif est d’atteindre le seuil “bon” pour au moins 75% des chargements de page.

Éléments mesurés par le LCP

Le LCP ne mesure pas le chargement complet de la page, mais le plus grand élément visible :

• Images (y compris images de fond via CSS)
• Balises <video> avec poster
• Éléments avec images de fond chargées via url()
• Blocs de texte (paragraphes, titres)

Ce qui n’est pas mesuré

• Éléments avec opacity:0
• Éléments hors viewport
• Éléments de faible taille

Pourquoi le LCP est important

Perception utilisateur

Le LCP représente le moment où l’utilisateur “voit” le contenu principal. Avant ça, la page semble vide ou en chargement.

Facteur de ranking

Depuis juin 2021, le LCP fait partie des signaux Page Experience de Google.

Corrélation avec les conversions

Un LCP rapide corrèle avec de meilleurs taux de conversion et engagement.

Mesurer le LCP

Outils de terrain (données réelles)

• Google Search Console : Rapport Core Web Vitals
• Chrome UX Report (CrUX) : Données utilisateurs réels
• PageSpeed Insights : Section “données de terrain”

Outils de lab (tests contrôlés)

• Lighthouse : Dans Chrome DevTools
• PageSpeed Insights : Section “données de lab”
• WebPageTest : Tests détaillés

API JavaScript

L’API PerformanceObserver permet de mesurer le LCP en conditions réelles.

Causes courantes de mauvais LCP

Images non optimisées

L’élément LCP est souvent une image. Si elle est lourde ou lente à charger, le LCP souffre.

Temps de réponse serveur lent (TTFB)

Un serveur lent retarde tout, y compris le LCP.

CSS et JavaScript bloquants

Des ressources render-blocking empêchent le rendu du contenu.

Chargement client-side (JavaScript)

Le contenu généré par JavaScript côté client est plus lent à apparaître.

Polices web lentes

Si le texte attend le chargement d’une police, le LCP est retardé.

Optimiser le LCP

Images

• Préchargez l’image LCP : <link rel="preload" as="image" href="...">
• Utilisez des formats modernes (WebP, AVIF)
• Dimensionnez correctement (pas de 4000px pour un hero)
• CDN pour les assets

Serveur

• Améliorez le TTFB (hébergement, cache, CDN)
• Utilisez HTTP/2 ou HTTP/3
• Activez la compression

CSS et JavaScript

• Inlinez le CSS critique
• Différez le CSS non critique
• Utilisez async ou defer pour les scripts
• Supprimez le code inutilisé

Polices

• Préconnectez aux domaines de polices
• Utilisez font-display: swap
• Hébergez les polices localement si possible

Cas particulier : Hero images

L’image hero est souvent l’élément LCP. Optimisations spécifiques :

• Préchargez-la avec priorité élevée
• Évitez le lazy loading sur cette image
• Servez la bonne taille via srcset
• Évitez les images de fond CSS si possible

Conclusion

Le LCP est un indicateur crucial de la performance perçue et un facteur de ranking. Visez moins de 2,5 secondes pour 75% des utilisateurs. Identifiez l’élément LCP de vos pages clés et optimisez spécifiquement son chargement. Utilisez les données de terrain (CrUX, Search Console) pour mesurer l’expérience réelle des utilisateurs.