Largest Contentful Paint (LCP)
Le Largest Contentful Paint (LCP) est une métrique des Core Web Vitals qui mesure le temps écoulé entre le début de la navigation et la fin du rendu du plus grand élément visible dans la fenêtre d'affichage. C'est le principal indicateur de Google pour estimer « le moment où la page semble chargée pour l'utilisateur ».
Le Largest Contentful Paint (LCP) est une métrique des Core Web Vitals qui mesure le temps écoulé entre le début de la navigation et la fin du rendu du plus grand élément visible dans la fenêtre d'affichage. C'est le principal indicateur de Google pour estimer « le moment où la page semble chargée pour l'utilisateur ».
Pourquoi c'est important
Le LCP est l'un des trois Core Web Vitals et un signal de classement confirmé par Google. Les seuils de Google : bon ≤ 2,5 s, à améliorer 2,5 à 4,0 s, médiocre > 4,0 s. Les pages dans la plage « bonne » présentent des taux de rebond mesurablement plus faibles et de meilleures conversions, et un LCP défaillant au 75e centile peut pénaliser les classements sur les requêtes concurrentielles.
Ce qui compte comme « plus grand élément »
Le LCP suit le plus grand élément peint dans la fenêtre d'affichage visible. Les candidats éligibles incluent les <img>, les images de couverture des <video>, les images d'arrière-plan chargées via la fonction CSS url() et les nœuds de texte de type bloc. Le « plus grand » élément peut changer pendant le chargement : le LCP retient l'élément qui s'avère finalement être le plus grand.
Causes fréquentes d'un LCP lent
Réponse serveur lente (TTFB) : si le HTML met 1,5 s à arriver, le LCP ne peut pas être inférieur à 2,5 s.
Ressources bloquant le rendu : le CSS et le JS synchrones dans l'en-tête retardent le premier rendu.
Images non optimisées : l'image principale est souvent l'élément LCP. Des images surdimensionnées, non compressées ou chargées tardivement sont à l'origine de la plupart des échecs de LCP.
Rendu côté client : les frameworks SPA qui effectuent le rendu en JS après l'hydratation repoussent le LCP bien au-delà du seuil « bon ».
Chargement différé de l'élément LCP : ajouter loading="lazy" à l'image principale est une erreur courante : cela retarde l'élément même que le LCP mesure.
Comment améliorer le LCP
Précharger l'image principale : <link rel="preload" as="image" href="..."> donne au navigateur une longueur d'avance.
Utiliser des formats d'image modernes : WebP et AVIF réduisent la charge utile de 30 à 50 % par rapport au JPEG.
Ajouter fetchpriority="high" à l'image principale pour qu'elle passe devant les autres ressources.
Servir depuis un CDN afin de réduire le TTFB pour les utilisateurs éloignés.
Intégrer le CSS critique en ligne et différer le reste.
Utiliser le SSR ou la génération statique au lieu du rendu côté client pour les pages riches en contenu.
Mettre en cache de façon agressive en périphérie pour les visiteurs récurrents.
Mesurer le LCP
Données de terrain : Chrome UX Report (CrUX), le rapport Core Web Vitals de Google Search Console, PageSpeed Insights, qui reflètent de vrais utilisateurs.
Données de laboratoire : Lighthouse, WebPageTest, le panneau Performances des Chrome DevTools, reproductibles mais synthétiques.
Google classe sur le 75e centile des données de terrain ; les tests synthétiques seuls ne suffisent donc pas.
Sources :