Comprendre et mesurer le LCP (Largest Contentful Paint)
Le LCP mesure la vitesse de chargement perçue. Découvrez sa définition, son seuil de 2,5 s, les éléments pris en compte et les outils pour le mesurer.
Le LCP (Largest Contentful Paint) est une métrique Core Web Vitals stable qui mesure la vitesse de chargement perçue. Il marque le moment, dans la chronologie du chargement, où le plus grand élément de contenu visible apparaît à l’écran. Un LCP rapide rassure l’utilisateur sur le fait que la page est utile et bien en train de se charger.
Pour le SEO, le LCP est souvent le premier signal sur lequel travailler : c’est la première impression de vitesse. Une page dont le contenu principal tarde à s’afficher génère des abandons et envoie un mauvais signal d’expérience à Google. Comprendre ce que mesure exactement le LCP est la condition pour l’optimiser efficacement.
Le LCP, c’est la première impression de vitesse, et en SEO la première impression compte autant que pour un visiteur humain. L’erreur que je corrige le plus souvent, c’est de croire savoir quel élément déclenche le LCP sans l’avoir mesuré. Identifiez-le précisément avant toute optimisation, sinon vous risquez d’accélérer un élément qui n’est pas le bon.
Ce que mesure le LCP et son seuil
Le LCP indique le délai d’affichage de la plus grande image, vidéo ou section de texte visible dans la fenêtre d’affichage, par rapport au moment où l’utilisateur a accédé à la page. Il inclut le temps de réponse du serveur, les redirections et les autres délais en amont, ce qui explique parfois un écart entre mesure terrain et mesure en laboratoire.
Pour offrir une bonne expérience, visez un LCP de 2,5 secondes ou moins, mesuré au 75e centile des chargements de pages, mobile et ordinateur séparés.
| Classement | Valeur LCP | Centile |
|---|---|---|
Bon |
2,5 s ou moins |
75e |
À améliorer |
Entre 2,5 s et 4 s |
75e |
Médiocre |
Plus de 4 s |
75e |
Quels éléments sont pris en compte
Le navigateur ne retient comme candidat LCP qu’un ensemble limité d’éléments, afin de réduire la complexité de la mesure. Au fil du chargement, le plus grand élément peut changer : le navigateur signale d’abord un candidat, puis le met à jour si un élément plus grand apparaît. La mesure s’arrête dès la première interaction de l’utilisateur, car celle-ci modifie souvent ce qui est visible, un point à garder en tête pour éviter le chargement différé de l’élément LCP.
Seule la portion visible dans la fenêtre d’affichage compte : les parties rognées ou hors écran, ainsi que les marges, marges intérieures et bordures, sont exclues du calcul de la taille.
| Type d'élément | Pris en compte comme candidat LCP |
|---|---|
Éléments |
Oui (premier frame pour les images animées) |
Éléments dans un |
Oui |
Éléments |
Oui (image d’aperçu ou premier frame, au plus tôt) |
Image de fond via url() |
Oui (hors dégradés CSS) |
Éléments de niveau bloc contenant du texte |
Oui |
Comment mesurer le LCP
Le LCP se mesure à la fois sur le terrain, à partir de vraies visites, et en laboratoire, dans un environnement contrôlé. Les outils terrain restent la référence pour juger la conformité, tandis que le laboratoire sert à tester et diagnostiquer. En JavaScript, le LCP s’obtient via l’API dédiée, en observant les entrées de type largest-contentful-paint avec un PerformanceObserver ; la bibliothèque web-vitals simplifie cette mesure et gère les cas particuliers.
| Outil | Type |
|---|---|
Rapport sur l’expérience utilisateur Chrome (CrUX) |
Terrain |
PageSpeed Insights |
Terrain et laboratoire |
Search Console (rapport Core Web Vitals) |
Terrain |
Bibliothèque JavaScript web-vitals |
Terrain |
Outils pour les développeurs Chrome |
Laboratoire |
Lighthouse |
Laboratoire |
WebPageTest |
Laboratoire |
Comme le plus grand élément peut changer plusieurs fois pendant le chargement, le navigateur émet plusieurs entrées successives. Seule la dernière, émise avant la première interaction, représente le véritable LCP. Pour vos analyses, ne conservez que cette entrée la plus récente, sous peine de sous-estimer la métrique. Notez aussi qu’une page chargée dans un onglet en arrière-plan ne reflète pas un LCP réel.
À faire
- viser 2,5 s au 75e centile
- identifier l’élément LCP réel de la page
- mesurer sur le terrain
- conserver la dernière entrée LCP
À éviter
- se fier au seul score de laboratoire
- négliger le temps de réponse serveur
- oublier les images de fond comme candidats
- mesurer un LCP sur un onglet en arrière-plan
Points clés à retenir
- Visez un LCP de 2,5 s ou moins au 75e centile.
- Repérez l'élément LCP : souvent une image, une vidéo ou un bloc de texte.
- Seule la portion visible dans la fenêtre d'affichage est mesurée.
- La mesure s'arrête à la première interaction de l'utilisateur.
- Mesurez sur le terrain et utilisez le laboratoire pour diagnostiquer.
Le LCP traduit la vitesse de chargement perçue par l’utilisateur.
Quiz : testez vos connaissances
Quiz : testez vos connaissances
-
Que marque le Largest Contentful Paint (LCP) ?
- Le moment où le tout premier contenu, même petit, apparaît à l'écran
- Le moment où le plus grand élément de contenu visible apparaît à l'écran
- Le moment où la page devient interactive pour l'utilisateur
Le LCP marque l’affichage du plus grand élément visible : souvent une image principale, une vidéo, une image de fond ou un bloc de texte important. Le premier contenu, lui, relève du FCP.
-
Pourquoi le navigateur émet-il plusieurs entrées LCP pendant le chargement ?
- Parce qu'il mesure le LCP une fois par seconde jusqu'à la fin de la visite
- Parce que le plus grand élément peut changer, seule la dernière entrée avant interaction comptant
- Parce qu'il additionne toutes les entrées pour obtenir le score final
Le plus grand élément peut changer plusieurs fois au chargement : le navigateur émet des entrées successives. Seule la dernière, émise avant la première interaction, doit être conservée.
-
Pourquoi le LCP de terrain diffère-t-il souvent de celui de Lighthouse ?
- Parce que Lighthouse mesure le LCP sur toute la vie de la page
- Parce que le LCP terrain inclut le temps de réponse serveur, les redirections et les conditions réseau réelles
- Parce que le terrain ignore le temps de réponse du serveur
Le LCP terrain intègre le temps de réponse serveur, les redirections et les conditions réseau vécues, là où le laboratoire mesure dans un environnement contrôlé.
À propos de l'auteur
Besoin d'un accompagnement SEO ?
Votre contenu principal met trop de temps à s'afficher ?