LCP (Largest Contentful Paint)

Le LCP (Largest Contentful Paint) est une métrique [Core Web Vital](/glossary/core-web-vitals) qui mesure le temps écoulé entre le début du chargement d'une page et la fin du rendu du plus grand élément de contenu visible dans la zone d'affichage. Cet élément est généralement une image principale, un grand bloc de texte, une vignette de vidéo ou une image de fond. Google définit trois plages de performance : **bon** (2,5 secondes ou moins), **à améliorer** (2,5 à 4,0 secondes) et **médiocre** (au-delà de 4,0 secondes). Le LCP est mesuré au 75e centile des chargements de page, ce qui signifie que le score reflète l'expérience de la plupart des utilisateurs réels, et pas seulement celle des connexions les plus rapides.

Le LCP est l'indicateur le plus important de la vitesse perçue d'une page. Tandis que d'autres métriques mesurent la disponibilité technique ou la stabilité visuelle, le LCP capture le moment où un visiteur voit le contenu principal — le moment où il considère que la page est « chargée ». Un LCP lent pousse les visiteurs à fixer une page incomplète, augmentant les taux de rebond et réduisant l'engagement. Google utilise le LCP comme signal de classement dans son algorithme de recherche, ce qui signifie qu'un mauvais score ne nuit pas seulement à l'expérience utilisateur — il réduit directement la visibilité organique. Pour les éditeurs qui dépendent du trafic de recherche, optimiser le LCP peut faire la différence entre apparaître en première page et être enterré.

FlipLink optimise le LCP à la fois sur le site marketing et sur les flipbooks publiés. Le lecteur de flipbook donne la priorité au rendu de la page de couverture et de la première double page, garantissant que le plus grand élément de contenu visible apparaît avant le chargement des ressources plus lourdes. L'[écran de chargement personnalisé](/features/custom-loading-screen) fournit un retour visuel immédiat — un espace réservé à ta marque qui apparaît en moins d'une seconde — pendant que les ressources de rendu Three.js s'initialisent en arrière-plan. Le moteur d'[expérience de page et de mise en page](/features/page-experience-and-layout) de FlipLink applique une compression d'image optimisée, un dimensionnement d'image responsive et un rendu progressif pour maintenir le LCP sous le seuil de 2,5 secondes recommandé par Google, sur ordinateur comme sur mobile. Lorsque les flipbooks sont [intégrés](/glossary/embed) sur des sites externes, le chargement différé garantit que l'intégration n'entre pas en concurrence avec l'élément LCP de la page hôte.

Comprendre le LCP nécessite du contexte aux côtés de métriques de performance connexes : - **Bon LCP** : 2,5 secondes ou moins. La page semble instantanée. La plupart des utilisateurs voient le contenu avant d'envisager de partir. - **À améliorer** : 2,5 à 4,0 secondes. Les utilisateurs perçoivent un délai. Les taux de rebond commencent à grimper. - **LCP médiocre** : au-delà de 4,0 secondes. Les visiteurs sont susceptibles d'abandonner la page avant que le contenu principal n'apparaisse. L'élément LCP change selon la page. Sur une page de produit, il s'agit généralement de l'image du produit. Sur un article de blog, il peut s'agir de la bannière principale ou du premier paragraphe de texte. Sur une page de flipbook, il s'agit de l'image de couverture. Identifier quel élément constitue le LCP sur chaque page est la première étape vers l'optimisation.

La mesure du LCP suit des règles précises définies par le Web Performance Working Group. Le plus grand élément est déterminé par sa taille visible dans la zone d'affichage, et non par la taille de son fichier. Les éléments pris en compte pour le LCP incluent les éléments `<img>`, les `<image>` à l'intérieur d'un SVG, les vignettes de vidéo, les éléments avec une `background-image` chargée via CSS et les éléments de type bloc contenant du texte. Les éléments qui s'étendent au-delà de la zone d'affichage ne sont mesurés que pour leur portion visible. Parmi les causes courantes d'un LCP lent : des images non optimisées (servir une photo de 4 Mo alors qu'un WebP de 200 Ko suffirait), du CSS et du JavaScript bloquant le rendu qui retardent l'affichage du contenu par le navigateur, des temps de réponse serveur lents ([TTFB](/glossary/core-web-vitals) supérieur à 800 ms), et un rendu côté client qui requiert l'exécution de JavaScript avant l'apparition du moindre contenu. Parmi les optimisations pratiques : précharger l'image LCP avec `<link rel="preload">`, servir les images dans des formats modernes (WebP, AVIF), utiliser un CDN pour les ressources statiques, intégrer le CSS critique en ligne, différer le JavaScript non essentiel et définir explicitement la `width` et la `height` des images pour éviter les décalages de mise en page qui peuvent retarder le LCP.

Le LCP et le [FCP](/glossary/core-web-vitals) (First Contentful Paint) sont tous deux des métriques de temporisation, mais ils mesurent des moments différents. Le FCP se déclenche lorsque le navigateur affiche le premier élément de contenu du DOM — même s'il ne s'agit que d'une barre de navigation, d'un indicateur de chargement ou d'une seule ligne de texte. Le LCP se déclenche lorsque le plus grand élément de contenu s'affiche. En pratique, le FCP se déclenche souvent une à deux secondes avant le LCP. Une page peut avoir un FCP rapide mais un LCP lent si l'en-tête et la navigation se chargent rapidement tandis que l'image principale met plusieurs secondes à apparaître. Pour l'expérience utilisateur, le LCP est la métrique la plus significative car il reflète le moment où la page semble complète pour le visiteur. Le FCP est utile pour diagnostiquer si le navigateur commence à effectuer un rendu, mais c'est le LCP qui détermine si l'utilisateur reste ou part.

Le LCP mesure le moment où ta page semble chargée aux yeux des visiteurs réels. Maintiens-le sous 2,5 secondes en optimisant les images, en minimisant les ressources qui bloquent le rendu et en donnant la priorité au contenu au-dessus de la ligne de flottaison — tes classements de recherche et l'engagement des utilisateurs en dépendent.