Largest Contentful Paint (LCP)

Qu'est-ce que le Largest Contentful Paint (LCP) ?

Le Largest Contentful Paint est une mesure du temps de rendu du plus grand élément de contenu (de type image, vidéo ou texte) qui a été peint sur la partie visible de l'écran. Le timing LCP indique le temps en millisecondes entre la demande de la page et le moment où cet élément de contenu le plus grand est affiché sur la partie visible de la page web (au-dessus de la ligne de flottaison).

Historique du Largest Contentful Paint

Quand on y pense, le LCP peut sembler une métrique triviale pour représenter la partie chargement des Core Web Vitals. Pourquoi ne pas mesurer la vitesse de chargement comme 'le temps nécessaire au chargement de la page'.

C'est parce qu'il est difficile (voire impossible) sur la plupart des sites web modernes de définir quand la page est chargée. De plus en plus de sites web utilisent des techniques telles que le lazy loading ou le chargement progressif où la page peut essentiellement continuer à charger indéfiniment. Cela signifie que la vitesse de la page ne peut pas être mesurée par un seul instant t.

Il y a plusieurs moments lors du chargement de la page qui peuvent faire en sorte qu'un utilisateur perçoive la page comme rapide ou lente. Par exemple, le délai du serveur (Time to First Byte), la première fois que le contenu est visible (First Contentful Paint), le moment où la fenêtre d'affichage visible peut sembler complète (Largest Contentful Paint) et le moment où la page devient interactive (quand cliquer sur un lien devient possible) sont tous des points durant le processus de chargement où le site peut sembler lent ou rapide !

Le Largest Contentful Paint (LCP) est choisi parce qu'il se concentre sur l'user experience du visiteur. Lorsque le LCP se produit, vous pouvez supposer qu'un visiteur pense que le chargement de la page est terminé (même si des processus en arrière-plan sont toujours en cours). Le LCP a été créé pour répondre à la question : 'Quand le contenu d'une page est-il visible ?'. C'est pourquoi le LCP est reconnu comme un indicateur clé de la performance centrée sur l'utilisateur.

Pourquoi le LCP compte pour votre entreprise

Le Largest Contentful Paint est l'un des 3 Core Web Vitals. En tant que Core Web Vital, le Largest Contentful Paint est important pour le SEO, mais plus important encore, le LCP est critique pour l'UX. Les visiteurs n'aiment pas attendre, et avec de plus en plus de trafic mobile (qui a tendance à être plus lent que le trafic desktop), optimiser le Largest Contentful Paint a beaucoup de sens.

• Pour le SEO. Oui, Google se concentre sur le fait de servir les meilleures pages dans ses résultats de recherche. Le LCP fait partie des Core Web Vitals de Google. Google déclare clairement que la vitesse du site est un facteur dans les résultats de recherche.
• Pour les visiteurs : Selon une étude récente de Google lui-même, la probabilité qu'un utilisateur quitte le site double avec un temps de chargement de 3 secondes. Vous le reconnaîtrez probablement pour vous-même. En surfant sur internet, presque rien ne semble aussi ennuyeux qu'un site web qui charge lentement. Il est fort probable que vous quittiez rapidement une page qui charge lentement.
• Autres raisons : La vitesse de la page est un facteur dans votre Score de qualité Google Ads. Cela signifie que vous pouvez acheter vos publicités moins cher et enfin passer les Core Web Vitals est l'un des prérequis pour la boîte Top Stories de Google.

Un LCP rapide donne au visiteur l'idée que la page se charge rapidement. En conséquence, un visiteur est moins susceptible de quitter la page.

Quels éléments sont considérés comme des éléments LCP ?

Tous les éléments ne sont pas considérés comme un élément LCP. L'élément de contenu le plus grand doit être peint sur la partie visible de l'écran (le viewport) avant que l'utilisateur n'ait interagi avec la page.

L'élément doit être :

• Un élément <img>.
• Un élément <image> imbriqué dans un élément <svg>.
• Un élément <video> (l'image poster ou la première frame de la vidéo, selon ce qui arrive en premier, est utilisé).
• Un élément avec une image d'arrière-plan chargée via la fonction CSS url(). (Note : C'est un anti-pattern pour l'optimisation LCP car cela rend l'image indétectable pour le scanner de préchargement du navigateur).

• Un élément de niveau bloc contenant des nœuds de texte ou d'autres éléments de texte inline (dans le cas d'éléments de texte inline comme <span>, l'élément de niveau bloc le plus proche <div> ou <p> est considéré).

Actuellement, certains éléments sont exclus en tant que candidats LCP, tels que les éléments cachés avec opacity: 0, les images qui correspondent à 100% de la taille du viewport (images de couverture), et les placeholders (images à faible entropie). Gardez à l'esprit que cela peut changer à mesure que la spécification évolue !

Devenons techniques : mesurer la taille de l'élément LCP

Le LCP identifie le plus grand élément de contenu visible dans le viewport et calcule sa taille sur la base d'un ensemble de règles précises. Ces règles assurent cohérence et précision, même dans des mises en page complexes :.

• Viewport uniquement - Seule la partie visible de la page est considérée. Si un élément n'est que partiellement dans le viewport visible, la taille considérée sera coupée.
• Pas de bordure, padding ou marge. Pour tous les éléments, les bordures de texte et d'image, le padding et les marges sont complètement ignorés.
• Taille du texte - la taille des éléments de texte est rapportée comme le plus petit rectangle qui peut être peint autour du ou des nœuds de texte.
• Taille de l'image - pour les images, la plus petite des dimensions intrinsèques (la largeur et la hauteur d'origine) et la taille d'affichage (la taille à l'écran) est utilisée pour calculer la taille de l'élément LCP
• La première taille compte - lorsque la mise en page change ou que la taille d'un élément change, seule la première taille est considérée pour le LCP
• Les éléments supprimés sont inclus - lorsqu'un élément est supprimé du DOM, il reste un candidat LCP

Nature dynamique du LCP

Le Largest Contentful Paint (LCP) est une métrique dynamique. Bien que le rendu puisse être complexe et se produire par étapes, il est normal que l'élément LCP change pendant le chargement de la page. Avant la première interaction utilisateur, l'observateur de performance du navigateur identifie tous les éléments qui pourraient être considérés comme des candidats LCP. Si un nouvel élément est rendu, qu'il est visible dans le viewport et plus grand que l'élément LCP précédemment identifié, il devient le nouveau LCP..

Points clés des données de terrain LCP : Chez CoreDash, nous suivons des millions d'entrées LCP par jour. Il s'avère que pour les pages vues sur mobile, l'élément LCP est souvent un élément textuel, soit un paragraphe, soit un titre. En moyenne (ou au 75ème percentile pour être précis), les Core Web Vitals passent lorsque l'élément LCP est un nœud de texte ou même une image normale. Lorsque l'élément LCP est une image d'arrière-plan, une vidéo ou une image chargée en lazy-loading, les Core Web Vitals ont tendance à échouer.

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

Pour passer les Core Web Vitals pour le Largest Contentful Paint, au moins 75% de vos visiteurs doivent avoir un 'bon' score LCP. Un score LCP entre 0 et 2,5 secondes est considéré comme un bon score LCP, un score LCP entre 2,5 et 4 secondes nécessite une amélioration et un score LCP supérieur à 4 secondes est considéré comme mauvais.

Comment le LCP est mesuré : Les quatre phases clés

Selon Google, le Largest Contentful Paint peut être décomposé en 4 sous-parties.

Le temps LCP final d'une page n'est pas une valeur unique et monolithique. C'est la somme de quatre sous-parties distinctes. Comprendre cette décomposition est la clé pour diagnostiquer et corriger efficacement les problèmes LCP.

Voici une décomposition des quatre phases :

• Time to first byte (TTFB) - C'est le temps de réponse pur du serveur. C'est le temps qu'il faut au navigateur pour recevoir le premier octet de données de votre serveur. Un TTFB lent est un problème fondamental qui tuera toujours votre LCP.
• Resource load delay - C'est l'"écart de découverte". C'est le temps entre le TTFB et le moment où le navigateur commence à télécharger la ressource LCP. Un long délai ici signifie que le navigateur a trouvé la ressource LCP tardivement, un symptôme classique de l'utilisation d'images d'arrière-plan CSS ou de rendu côté client.
• Resource load time - C'est le temps nécessaire pour télécharger réellement le fichier de la ressource LCP (par exemple, l'image ou la police). Tout dépend de la taille du fichier et des conditions du réseau.
• Element render delay - C'est le dernier délai. C'est le temps entre le moment où la ressource LCP finit d'être téléchargée et le moment où l'élément est entièrement rendu. Ce délai est presque toujours causé par le thread principal du navigateur qui est bloqué par d'autres tâches, en particulier le traitement JavaScript.

Chacun de ces domaines peut être optimisé pour améliorer le Largest Contentful Paint. Pour comprendre les étapes à suivre, lisez Corriger et identifier les problèmes de Largest Contentful Paint (LCP).

Comment mesurer le Largest Contentful Paint ?

Le Largest Contentful Paint (LCP) peut être mesuré avec du JavaScript pur, des données de laboratoire (Lab) et des outils de terrain (Field). Les deux ont leurs avantages et leurs inconvénients.

Mesurer le Largest Contentful Paint avec JavaScript

Pour mesurer le Largest Contentful Paint (LCP) en utilisant JavaScript, l'API Performance Observer offre une solution rapide. L'extrait de code suivant montre comment capturer le timing LCP et les informations sur l'élément :

new PerformanceObserver((list) => {
    const lcpEntry = list.getEntries().at(-1);
    console.log('LCP value: ', lcpEntry.startTime);
    console.log('LCP element: ', lcpEntry.element, lcpEntry.url);
  }).observe({ type: 'largest-contentful-paint', buffered: true });

Cet extrait suit l'entrée LCP telle qu'elle est rapportée, affichant son horodatage et les détails de l'élément dans la console. Cet extrait suit l'entrée LCP telle qu'elle est rapportée. Pour des informations plus approfondies, envisagez d'utiliser la Web Vitals Library.

Mesurer le Largest Contentful Paint (LCP) dans Chrome DevTools

1. Ouvrez Chrome DevTools en appuyant sur Ctrl+Shift+I (ou Cmd+Option+I sur Mac).
2. Naviguez vers l'onglet Performance.
3. Rechargez la page pour voir les Core Web Vitals.

L'onglet performance des devtools affiche maintenant des informations sur les Core Web Vitals, y compris le timing et l'élément du Largest Contentful Paint.

Mesurer le Largest Contentful Paint avec des outils Lab et Field

Soyons clairs : les données Lab et Field servent deux objectifs différents. Vous avez besoin des deux.

• Les données de terrain (RUM et CrUX) sont les seules données qui comptent vraiment pour passer les Core Web Vitals. C'est ce que vos vrais utilisateurs vivent. Google utilise ces données de son ensemble de données CrUX. Vous commencez ici pour savoir si vous avez un problème.
• Les données de laboratoire (Lighthouse, etc.) sont un test contrôlé. Ce n'est pas ce que Google utilise pour le classement, mais c'est essentiel pour le débogage. Vous utilisez cela pour comprendre pourquoi vous avez un problème.

Voici un guide rapide des outils essentiels :

Améliorer le Largest Contentful Paint

L'optimisation du LCP nécessite une approche systématique qui aborde les quatre phases. Tout ce qui se passe avant que l'élément LCP ne soit peint, que ce soit lié au réseau ou intensif en CPU, peut impacter le score LCP. Ne cherchez pas juste une correction ; comprenez toute la chaîne. Voici la stratégie de haut niveau :

• Optimisez le TTFB : Votre serveur doit être rapide. Si votre TTFB est lent, rien d'autre ne compte. Cela implique la mise en cache côté serveur, l'utilisation d'un CDN, et un code backend efficace. En savoir plus dans notre guide sur l'optimisation du TTFB.
• Éliminez le Resource Load Delay : Assurez-vous que l'élément LCP est dans le HTML initial pour que le scanner de préchargement du navigateur puisse le trouver instantanément. Évitez les images d'arrière-plan CSS pour le LCP. Préchargez les images critiques qui sont découvertes tardivement. Apprenez comment dans notre guide pour corriger le Resource Load Delay.
• Réduisez le Resource Load Time : Réduisez la taille du fichier LCP. Cela signifie utiliser des formats d'image modernes comme AVIF, des images réactives et une compression appropriée. Voir notre guide complet sur comment optimiser l'image LCP.
• Raccourcissez l'Element Render Delay : Arrêtez de bloquer le thread principal. Différez le JavaScript non critique, découpez les tâches longues et minimisez le CSS bloquant le rendu. Cela est couvert dans notre guide sur la correction des problèmes LCP.