Largest Contentful Paint (LCP) : Définition, Thresholds, Fixes
LCP est un Core Web Vital qui mesure quand le plus grand élément visible finit de rendre. ≤ 2,5s = bon. La métrique loading la plus importante.
Qu'est-ce que Largest Contentful Paint (LCP) ?
Largest Contentful Paint (LCP) est un Core Web Vital qui mesure le temps entre le début du chargement de la page et quand le plus grand élément de contenu visible (image, video poster, ou bloc texte) finit de rendre. C'est la métrique que Google utilise pour capturer "cette page est-elle perçue comme rapide ?".
LCP a remplacé d'anciennes métriques proxy comme First Meaningful Paint (FMP) et Speed Index parce qu'elle corrèle mieux avec la perception réelle utilisateur du load speed. L'un des trois Core Web Vitals (avec INP et CLS).
Qu'est-ce qui compte comme élément LCP ?
- Éléments
<img> - Éléments
<image>dans<svg> <video>avec poster image- Éléments avec CSS
background-image - Éléments block-level avec text nodes
Thresholds LCP
| LCP | Rating |
|---|---|
| ≤ 2,5s | Bon |
| 2,5s - 4,0s | Besoin amélioration |
| > 4,0s | Pauvre |
Rapporté comme percentile 75 sur les utilisateurs.
Ce qui contribue au temps LCP
| Phase | Description | Share typique |
|---|---|---|
| TTFB | Temps réponse serveur | ~10-40% |
| Resource load delay | Avant que ressource LCP commence téléchargement | ~10-40% |
| Resource load duration | Combien de temps ressource prend à télécharger | ~10-40% |
| Element render delay | Ressource prête jusqu'à rendu | ~10-30% |
Comment mesurer LCP
API JavaScript
new PerformanceObserver((list) => {
for (const entry of list.getEntries()) {
console.log('LCP:', entry.startTime, 'element:', entry.element);
}
}).observe({ type: 'largest-contentful-paint', buffered: true });Outils
| Outil | Type |
|---|---|
| Lighthouse / PageSpeed Insights | Lab + field (CrUX) |
| Chrome DevTools Performance | Lab |
| Web Vitals Chrome extension | Field |
| web-vitals.js | RUM |
| Search Console CWV report | Field |
| CrUX Dashboard | Field, public |
Optimisations LCP courantes
1. Preload image LCP
<link rel="preload" href="/hero.webp" as="image" fetchpriority="high">2. Utiliser formats image modernes
AVIF ou WebP à quality 70-80 produit des fichiers 30-50% plus petits que JPEG.
3. fetchpriority="high" sur image LCP
<img src="hero.webp" alt="Hero" fetchpriority="high" width="1200" height="675">4. Réduire TTFB
Le temps de réponse serveur plafonne à quelle vitesse LCP peut être.
5. Éliminer ressources render-blocking
CSS bloquant et JS sync dans <head> retardent le rendering.
6. Inliner CSS critique
Styles above-the-fold dans un tag <style> directement dans <head>.
7. Self-host fonts + preload
<link rel="preload" href="/inter.woff2" as="font" type="font/woff2" crossorigin>8. Ne pas lazy-load l'élément LCP
Contre-intuitif, mais loading="lazy" sur l'image hero hurts LCP.
LCP vs autres métriques paint
| Métrique | Ce qu'elle mesure | Statut |
|---|---|---|
| FP (First Paint) | N'importe quoi peint | Diagnostic |
| FCP (First Contentful Paint) | Premier texte/image rendu | Diagnostic |
| FMP (First Meaningful Paint) | Vieux proxy | Deprecated 2020 |
| LCP | Plus grand élément above-fold rendu | Core Web Vital ✓ |
| TTI | Page reliably interactive | Souvent peu fiable |
Pièges LCP courants
- Lazy-load image hero.
- JavaScript lourd bloquant render.
- Web fonts bloquant text render.
- TTFB lent.
- Image hero trop grande.
- CSS background-image comme LCP.
- Délai hydration sur sites SSR.
FAQ : Largest Contentful Paint
Quel est un bon score LCP ?
≤ 2,5 secondes au percentile 75 des utilisateurs.
Comment LCP diffère-t-il de FCP ?
FCP = premier élément rendu. LCP = plus grand élément visible.
Comment je trouve quel élément est mon LCP ?
Chrome DevTools Performance tab Web Vitals overlay.
Pourquoi mon LCP est-il lent sur mobile mais rapide sur desktop ?
Les devices mobile ont des CPUs plus lents, réseaux plus lents.
Le lazy-loading hurts-t-il LCP ?
Si vous lazy-load l'élément LCP : oui.
Puis-je améliorer LCP sans changer mon image hero ?
Oui. Réduire TTFB, défer JS, inliner critical CSS.
Qu'est-ce qui a remplacé FID par INP — affecte-t-il LCP ?
Non. INP est responsiveness, LCP est load speed.
Testez LCP depuis vraies régions avec LoadFocus
LoadFocus exécute des audits Lighthouse depuis 25+ régions globales. Inscrivez-vous sur loadfocus.com/signup.
Outils LoadFocus connexes
Mettez ce concept en pratique avec LoadFocus — la plateforme même qui propulse tout ce que vous venez de lire.