Définition technique
Métrique Core Web Vitals qui mesure le moment où le plus grand élément de contenu visible (image, bloc de texte, vidéo) a fini de s’afficher. Représente la « vitesse de chargement perçue » du contenu principal. Bon LCP : ≤ 2,5 s. Éléments éligibles : <img>, <svg> dans <img>, <video> (poster), bloc de texte (éléments block contenant du texte). Facteurs influençant le LCP : temps serveur (TTFB), ressources bloquantes (CSS, JS), taille et priorisation des images, rendu côté client (SSR vs CSR). Le LCP est mesuré jusqu’à la première interaction (scroll, clic) ; après, la métrique est figée. Précharger l’image LCP (preload), optimiser le TTFB (serveur, CDN) et éviter que le CSS ou le JS ne bloque le rendu du contenu principal sont les leviers les plus efficaces.
Comment ça fonctionne ?
Le navigateur identifie le plus grand élément visible (image, bloc de texte, vidéo) et enregistre le moment où son rendu est terminé. Le LCP est figé à la première interaction. TTFB et priorisation des images influencent la métrique.
L'erreur classique à éviter
Mettre l'image LCP en lazy loading, ou négliger le TTFB. Sur mobile, une image hero non optimisée dégrade le LCP.
Impact business : pourquoi s'en soucier ?
Un LCP médiocre augmente le taux de rebond et envoie un signal négatif à Google. Optimiser le LCP (hébergement, CDN, priorisation des ressources, lazy loading ciblé) améliore le référencement et la conversion, surtout sur mobile. Une page qui « s’affiche vite » (bon LCP) donne confiance et réduit les abandons avant lecture ou achat. Le LCP est l’un des trois piliers des Core Web Vitals ; le négliger peut coûter des positions en recherche et des ventes.
La règle d'or
Preload l'image LCP si critique, width/height pour éviter le CLS, format WebP/AVIF. Réduire le TTFB. Viser LCP ≤ 2,5 s.