TL;DRVous cliquez sur votre propre boutique depuis Google. L'écran reste blanc, le menu apparaît, puis un grand vide à la place de la photo principale, qui finit par arriver plusieurs secondes plus tard. Vous, vous attendez. Un visiteur, lui, est peut-être déjà reparti. Cette attente se mesure avec le LCP, l'un des indicateurs de performance web suivis par Google. Je vous explique ce qu'il recouvre et comment améliorer le LCP de votre site.

Qu'est-ce que le LCP ?#

Le LCP, pour Largest Contentful Paint, mesure le temps que met le plus grand élément visible à l'écran pour s'afficher : en général la photo principale, une bannière ou un gros bloc de texte. Il indique le moment où le visiteur a le sentiment que la page est vraiment là.

Illustration d'une page sur mobile dont le plus grand élément visible, la photo principale, est encadré comme élément LCP, avec une frise du clic jusqu'à son affichage
Le LCP s'arrête quand le plus grand élément visible est affiché, pas quand toute la page est chargée.

C'est l'un des trois Core Web Vitals – les Signaux Web essentiels en français. Les deux autres sont le CLS, qui mesure la stabilité de la page, et l'INP, qui mesure sa réactivité aux clics.

Le LCP ne regarde que la partie de la page visible sans défiler. Une grande image placée tout en bas ne compte pas. Et l'élément retenu n'est pas forcément le même sur mobile et sur ordinateur, puisque l'écran n'affiche pas la même chose.

Quel est un bon score LCP ?#

Google considère qu'un LCP est bon jusqu'à 2,5 secondes. Entre 2,5 et 4 secondes, il est à améliorer. Au-delà de 4 secondes, il est mauvais. Ce seuil doit être respecté pour 75 % des visites, sur mobile et sur ordinateur, les deux étant évalués séparément.

Schéma des seuils du score LCP selon Google : bon jusqu'à 2,5 secondes, à améliorer entre 2,5 et 4 secondes, mauvais au-delà de 4 secondes
Les trois zones du score LCP, à tenir pour 75 % des visites.

Ce point des 75 % compte beaucoup. Votre page peut s'afficher vite au bureau, en fibre, sur un ordinateur récent, et lentement sur le téléphone d'un client en 4G. C'est l'expérience de la majorité de vos visiteurs qui est jugée.

Regardez donc le mobile en premier. Le réseau y est plus lent et le processeur moins puissant : c'est presque toujours là que le temps de chargement se dégrade.

Pourquoi le LCP compte pour votre SEO et vos ventes ?#

Le LCP fait partie des signaux d'expérience de page que Google prend en compte dans son classement. Son poids reste limité face à la pertinence du contenu. Son effet le plus direct est ailleurs : tant que le contenu principal n'est pas affiché, le visiteur ne sait pas s'il est au bon endroit.

Je préfère être honnête : un bon LCP ne fera pas remonter à lui seul une page dont le contenu répond mal à la recherche. C'est un critère parmi beaucoup d'autres.

En revanche, c'est la première impression que donne votre site. Sur une fiche produit, l'élément LCP est très souvent la photo du produit, donc exactement ce que le visiteur est venu voir.

C'est pour cette raison que je regarde le LCP dans chaque audit SEO : c'est un sujet de SEO technique, mais c'est d'abord ce que vos clients attendent devant leur écran.

Comment mesurer le LCP de votre site ?#

Commencez par PageSpeed Insights : saisissez une adresse, l'outil affiche le LCP vécu par vos vrais visiteurs quand les données existent, puis un test en laboratoire qui désigne l'élément LCP. Complétez avec le rapport Signaux Web essentiels de la Search Console, qui regroupe vos pages par problème.

Données de terrain et données de laboratoire#

Les données de terrain viennent des visiteurs réels, sur les 28 derniers jours. Les données de laboratoire viennent d'un test simulé, sur un seul appareil et une seule connexion.

Les deux peuvent diverger. Si les chiffres ne concordent pas, fiez-vous au terrain : c'est lui que Google utilise.

Repérer l'élément LCP#

Dans PageSpeed Insights, le diagnostic sur l'élément Largest Contentful Paint montre quel bloc est retenu et comment son temps se décompose. Lighthouse, intégré à Chrome, donne la même information en local.

Faites le test sur mobile et sur ordinateur. Si vous voulez un premier état des lieux sans rien installer, notre outil d'analyse de site gratuit donne une vue d'ensemble en quelques minutes.

De quoi est fait le LCP ?#

Le LCP se décompose en quatre étapes : le temps de réponse du serveur, le délai avant que le navigateur commence à charger l'élément, la durée de son téléchargement, puis le délai avant son affichage. Savoir laquelle est la plus longue indique tout de suite où agir.

Schéma des quatre étapes qui composent le LCP : réponse du serveur, délai avant chargement de l'élément, téléchargement de l'élément, délai avant affichage
Les quatre étapes du LCP, de la demande de la page à l'affichage de son élément principal.

C'est le réflexe à prendre avant toute correction. Compresser une image ne sert à rien si le serveur met déjà trois secondes à répondre. Changer d'hébergement ne sert à rien si l'image n'est demandée qu'à la fin.

PageSpeed Insights affiche ces quatre durées pour l'élément LCP. Partez de la plus longue.

Comment améliorer le LCP ?#

Pour améliorer le LCP, traitez les étapes dans l'ordre : un serveur qui répond vite, une image principale que le navigateur découvre dès le début, un fichier léger et aux bonnes dimensions, puis un affichage que ni le CSS ni les scripts ne retardent.

Réduire le temps de réponse du serveur#

Tant que le serveur n'a pas répondu, rien ne peut s'afficher. Ce temps s'appelle le TTFB, et il dépend de l'hébergement, du cache et du code du site.

Un cache de pages et un hébergement adapté règlent la plupart des cas. La méthode complète est dans notre article sur le TTFB. Pour savoir si le serveur est en cause, suivez notre diagnostic d'un site lent en 5 étapes.

Faire charger l'image principale en premier#

Le navigateur doit trouver l'image principale dès la lecture de la page. Trois erreurs le retardent : le chargement différé appliqué à cette image, une image placée en arrière-plan dans le CSS, ou un carrousel qui l'insère par script.

La correction : une balise img classique dans le code de la page, sans loading réglé sur lazy, avec l'attribut fetchpriority réglé sur high. Le chargement différé reste utile, mais seulement pour les images situées plus bas.

Alléger l'image#

Servez l'image dans un format récent, AVIF ou WebP, et à la taille réellement affichée. Une photo de 3 000 pixels de large pour un écran de téléphone, c'est du temps de téléchargement perdu.

Vérifiez le résultat, pas seulement le réglage. Sur notre propre chaîne de traitement d'images, les fichiers AVIF sortaient presque aussi lourds que les originaux : le réglage de qualité était ignoré, sans aucun message d'erreur. Je compare depuis le poids avant et après. Le détail est dans notre étude de cas sur la compression AVIF.

Ne pas bloquer l'affichage#

Une image téléchargée peut encore attendre. Tant que le navigateur lit des feuilles de style et des scripts placés en tête de page, il n'affiche rien.

Sur un site vitrine que j'ai optimisé, j'ai intégré le CSS directement dans la page et repoussé le script de mesure d'audience à la première interaction du visiteur. Sur PrestaShop comme sur Shopify, faites le tri dans les modules et applications : chacun ajoute ses propres fichiers.

FAQ sur le LCP#

Que veut dire LCP ?#

LCP signifie Largest Contentful Paint, soit affichage du plus grand élément de contenu. C'est l'indicateur de Google qui mesure le temps nécessaire pour afficher le plus grand élément visible d'une page, image ou bloc de texte.

Quelle différence entre le LCP et le temps de chargement ?#

Le temps de chargement complet attend que tous les fichiers soient arrivés. Le LCP s'arrête dès que l'élément principal est visible. Une page peut donc avoir un bon LCP alors que des scripts continuent de se charger en arrière-plan.

Le chargement différé des images est-il mauvais pour le LCP ?#

Seulement s'il s'applique à l'image principale. Pour les images situées plus bas dans la page, il reste une bonne pratique : il libère la connexion pour ce qui doit s'afficher en premier.

L'élément LCP est-il le même sur mobile et sur ordinateur ?#

Pas forcément. Sur ordinateur, c'est souvent une grande bannière. Sur mobile, ce peut être un titre ou une autre image. Il faut contrôler les deux versions.

Combien de temps faut-il pour voir l'amélioration ?#

Le test en laboratoire réagit tout de suite. Les données de terrain portent sur 28 jours glissants : comptez environ un mois pour que la correction soit entièrement visible dans la Search Console.

Un bon LCP, c'est un élément principal servi en premier#

Retenez une règle : le navigateur doit recevoir vite, et en priorité, ce que le visiteur est venu voir. Un serveur réactif, une image principale légère et chargée en premier, rien qui bloque l'affichage. Avec ces trois points, la plupart des problèmes de LCP se règlent.

Vous voulez savoir ce qui ralentit l'affichage de vos pages et par quoi commencer ? Réservez un échange de 45 minutes : on regarde votre site ensemble et vous repartez avec une liste de corrections classées par priorité.