Largest Contentful Paint (LCP) : définition, seuils et solutions

Qu'est-ce que le Largest Contentful Paint (LCP) ?

Le Largest Contentful Paint (LCP) est un Core Web Vital qui mesure le temps nécessaire pour que l'image, le bloc de texte ou la vidéo le plus grand de la zone visible finisse de s'afficher, à compter du moment où le visiteur lance la navigation. Google juge qu'une valeur de 2,5 secondes ou moins est bonne, évaluée au 75e centile de chargements réels, séparément sur mobile et sur ordinateur.

Comme le chronomètre démarre à la navigation, les redirections, l'établissement de la connexion et une réponse lente du serveur comptent aussi. Le LCP est l'un des trois Core Web Vitals, avec l'INP (réactivité) et le CLS (stabilité visuelle).

Seuils du LCP

Une page réussit lorsque le 75e centile de ses chargements se situe dans la plage « bon ». Mobile et ordinateur sont évalués séparément. Les seuils sont maintenus sur web.dev.

Quel élément compte comme élément LCP ?

Le navigateur signale le plus grand de ces éléments visible dans la fenêtre :

• les éléments <img> (la première image pour les images animées)
• les éléments <image> dans un <svg>
• les éléments <video>, avec leur image d'affiche ou leur première image
• les éléments dotés d'une image d'arrière-plan CSS via url() (pas les dégradés)
• les éléments de type bloc qui contiennent du texte

Seule la partie visible compte, et Chromium ignore les éléments d'opacité 0, ceux qui couvrent toute la fenêtre et les images de remplacement. Le candidat peut changer pendant le chargement, par exemple quand une image principale arrive après un titre. Le navigateur cesse de signaler dès que le visiteur touche l'écran, fait défiler ou appuie sur une touche, et les pages chargées dans un onglet en arrière-plan ne sont pas comptées.

Les quatre composantes du LCP

Tout temps de LCP se décompose en quatre parties. web.dev donne ce repère sur la façon dont une page bien réglée répartit son temps, à lire en proportion les unes des autres et non comme des chiffres absolus :

Corrigez la partie qui sort des proportions sur votre page. Un long délai de chargement demande une autre solution qu'un Time to First Byte lent.

Exemple : une image principale que le navigateur découvre tard

Une boutique définit sa photo principale comme background-image CSS dans une feuille de style externe. Le navigateur ne voit pas l'image dans le HTML et attend le CSS avant de lancer le téléchargement. Cela se voit par un délai de chargement de la ressource élevé. Si la photo passe dans un <img> avec une priorité de chargement haute, le navigateur la trouve tout de suite :

<img src="/img/hero-1200.avif" alt="Product dashboard"
     width="1200" height="675" fetchpriority="high">

Un fichier plus léger (voir taille des images) raccourcit ensuite la durée du téléchargement.

Comment améliorer le LCP

• Rendez la ressource LCP découvrable dans le HTML initial, avec src ou srcset dans le balisage plutôt qu'ajouté par JavaScript.
• Si l'image n'est référencée que depuis du CSS ou du JavaScript, préchargez-la avec <link rel="preload">.
• Mettez fetchpriority="high" sur l'image LCP. web.dev prévient que cela n'aide plus quand on l'applique à plus d'une ou deux images.
• Ne chargez jamais l'image LCP en différé. Le chargement différé est fait pour les images sous la ligne de flottaison.
• Allégez le fichier : redimensionnez-le à la taille affichée et utilisez un format moderne comme AVIF ou WebP.
• Réduisez le temps de réponse du serveur avec du cache et un CDN, et évitez les chaînes de redirections.

Erreurs courantes avec le LCP

• Charger l'image principale en différé.
• Cacher l'image principale derrière un carrousel JavaScript ou un rendu côté client, de sorte qu'elle est découverte tard.
• Optimiser l'image alors que le serveur met encore plusieurs secondes à répondre.
• Mettre fetchpriority="high" sur toutes les images.
• Tester uniquement sur une connexion rapide de bureau et se fier à ce chiffre.

Comment mesurer le LCP

Les outils de laboratoire comme Lighthouse et Chrome DevTools mesurent un chargement contrôlé et nomment l'élément LCP, ce qui les rend utiles pour le débogage. Les données de terrain viennent de vrais visiteurs, par exemple du Chrome UX Report, et déterminent si les Core Web Vitals sont réussis ou non. Les deux divergent souvent, car les appareils, les réseaux et les lieux réels varient. Pour consigner le LCP dans le navigateur :

new PerformanceObserver((list) => {
  const entries = list.getEntries();
  const last = entries[entries.length - 1];
  console.log('LCP:', last.startTime, last.element);
}).observe({ type: 'largest-contentful-paint', buffered: true });

Le LCP dans les tests et la surveillance

La surveillance de la vitesse de page de LoadFocus lance des audits Lighthouse planifiés depuis 25 régions cloud et enregistre les Core Web Vitals, LCP compris, si bien qu'une image principale plus lourde ou un serveur plus lent apparaît comme une tendance. Le vérificateur gratuit de Core Web Vitals affiche le LCP de vrais utilisateurs de Chrome pour une URL au 75e centile. Les corrections pas à pas des trois métriques figurent dans notre guide d'optimisation des Core Web Vitals. Pour aller plus loin : surveiller les Core Web Vitals avec des alertes et des rapports et 10 étapes pour un site plus rapide.

Questions fréquentes : Largest Contentful Paint

Qu'est-ce qu'un bon LCP ?

2,5 secondes ou moins au 75e centile des chargements de page. Entre 2,5 et 4,0 secondes, il y a des progrès à faire, et au-delà de 4,0 secondes c'est mauvais.

Pourquoi Lighthouse affiche-t-il un LCP différent de la Search Console ?

Lighthouse mesure un chargement simulé. La Search Console rapporte des données de terrain de vrais visiteurs sur une période, avec de nombreux appareils et réseaux. Servez-vous de la valeur de laboratoire pour trouver les causes et de la valeur de terrain pour juger le résultat.

Comment trouver mon élément LCP ?

Lancez un audit Lighthouse et ouvrez le diagnostic de l'élément Largest Contentful Paint, ou enregistrez une trace dans le panneau Performances de Chrome DevTools. Dans le code, la propriété element de l'entrée largest-contentful-paint le désigne.

Dois-je charger mon image principale en différé ?

Non. web.dev dit de ne jamais charger l'image LCP en différé, car cela ajoute du délai avant même le début du téléchargement. Réservez le chargement différé aux images plus bas dans la page.

Pourquoi le LCP est-il plus lent sur mobile ?

Les téléphones ont en général des processeurs et des connexions plus lents, et la fenêtre plus petite peut faire d'un autre élément le plus grand. Les Core Web Vitals sont donc évalués séparément sur mobile et sur ordinateur.