Largest Contentful Paint (LCP)
Le temps avant que le visiteur voie l'essentiel de la page.
Définition
Le LCP mesure le temps avant que le visiteur voie l’élément principal de la page. Ni le premier pixel affiché, ni la fin du chargement, mais le moment où le plus grand bloc visible est rendu. Google publie un seuil de 2,5 secondes sur web.dev.
Quel élément le LCP mesure-t-il ?
Le plus grand élément visible sans défiler.
Le navigateur observe ce qui s’affiche dans la fenêtre et retient le plus grand : une image de bandeau, une vidéo, ou un bloc de texte quand la page n’a pas d’image en tête. L’élément retenu peut changer pendant le chargement, la mesure finale correspond au dernier candidat rendu.
Ce choix a une conséquence pratique. Optimiser une image située en bas de page n’a aucun effet sur le LCP. C’est l’élément du premier écran qui compte, et lui seul.
Qu’est-ce qui dégrade le LCP ?
Quatre causes, dans cet ordre de fréquence.
Le temps de réponse du serveur vient en premier, parce qu’il précède tout : tant qu’il n’a pas répondu, le navigateur n’a rien à afficher. Viennent ensuite les ressources qui bloquent le rendu, feuilles de style et scripts placés dans l’en-tête, que le navigateur doit charger avant de peindre quoi que ce soit.
La troisième cause est le poids de l’image concernée, souvent servie en pleine résolution alors qu’elle s’affiche en quelques centaines de pixels. La quatrième est plus discrète : une image de premier écran marquée en chargement différé. Le chargement différé est utile partout ailleurs, mais appliqué à l’élément mesuré, il retarde exactement ce qu’il faudrait accélérer.
Le raccourci à éviter. Activer le chargement différé sur toutes les images du site. Sur l’image du premier écran, il dégrade le LCP au lieu de l’améliorer. Beaucoup d’extensions d’optimisation le font par défaut, et l’exclusion se règle à la main.
Comment améliorer le LCP sur WordPress ?
En traitant le serveur d’abord, l’image ensuite.
Mettre la page en cache
Le cache de page supprime la reconstruction à chaque visite. C’est le gain le plus rapide et le plus large sur WordPress.
Alléger l’image de tête
La servir à la dimension réellement affichée, dans un format moderne, et lui déclarer ses dimensions pour éviter au passage un décalage de mise en page.
Ne pas la différer
Exclure l’image du premier écran du chargement différé, et lui donner une priorité de chargement haute.
Dégager le chemin critique
Reporter les scripts non indispensables et limiter les feuilles de style chargées avant le premier rendu.
Questions fréquentes
Mon LCP est bon sur ordinateur et mauvais sur mobile, est-ce normal ?
Oui, et c’est le cas le plus fréquent. Le mobile cumule une connexion plus lente et un processeur moins puissant. L’évaluation de Google distingue les deux, et c’est le mobile qui décide pour la majorité des sites.
Quel est le rapport entre LCP et TTFB ?
Le TTFB est le délai avant la première réponse du serveur, et il est compris dans le LCP. Un TTFB d’une seconde consomme donc à lui seul 40 % du budget de 2,5 secondes, avant même qu’une image ne soit demandée.
Une image en moins améliore-t-elle toujours le LCP ?
Non. Retirer une image qui n’est pas l’élément mesuré ne change rien au LCP, même si elle allège la page. Il faut d’abord identifier l’élément retenu, ce que PageSpeed Insights indique explicitement.
Sources
Et sur votre site ?
Une définition ne dit pas si vous êtes concerné.
L'audit gratuit répond dans votre cas : état technique, temps de chargement, et ce que Google voit réellement de vos pages. Un constat écrit, sans engagement et sans jargon.