L’essentiel
- Un bon LCP est de 2,5 secondes ou moins, mesuré sur 75 % des visites
- L’élément LCP est souvent l’image du hero ou la photo produit
- Quatre étapes le composent : réponse serveur, délai de chargement, téléchargement, affichage
- Une image LCP en chargement différé (lazy loading) est une erreur fréquente
- PageSpeed Insights indique quel élément est retenu comme LCP
Les seuils du LCP#
| Score | Temps |
|---|---|
| Bon | 2,5 s ou moins |
| À améliorer | Entre 2,5 et 4 s |
| Mauvais | Plus de 4 s |
Google retient la valeur au 75e centile des visites réelles, sur mobile et sur desktop séparément.
Les quatre étapes qui composent le LCP#
Un LCP lent vient rarement d’une seule cause. Google le découpe en quatre sous-parties, et PageSpeed Insights les affiche pour chaque page :
- Temps jusqu’au premier octet (TTFB) : le serveur met du temps à répondre.
- Délai de chargement de la ressource : le navigateur découvre l’image trop tard, par exemple parce qu’elle est appelée en CSS ou en JavaScript.
- Durée de chargement de la ressource : l’image est trop lourde.
- Délai d’affichage : l’image est là, mais des scripts ou des feuilles de style bloquent son rendu.
Savoir laquelle des quatre étapes pèse le plus évite de compresser des images pendant des jours alors que le problème vient du serveur.
Comment améliorer le LCP#
- Ne jamais mettre l’image LCP en lazy loading. L’attribut loading= »lazy » sur l’image du hero retarde exactement l’élément qui compte.
- Signaler la priorité avec l’attribut fetchpriority= »high » sur cette image, ou un préchargement.
- Servir des formats légers (WebP, AVIF) aux bonnes dimensions pour chaque écran.
- Réduire le temps de réponse serveur : cache, CDN, hébergement dimensionné.
- Retirer les ressources bloquantes : CSS non critique, polices chargées sans stratégie, scripts tiers en tête de page.
Sur les pages catégories e-commerce, le LCP est souvent la première image de la grille produits ou un bandeau promotionnel ajouté par l’équipe marketing. Un bandeau de 1 Mo placé en haut de page peut faire basculer tout un gabarit dans le rouge. Je vérifie ce point dans chaque audit SEO technique.
Questions fréquentes#
Que signifie LCP ?
Largest Contentful Paint, soit « affichage du plus grand élément de contenu ». C’est le moment où le contenu principal de la page devient visible.
Comment savoir quel élément est le LCP ?
PageSpeed Insights et l’onglet Performance des outils de développement de Chrome indiquent l’élément retenu, avec sa capture.
Le texte peut-il être l’élément LCP ?
Oui. Sur une page sans grande image, c’est souvent un titre ou un paragraphe. Dans ce cas, le chargement des polices web joue beaucoup.
Un bon score Lighthouse garantit-il un bon LCP ?
Non. Lighthouse simule un chargement. Google juge sur les données terrain des visiteurs réels, visibles dans la Search Console et en haut de PageSpeed Insights.