Largest Contentful Paint (LCP)

Historiquement, cela a été un défi pour les développeurs Web de mesurer la vitesse à laquelle le contenu principal d’une page Web se charge et est visible pour les utilisateurs.

Les métriques plus anciennes comme load ou DOMContentLoaded ne sont pas bonnes car elles ne correspondent pas nécessairement à ce que l’utilisateur voit sur son écran. Et les nouvelles mesures de performances centrées sur l’utilisateur, telles que First Contentful Paint (FCP), ne capturent que le tout début de l’expérience de chargement. Si une page affiche un écran de démarrage ou affiche un indicateur de chargement, ce moment n’est pas très pertinent pour l’utilisateur.

Qu’est-ce que le LCP ?

La mesure LCP (Largest Contentful Paint) indique le temps de rendu de la plus grande image ou du plus grand bloc de texte visible dans la fenêtre, par rapport au moment où la page a commencé à se charger pour la première fois.

Qu’est-ce qu’un bon score LCP ?

Pour offrir une bonne expérience utilisateur, les sites doivent s’efforcer d’avoir un LCP de 2,5 secondes ou moins.

Quels éléments sont pris en compte ?

Comme spécifié actuellement dans l’API Largest Contentful Paint, les types d’éléments pris en compte pour Largest Contentful Paint sont :

Les éléments <img>
Les éléments <image> à l’intérieur d’un élément < svg >
Les éléments <video> (l’image de l’affiche est utilisée)
Un élément avec une image de fond chargée via la fonction url() (par opposition à un dégradé CSS)
Éléments de niveau bloc contenant des nœuds de texte ou d’autres enfants d’éléments de texte de niveau en ligne.

Notez que restreindre les éléments à cet ensemble limité était intentionnel afin de garder les choses simples au début. Des éléments supplémentaires (par exemple, <svg>, <video>) peuvent être ajoutés à l’avenir au fur et à mesure que des recherches sont menées.

Comment la taille d’un élément est-elle déterminée ?

La taille de l’élément signalé pour le LCP est généralement la taille visible par l’utilisateur dans la fenêtre. Si l’élément s’étend à l’extérieur de la fenêtre, ou si l’un des éléments est tronqué ou présente un débordement non visible, ces portions ne comptent pas dans la taille de l’élément.

Pour les éléments d’image qui ont été redimensionnés à partir de leur taille intrinsèque, la taille signalée est soit la taille visible, soit la taille intrinsèque, selon la plus petite des deux. Par exemple, les images réduites à une taille beaucoup plus petite que leur taille intrinsèque ne rapporteront que la taille à laquelle elles sont affichées, tandis que les images qui sont étirées ou agrandies à une taille plus grande ne rapporteront que leurs tailles intrinsèques.

Pour les éléments de texte, seule la taille de leurs nœuds de texte est prise en compte (le plus petit rectangle qui englobe tous les nœuds de texte).

Pour tous les éléments, toute marge, remplissage ou bordure appliqué via CSS n’est pas pris en compte.

Quand la plus grande peinture de contenu est-elle signalée ?

Les pages Web se chargent souvent par étapes et, par conséquent, il est possible que le plus grand élément de la page change.

Pour gérer ce potentiel de changement, le navigateur envoie une PerformanceEntry de type LCP identifiant le plus grand élément de contenu dès que le navigateur a chargé la première image. Mais ensuite, après avoir rendu les images suivantes, il enverra une autre PerformanceEntry chaque fois que l’élément de contenu le plus important change.

Par exemple, sur une page avec du texte et une image de hero, le navigateur peut initialement simplement afficher le texte, auquel cas le navigateur enverrait un LCP plus important dont la propriété d’élément ferait probablement référence à un <p> ou <h1>. Plus tard, une fois le chargement de l’image du hero terminé, un deuxième LCP serait envoyée et sa propriété d’élément ferait référence à <img>.

Il est important de noter qu’un élément ne peut être considéré comme le plus grand élément de contenu qu’une fois qu’il a été rendu et qu’il est visible pour l’utilisateur. Les images qui n’ont pas encore été chargées ne sont pas considérées comme “rendues”. Les nœuds de texte n’utilisent pas non plus les polices Web pendant la période de blocage des polices. Dans de tels cas, un élément plus petit peut être signalé comme le plus grand élément de contenu, mais dès que le rendu de l’élément le plus grand est terminé, il sera signalé via un autre objet PerformanceEntry.

En plus des images et des polices à chargement tardif, une page peut ajouter de nouveaux éléments au DOM à mesure que du nouveau contenu devient disponible. Si l’un de ces nouveaux éléments est plus grand que le plus grand élément de contenu précédent, une nouvelle PerformanceEntry sera également signalée.

Si un élément qui est actuellement le plus grand élément de contenu est supprimé de la fenêtre d’affichage (ou même supprimé du DOM), il restera le plus grand élément de contenu à moins qu’un élément plus grand ne soit rendu.

Le navigateur cessera de signaler de nouvelles entrées dès que l’utilisateur interagit avec la page (via un clic, un scroll ou une pression sur une touche), car l’interaction de l’utilisateur change souvent ce qui est visible pour l’utilisateur (ce qui est particulièrement vrai avec le scroll).

À des fins d’analyse, vous ne devez signaler que la dernière entrée de performance envoyée à votre service d’analyse.

Comment la disposition des éléments et les changements de taille sont-ils gérés ?

Pour réduire la surcharge de performance liée au calcul et à l’envoi de nouvelles entrées de performance, les modifications apportées à la taille ou à la position d’un élément ne génèrent pas de nouveaux LCP. Seules la taille et la position initiales de l’élément dans la fenêtre sont prises en compte.

Cela signifie que les images qui sont initialement rendues hors écran, puis qui passent à l’écran peuvent ne pas être signalées. Cela signifie également que les éléments initialement rendus dans la fenêtre qui sont ensuite poussés vers le bas, hors de vue, rapporteront toujours leur taille initiale dans la fenêtre.

Comment mesurer le LCP

Vous pouvez utiliser PageSpeed Insight pour mesurer le LCP de vos pages.

Comment améliorer le LCP ?

Dans certains cas, l’élément (ou les éléments) le plus important de la page n’est pas le même que l’élément le plus grand, et les développeurs peuvent être plus intéressés par la mesure des temps de rendu de ces autres éléments. Ceci est possible en utilisant l’API Element Timing, comme décrit dans l’article sur les métriques personnalisées.

Le LCP est principalement affecté par quatre facteurs :

Temps de réponse du serveur lents
JavaScript et CSS bloquant le rendu
Temps de chargement des ressources
Rendu côté client

Pour plus d’informations vous pouvez retrouver l’origine de cette article en anglais