Le Largest Contentful Paint (LCP) est une métrique clé de l’expérience utilisateur introduite par Google en 2021 et intégrée dans ses systèmes de classement. Il s’agit de l’une des trois métriques des Core Web Vitals (CWV) qui suivent les performances techniques ayant un impact sur l’expérience utilisateur. Ces métriques sont paradoxales, car bien que Google mette en avant leur importance, il minimise parfois leur impact sur les classements. Néanmoins, LCP, comme les autres signaux CWV, est essentiel pour diagnostiquer les problèmes techniques et s’assurer que votre site Web offre une fonctionnalité de base à vos utilisateurs.
Qu’est-ce que le Largest Contentful Paint ?
Le LCP mesure le temps nécessaire au principal contenu d’une page pour se télécharger et être prêt à l’interaction. Plus précisément, il s’agit du temps écoulé depuis l’initiation du chargement de la page jusqu’à l’affichage de la plus grande image ou du bloc de texte visible à l’écran. Les éléments situés en dessous du pli de la page ne comptent pas. Les images, les vidéos, les images de fond et les éléments de texte au niveau des blocs comme les tags de paragraphe sont typiquement mesurés.
Le LCP comprend les sous-métriques suivantes :
- Time to First Byte (TTFB).
- Resource load delay.
- Resource load duration.
- Element render delay.
Optimiser pour le LCP
Optimiser le LCP signifie optimiser chacune de ces métriques afin que le temps de chargement et d’affichage des ressources LCP soit inférieur à 2,5 secondes.
Time To First Byte (TTFB)
Le TTFB est le temps de réponse du serveur et mesure le temps nécessaire au navigateur de l’utilisateur pour recevoir le premier octet de données de votre serveur. Cela inclut le temps de recherche DNS, le temps de traitement des requêtes par le serveur et les redirections.
Optimiser le TTFB peut réduire significativement le temps de chargement global et améliorer le LCP. Voici quelques facteurs affectant le temps de réponse du serveur :
- Requêtes de base de données.
- Cache CDN manqués.
- Rendu inefficace côté serveur.
- Hébergement.
Resource Load Delay
Le délai de chargement des ressources est le temps que met le navigateur pour localiser et commencer à télécharger la ressource LCP. Par exemple, si vous avez une image de fond dans votre section principale nécessitant le chargement de fichiers CSS pour être identifiée, il y aura un délai égal au temps que le navigateur met à télécharger le fichier CSS avant de commencer à télécharger l’image LCP.
Pour améliorer ce délai, vous pouvez précharger les fichiers CSS et les images LCP en définissant fetchpriority= »high » pour l’image afin qu’elle commence à télécharger le fichier CSS immédiatement. Une meilleure approche serait d’inliner le CSS critique pour le contenu au-dessus du pli afin de ne pas avoir à télécharger le fichier CSS.
Resource Load Duration
La durée de chargement des ressources se réfère au temps réel passé à télécharger la ressource LCP. Même si le navigateur trouve rapidement et commence à télécharger les ressources, des vitesses de téléchargement lentes peuvent encore affecter négativement le LCP. Cela dépend de la taille des ressources, de la vitesse de connexion du serveur et des conditions réseau de l’utilisateur.
Vous pouvez réduire la durée de chargement des ressources en :
- Utilisant le format WebP.
- Dimensions propres aux images (faire correspondre la taille intrinsèque de l’image à la taille visible).
- Priorisant le chargement.
- Utilisant un CDN.
Element Render Delay
Le délai de rendu des éléments est le temps nécessaire au navigateur pour traiter et rendre l’élément LCP. Cette métrique est influencée par la complexité de votre HTML, CSS et JavaScript. Minimiser les ressources de blocage du rendu et optimiser votre code peuvent aider à réduire ce délai.
Une manière d’améliorer non seulement la durée et le délai de chargement, mais aussi toutes les métriques CWV lorsque les utilisateurs naviguent sur votre site, est de mettre en œuvre des règles de spéculation API pour les futures navigations. En pré-rendant les pages lorsque les utilisateurs survolent les liens ou les pages qu’ils sont susceptibles de visiter, vous pouvez faire en sorte que vos pages se chargent instantanément.
