Retour

Largest Contentful Paint (LCP)

Qu’est-ce que le LCP ?

Le Largest Contentful Paint est l’une des métriques essentielles du Core Web Vitals. Le LCP permet de mesurer le temps d’affichage nécessaire de la plus grande portion de contenu de la page affichée à l’écran.  

Il est important de distinguer le LCP du FCP (First Contentful Paint) qui, comme le décrit le W3C, correspond au "moment où le navigateur procède au rendu du premier élément du contenu du DOM (Document Object Model) qui est soit un texte, une image, un SVG ou un élément de type canvas".

Qu'est-ce qu'un bon LCP ?

Un LCP en dessous de 2,5 secondes permet d’obtenir une très bonne expérience, ce qui signifie que votre expérience utilisateur peut être détériorée si le temps d’affichage de la plus grande portion de contenu de la page affichée à l’écran dépasse 2,5 secondes.

Avec quels éléments le LCP est-il calculé ?

Les éléments pris en compte pour le calcul du LCP sont :

  • les éléments <img>
  • les éléments <vidéo> (l’image de l’affiche est utilisée)
  • les éléments <image> situés à l’intérieur d’un élément <svg>
  • les éléments avec une image de fond chargée par la fonction url()
  • les éléments de type "block" comprenant du texte

Comment optimiser le LCP ?

Améliorer le temps de réponse du serveur en :

  • optimisant votre serveur
  • utilisant un CDN
  • mettant vos ressources en cache
  • servant en priorité les pages HTML en cache
  • établissant des préconnexions avec des tiers

Agissez sur l’analyse du balisage HTML par le serveur pour le rendre plus efficace en :

  • réduisant le temps de blocage des CSS
  • minifiant le CSS
  • différant les CSS non-critiques
  • inclinant les CSS critiques
  • réduisant le temps de blocage du JavaScript

Mais d’autres ressources peuvent affecter la vitesse de l’affichage. Il est possible d’améliorer ce processus en :

  • optimisant et en compressant les images
  • préchargeant les ressources importantes
  • compressant les fichiers textuels
  • mettant en cache des ressources

L’utilisation de JavaScript côté client peut avoir des effets négatifs sur le LCP. Il est possible d’optimiser ce procédé en :

  • réduisant le JavaScript critique
  • utilisant le Server-Side rendering
  • utilisant le pré-rendering
Retour