LCP (Largest Contentful Paint) : définition et explications

Le Largest Contentful Paint (LCP) est le temps écoulé entre le moment où un utilisateur commence à charger une page et celui où la plus grande image, la plus grande affiche de vidéo ou le plus grand bloc de texte de la fenêtre visible est affiché. C’est la métrique de chargement des Core Web Vitals, et le chiffre unique le plus proche de « à quel moment la page a-t-elle eu l’air prête ? ».

Seuils

• Bon : 2,5 secondes ou moins
• À améliorer : entre 2,5 et 4 secondes
• Mauvais : plus de 4 secondes

Comme pour tous les Core Web Vitals, Google regarde le 75e centile des chargements réels, séparément pour mobile et ordinateur (web.dev : LCP).

Ce qui compte comme élément LCP

Les candidats sont les images (y compris l’image d’affiche d’une vidéo), les éléments dotés d’une image de fond CSS et les éléments de type bloc qui contiennent du texte. Sur la plupart des pages, le gagnant est l’image hero ou le titre d’ouverture avec son paragraphe. Les éléments que le navigateur considère comme pauvres en contenu, comme les images de fond plein écran ou les espaces réservés transparents, sont ignorés. Le LCP cesse aussi d’être mis à jour dès que l’utilisateur fait défiler la page ou la touche.

Les quatre parties du LCP

Le guide d’optimisation du LCP de web.dev découpe la métrique en quatre parties. Corriger le LCP, c’est trouver laquelle est trop grande :

1. Time to first byte : la réponse du serveur ; voir TTFB.
2. Délai de chargement de la ressource : l’intervalle avant même que le navigateur commence à récupérer l’image LCP.
3. Durée de chargement de la ressource : le temps de téléchargement de l’image.
4. Délai de rendu de l’élément : l’attente avant l’affichage effectif, souvent causée par le CSS ou le JavaScript.

Exemple : une image hero rapide

<img src="/img/hero-1200.avif"
     srcset="/img/hero-800.avif 800w, /img/hero-1200.avif 1200w"
     sizes="100vw" width="1200" height="600"
     fetchpriority="high" alt="Orchid on a sunny windowsill">

Une vraie balise <img> dans le HTML du serveur est découverte immédiatement. fetchpriority="high" la place en tête de la file de téléchargement, AVIF et les tailles adaptatives réduisent le poids, et les attributs width et height évitent un décalage de mise en page à son arrivée.

Erreurs courantes

• Charger l’image hero en différé. loading="lazy" sur une image au-dessus de la ligne de flottaison la retarde volontairement. Réservez le chargement différé au contenu situé plus bas.
• Des images hero définies en CSS ou injectées par JavaScript, que le navigateur découvre tard. Si vous ne pouvez pas l’éviter, ajoutez un <link rel="preload" as="image"> dans le head.
• Des photos de plusieurs mégaoctets envoyées telles quelles aux téléphones.
• Des serveurs lents et des sauts de redirection qui consomment le budget avant que quoi que ce soit ne soit téléchargé.
• Des polices web qui masquent le texte pendant leur chargement ; font-display: swap ou optional permet d’afficher le texte tout de suite.

Le tester

Le test de vitesse de page affiche le LCP terrain de PageSpeed Insights quand il est disponible, avec le temps de réponse du serveur, le poids et les formats des images et les ressources bloquant le rendu : les suspects habituels derrière chaque partie. Le vérificateur d’images signale les fichiers surdimensionnés et les images en chargement différé.

Questions fréquentes