À quoi sert le LCP

Le LCP répond à une question simple : au bout de combien de temps le visiteur voit-il le contenu principal de la page ? Il chronomètre l'affichage du plus grand élément visible au chargement, à partir du moment où le visiteur a lancé la navigation. C'est l'un des trois Core Web Vitals, avec l'INP (réactivité) et le CLS (stabilité visuelle).

Google indique que ses systèmes de classement utilisent les Core Web Vitals. Il précise aussi qu'un bon score ne garantit pas les premières positions : la pertinence du contenu passe avant.

Comment le LCP est calculé

Les éléments pris en compte

Le navigateur retient le plus grand élément parmi les images (y compris une image dans un SVG), les vidéos, les éléments avec une image de fond CSS et les blocs de texte. Il cesse de mettre le LCP à jour dès que le visiteur interagit avec la page : clic, défilement ou touche du clavier.

Les seuils de Google

LCPVerdict
2,5 s ou moinsbon
entre 2,5 et 4 sà améliorer
plus de 4 smauvais

La valeur retenue est le 75e percentile des chargements, séparément sur mobile et sur ordinateur : trois visites sur quatre doivent passer sous le seuil.

Les quatre temps du LCP

web.dev découpe le LCP en quatre parties : le temps de réponse du serveur (TTFB), le délai avant que le navigateur commence à charger la ressource principale, la durée de ce chargement, puis le délai de rendu. Les deux délais devraient chacun rester sous 10 % du total ; le temps de réponse et le chargement font l'essentiel du reste.

Comment mesurer le LCP

Les données terrain viennent de vrais visiteurs de Chrome (Chrome UX Report). Tu les trouves dans le rapport Core Web Vitals de la Search Console et dans PageSpeed Insights, qui les calcule sur les 28 derniers jours. Ce sont elles qui reflètent l'expérience réelle.

Les données de laboratoire viennent d'un test simulé (Lighthouse, PageSpeed Insights, outils de développement de Chrome) sur un appareil et un réseau fixes. Elles servent à diagnostiquer, et peuvent différer des données terrain.

L'audit SEO de Pushrank relève le LCP de tes pages principales sur mobile et sur ordinateur, avec les données réelles de Chrome quand Google en a et un test Lighthouse.

Erreurs fréquentes

  • Charger l'image principale en différé. Un loading="lazy" sur l'image LCP retarde son téléchargement. web.dev recommande l'inverse : fetchpriority="high".
  • Cacher l'image dans le CSS ou un script. Le navigateur la découvre tard. Elle doit apparaître dans le HTML initial.
  • Oublier le serveur. Un temps de réponse lent retarde tout. Les redirections en chaîne et les paramètres d'URL qui empêchent la mise en cache par un CDN l'aggravent.
  • Se fier à un seul test Lighthouse. Un bon score en labo ne prouve rien si les données terrain restent mauvaises.

Exemple concret

Une page d'accueil s'ouvre sur une grande photo. Sur mobile, la donnée terrain affiche un LCP de 4,2 secondes : mauvais. Le test Lighthouse montre que la photo est chargée en différé et pèse 900 Ko en JPEG. L'équipe retire le loading="lazy", ajoute fetchpriority="high" et sert l'image en WebP, compressée et à la bonne taille pour chaque écran. Le test de labo passe sous 2,5 secondes. La donnée terrain suit en quelques semaines, le temps que la fenêtre de 28 jours se renouvelle.