Performance Web
Qu’est-ce que LCP (Largest Contentful Paint) ?
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.
Définition simple
C'est comme l'heure à laquelle le plat principal est réellement servi, pas celle où les couverts sont posés. 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 marche ?
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.
Impact business
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. Les données terrain (CrUX) montrent qu'un site qui reste en « mauvais » LCP mobile perd souvent plusieurs points de conversion par rapport à la même offre une fois passée sous 2,5 s — l'écart se creuse surtout sur trafic 3G et milieu de gamme Android.
Bonnes pratiques
- Preload l'image LCP si critique, width/height pour éviter le CLS, format WebP/AVIF. Réduire le TTFB. Viser LCP ≤ 2,5 s.
Erreurs communes
- Mettre l'image LCP en lazy loading, ou négliger le TTFB. Sur mobile, une image hero non optimisée dégrade le LCP.
Prompt IA
Contexte : site [Next.js / WordPress / autre], type de page [accueil avec hero / fiche produit / article]. Identifie l’élément LCP probable [image hero / bloc texte / vidéo]. Liste les facteurs qui peuvent dégrader le LCP (TTFB, CSS bloquant, taille image, fonts, SSR vs CSR). Propose un plan en 5 étapes avec exemples concrets (preload, dimensions image, cache, [stack]). Donne des cibles (LCP < 2,5 s) et comment mesurer.
POUR ALLER PLUS LOIN
Passer de la définition à un projet concret.
Comprendre en pratique
- Performance web et SEO : ce qui compte vraimentLa performance web soutient le SEO, l’expérience mobile et la conversion. Voici les indicateurs et les pages à optimiser sans courir après un score parfait.
- Site internet lent : les causes les plus fréquentesUn site internet lent peut faire perdre des visiteurs, des demandes et de la crédibilité. Images, scripts, hébergement, thème, cache, vidéo ou extensions : voici les causes à vérifier en priorité.
- Images trop lourdes : l’erreur invisible qui ralentit un siteLes images trop lourdes ralentissent les sites vitrines, surtout sur mobile. Formats, dimensions, compression, lazy loading, hero et illustrations : voici les points à vérifier pour optimiser sans dégrader le design.
- Performance Web : Pourquoi Next.js Écrase WordPress en 2026Découvrez pourquoi les sites Next.js chargent 3x plus vite que WordPress, consomment 80% moins de ressources serveur et offrent une sécurité bancaire. Analyse technique complète.
QUESTIONS FRÉQUENTES
Aller plus loin sur LCP (Largest Contentful Paint).
Le LCP mesure le moment où le plus grand élément visible (souvent une image ou un bloc de texte) a fini de s’afficher. Il reflète la « vitesse perçue » du chargement. Google recommande un LCP ≤ 2,5 secondes. Au-delà, l’expérience est considérée comme à améliorer. Mesurez avec PageSpeed Insights ou Lighthouse (mobile et desktop).
Priorisez le chargement de l’image LCP : preload (<link rel="preload" as="image" href="...">), dimensions adaptées (width/height pour éviter le CLS), format moderne (WebP/AVIF), CDN. Réduisez le TTFB (serveur rapide, cache) et évitez que le CSS/JS bloquent le rendu. Ne mettez pas l’image hero en lazy loading.
Non. L’élément LCP peut différer (sur mobile une image, sur desktop un bloc de texte plus large) et les temps de chargement varient (réseau, CPU). Google utilise les données terrain (CrUX) par type d’appareil. Optimisez pour les deux ; le mobile est souvent prioritaire car il pèse lourd dans le trafic et l’index mobile-first.