Guides

LCP, abreviation de Largest Contentful Paint, est l'un des Core Web Vitals de Google, les metriques que Google utilise pour noter l'experience de page en conditions reelles. Il mesure la performance de chargement : le temps ecoule entre le debut du chargement de la page et le rendu du plus grand element de contenu visible dans le viewport. En termes simples, c'est le moment ou votre contenu principal apparait vraiment a l'ecran.

L'element observe par le LCP est celui qui est le plus grand dans le viewport initial pendant le chargement de la page. La plupart du temps, il s'agit de l'image hero, d'un grand bloc de texte, de l'image de couverture d'une video ou d'une grande image d'arriere-plan. Google mesure le moment ou cet element precis termine son rendu, car c'est le point ou la page parait chargee pour une vraie personne, plutot que vide ou a moitie dessinee.

Les seuils de Google sont clairs. Un LCP de 2,5 secondes ou moins est Bon, entre 2,5 et 4 secondes il Necessite une amelioration, et au-dela de 4 secondes il est Mauvais. Comme les autres Core Web Vitals, le LCP est evalue sur des field data au 75e centile des chargements de page reels, de sorte qu'il reflete ce que la plupart de vos visiteurs vivent reellement, et non un seul test en laboratoire sur une connexion rapide.

Le LCP compte parce qu'il correspond de pres a la rapidite avec laquelle une page parait utilisable. Un LCP lent signifie que les visiteurs fixent un ecran vide ou incomplet pendant que le contenu principal arrive au compte-goutte, ce qui fait fuir les gens. Il fait aussi partie des Core Web Vitals qui alimentent les signaux d'experience de page de Google, donc un mauvais LCP peut penaliser a la fois les utilisateurs et le classement.

Il est utile de voir le LCP comme quatre parties empilees bout a bout : le time to first byte (la vitesse de reponse du serveur), le delai de chargement de la ressource (le temps avant que le navigateur ne commence meme a recuperer l'element LCP), le temps de chargement de la ressource (le temps que met cet element a se telecharger) et le delai de rendu de l'element (le temps avant qu'il ne soit reellement peint). Un LCP lent est presque toujours du a une ou deux de ces parties qui dominent, donc le corriger commence par trouver quelle partie pose probleme.

Le premier bloc, le time to first byte, concerne votre serveur et la distribution. Un hebergeur lent ou eloigne ajoute du delai avant que quoi que ce soit puisse charger, donc un hebergeur rapide et bien situe ainsi qu'un CDN qui sert le contenu depuis un point proche de vos visiteurs reduisent directement cette partie. C'est la correction la moins spectaculaire mais souvent la plus impactante, car chaque milliseconde ici retarde tout ce qui suit.

L'element LCP lui-meme, generalement une image, est le levier suivant le plus important. Servez-le dans un format moderne comme WebP ou AVIF, dimensionnez-le correctement pour la mise en page au lieu d'envoyer un enorme original, et indiquez au navigateur qu'il est important avec un preload ou une fetch priority elevee afin qu'il commence a se telecharger tot. Une erreur tres courante est le lazy-loading de l'image hero : le lazy-loading est excellent pour les images situees sous la ligne de flottaison, mais l'appliquer a l'element LCP retarde precisement la chose sur laquelle vous etes mesure.

Les ressources render-blocking sont le dernier coupable frequent. De gros fichiers CSS et JavaScript bloquants obligent le navigateur a attendre avant de pouvoir peindre quoi que ce soit, y compris votre plus grand element. Elaguer le CSS inutilise, differer le JavaScript non critique et n'inliner que les styles critiques permettent au navigateur d'atteindre le rendu plus tot.

Pour ameliorer un score LCP en pratique : mesurez-le avec un outil de field data pour voir le vrai chiffre au 75e centile, identifiez laquelle des quatre parties est la plus grande, puis attaquez cette partie : un hebergeur ou un CDN plus rapide pour un serveur lent, l'optimisation d'image et le preloading pour une ressource lente, et moins de code render-blocking pour un rendu lent. Re-mesurez avec des donnees reelles, car un score de laboratoire sur une machine rapide peut sembler correct alors que de vrais utilisateurs sur des connexions plus lentes peinent.

En resume : le Largest Contentful Paint mesure le moment ou votre contenu principal devient visible, et Google le veut a 2,5 secondes ou moins. Atteignez-le en servant rapidement depuis un bon hebergeur et un CDN, en optimisant et en priorisant le plus grand element au lieu de le lazy-loader, et en degageant le code render-blocking du chemin. Faites cela et la page ne se contente pas d'obtenir un meilleur score : elle parait genuinement plus rapide aux personnes qui l'utilisent.