Quels éléments peuvent être l'élément LCP

Le navigateur ne retient que certains éléments : les images, les images placées dans un SVG, les vidéos (via leur image d'aperçu ou leur première image affichée), les éléments dont l'arrière-plan est une image chargée en CSS (les dégradés ne comptent pas) et les blocs contenant du texte. Pendant le chargement, le candidat peut changer : c'est le plus grand élément affiché avant la première interaction qui est retenu.

Les seuils officiels

Un LCP est bon à 2,5 secondes ou moins, à améliorer entre 2,5 et 4 secondes, et mauvais au-delà de 4 secondes. Google évalue le 75e centile des chargements, séparément sur mobile et sur ordinateur : il ne suffit donc pas que la page soit rapide sur votre connexion fibre, il faut qu'elle le soit pour les trois quarts de vos visiteurs, y compris ceux en 4G.

Décomposer le LCP en quatre phases

Pour savoir où se perd le temps, l'équipe Chrome découpe le LCP en quatre durées successives :

  • Temps de réponse du serveur (TTFB) : délai avant le premier octet du HTML.
  • Délai avant le chargement de la ressource : temps pendant lequel le navigateur n'a pas encore découvert ou demandé l'image.
  • Durée de chargement de la ressource : téléchargement de l'image elle-même.
  • Délai de rendu : attente entre la fin du téléchargement et l'affichage, souvent due à du CSS ou du JavaScript bloquant.

Corriger un LCP trop lent

Les correctifs les plus efficaces sont simples : compresser l'image principale et la servir en AVIF ou WebP à la bonne taille, ne jamais lui appliquer de chargement différé (lazy loading), lui donner une priorité haute avec l'attribut fetchpriority, réduire le temps de réponse du serveur grâce au cache et à un CDN, et éviter que le contenu principal soit construit uniquement par du JavaScript côté navigateur.

Corrigez dans l'ordre des phases. Si le temps de réponse du serveur consomme à lui seul l'essentiel des 2,5 secondes, optimiser l'image ne suffira pas : regardez d'abord l'hébergement, le cache et les redirections. Si c'est le délai avant chargement qui domine, l'image est découverte trop tard, souvent parce qu'elle est déclarée en CSS ou injectée par JavaScript : référencez-la directement dans le HTML.