Largest Contentful Paint (LCP) : guide technique complet et norme d'optimisation

Largest Contentful Paint (LCP) est l'une des trois mesures Core Web Vitals de Google, établies pour mesurer la vitesse de chargement perçue des pages.LCP suit le temps écoulé depuis le moment où un utilisateur commence à charger une page Web jusqu'à ce que la plus grande image, image d'affiche vidéo ou bloc de texte dans la fenêtre visible initiale soit entièrement peinte à l'écran.

Étant donné que les utilisateurs jugent la vitesse des pages Web en fonction de la rapidité avec laquelle le contenu principal devient visible et lisible, LCP est largement considéré comme la mesure de performance de chargement la plus importante.Par conséquent, Google intègre LCP dans ses signaux de classement d'expérience de page officielle pour la recherche organique.

Résumé de la réponse en premier

Largest Contentful Paint (LCP) est une métrique Core Web Vital qui mesure la vitesse de chargement perçue des pages en chronométrant le moment où le plus grand bloc de texte visible ou élément d'image dans la fenêtre termine son rendu.Un score LCP de réussite est de 2,5 secondes ou moins pour au moins 75 % des visites de pages dans les données de terrain d'utilisateurs réels (CrUX).La latence LCP est composée de quatre sous-parties distinctes : le délai jusqu'au premier octet (TTFB), le délai de chargement des ressources, la durée de chargement des ressources et le délai de rendu des éléments.L'optimisation de LCP nécessite le préchargement des ressources Hero, le déploiement de la mise en cache périphérique, la compression des images aux formats WebP/AVIF et l'élimination des CSS et JavaScript bloquant le rendu.

Échelle d’évaluation du score LCP et seuils Core Web Vitals

Pour offrir une expérience rapide et attrayante aux utilisateurs, les pages Web doivent respecter les seuils Core Web Vitals établis par Google pour la plus grande peinture de contenu :

Temps de rendu LCP	Évaluation des performances	Impact sur l'utilisateur et signal de classement de la recherche Google
$\le 2.5\text{ secondes}$	Bon (Vert)	Chargement perçu rapide ;satisfait pleinement à l'évaluation Core Web Vitals de Google.
$> 2.5\text {s} $ et $\le 4.0\text {s} $	Besoin d'amélioration (Ambre)	Retard de chargement notable ;baisse potentielle des taux de conversion sur mobile et du classement dans les recherches.
$> 4.0\text{ secondes}$	Pauvre (Rouge)	Retard de chargement visuel important ;taux de rebond élevés des utilisateurs et pénalité de classement dans les recherches.

Pour obtenir une note de passage à l'évaluation Core Web Vitals, un site Web doit obtenir un score LCP dans la catégorie Bon ($\le 2,5\text{ seconds}$) pour au moins 75 % des visites de pages, évalué sur des cohortes d'ordinateurs de bureau et d'appareils mobiles dans des données de terrain réelles.

Quels éléments du DOM sont éligibles à l'évaluation LCP ?

Conformément à la spécification officielle du W3C Largest Contentful Paint, le navigateur surveille les éléments DOM visibles spécifiques situés dans la fenêtre d'affichage initiale :

Éléments <img> standards (y compris les images rendues dans les balises <picture> réactives).
Éléments <image> intégrés dans un conteneur vectoriel <svg>.
Images d'affiche vidéo (l'attribut poster sur un élément <video>).
Éléments avec une image de fond CSS chargée via la fonction url().
Conteneurs HTML au niveau des blocs contenant des nœuds de texte ou des enfants d'éléments de texte en ligne (tels que les titres <h1> à <h6>, les paragraphes <p> ou les blocs <div>).

Déconstruire le LCP : les quatre sous-parties

Pour diagnostiquer et optimiser efficacement les scores lents du Largest Contentful Paint, les ingénieurs en performances décomposent la latence LCP en quatre sous-parties distinctes :

Délai jusqu'au premier octet (TTFB) : temps écoulé entre le moment où l'utilisateur demande la page et le moment où le navigateur reçoit le premier octet de la réponse du document HTML du serveur.Cible : < 800 $\text {ms} $ (40 %$ du budget LCP).
Délai de chargement des ressources : délai entre le moment où le document HTML finit de recevoir les octets de réponse et le moment où le navigateur découvre et commence à récupérer la ressource LCP (telle qu'une image de héros).Cible : < 200 $\text {ms} $ (10 %$ du budget LCP).
Durée de chargement des ressources : durée nécessaire au navigateur pour télécharger l'image LCP ou la police sur le réseau.Cible : < 800 $\text {ms} $ (40 %$ du budget LCP).
Délai de rendu de l'élément : délai entre le moment où la ressource LCP termine le téléchargement et le moment où le navigateur termine les calculs de mise en page et peint l'élément à l'écran.Cible : < 200 $\text {ms} $ (10 %$ du budget LCP).

Mathématiquement, la latence totale du LCP est la somme de ces quatre sous-parties :

$$\text {LCP} = \text {TTFB} + \text{Délai de chargement des ressources} + \text{Durée de chargement des ressources} + \text{Délai de rendu des éléments}$$

Techniques éprouvées pour optimiser le LCP

Éliminez le délai de chargement des ressources : ajoutez <link rel="preload" as="image" href="..."> ou fetchpriority="high" à votre balise d'image de héros afin que le navigateur lance le téléchargement de l'image immédiatement pendant l'analyse HTML.
Optimiser la réponse du serveur (TTFB) : déployez la mise en cache périphérique via CDN, optimisez les performances des requêtes de base de données et utilisez le multiplexage push du serveur HTTP/2 ou HTTP/3.
Compressez et modernisez les images : diffusez des images de héros à l'aide de formats WebP ou AVIF modernes avec des tailles srcset réactives adaptées aux dimensions de l'écran des mobiles et des ordinateurs de bureau.
Réduisez les ressources bloquant le rendu : intégrez les CSS critiques dans la balise <head> et différez le JavaScript non critique à l'aide des attributs de script defer ou async.
Optimiser le chargement des polices Web : utilisez font-display: swap ou font-display: optional dans les règles CSS @font-face pour garantir que les blocs de texte restent visibles immédiatement pendant la fin du téléchargement des polices Web sur le réseau.

LCP vs First Contentful Paint (FCP) vs indice de vitesse

Bien que LCP, FCP et Speed Index mesurent tous les performances de chargement, ils capturent différents aspects de la progression du chargement des pages :

First Contentful Paint (FCP) : mesure le moment où le tout premier élément DOM (tel qu'une couleur d'arrière-plan, une double flèche ou un texte d'en-tête) termine son rendu à l'écran.
Largest Contentful Paint (LCP) : mesure le moment où l'élément de contenu visuel principal (bannière de héros ou bloc de paragraphe principal) termine le rendu.
Indice de vitesse : mesure la rapidité avec laquelle le contenu visuel remplit la fenêtre au fil du temps pendant l'enregistrement de la progression visuelle.

LCP reçoit le poids le plus élevé parmi les mesures de chargement dans l'algorithme de notation Lighthouse de Google (actuellement 25 % du score de performance total), car il correspond le plus étroitement à la perception de l'utilisateur réel de l'achèvement du chargement de la page.

Surveillance LCP continue avec SimpleOps

SimpleOps automatise le suivi du plus grand contenu de Paint en capturant les audits synthétiques du laboratoire Lighthouse et les métriques de l'ensemble de données de terrain du rapport Chrome UX (CrUX) dans un seul tableau de bord de surveillance unifié.SimpleOps envoie des alertes proactives instantanées chaque fois que le LCP du 75e centile de votre site dépasse votre budget de performances de 2,5 secondes, permettant ainsi à votre équipe de protéger les conversions et les classements de recherche.