LCP : comment optimiser le Largest Contentful Paint

Le Largest Contentful Paint (LCP) est la métrique des Core Web Vitals qui influence le classement Google depuis 2021. Ce n’est pas un simple chiffre technique : il reflète la vitesse à laquelle l’utilisateur perçoit la page comme chargée. Un mauvais LCP signifie que les visiteurs voient un écran vide ou une image principale (hero) non chargée, et qu’ils quittent la page avant l’apparition du contenu.

zoom_in

Qu’est-ce que le LCP et pourquoi il compte

Le LCP mesure le temps écoulé entre le début de la navigation et le moment où le plus grand élément de contenu (texte ou image) devient visible dans la fenêtre d’affichage. C’est le seuil que Google utilise pour considérer que le chargement est « terminé » du point de vue de l’expérience utilisateur.

Contrairement au FCP (First Contentful Paint), qui se déclenche au premier pixel, le LCP suit précisément le contenu utile. Une page peut afficher un spinner à 0,3 s, mais si l’image principale n’apparaît qu’à 5 s, le LCP vaut 5 s.

Quels éléments le navigateur considère comme candidats au LCP

Le navigateur ne suit pas chaque élément : il surveille certains types précis et retient, au moment où le chargement se termine, le plus grand par surface dans la fenêtre d’affichage.

Éléments <img>

Images standard. Le candidat LCP le plus courant sur la plupart des pages. Le temps mesuré correspond au moment où l’image décodée apparaît dans la fenêtre d’affichage.

<image> dans un SVG

Images placées dans des éléments SVG. Elles sont traitées comme les éléments img pour le LCP.

background-image en CSS

Images de fond définies en CSS. Point clé : le navigateur ne lance pas le chargement d’une background-image tant que le CSSOM n’est pas construit. C’est l’une des principales sources de retard du LCP.

Blocs de texte

Paragraphes <p>, titres <h1> à <h6>, <div> et autres éléments contenant du texte. Si un bloc de texte est plus grand que n’importe quelle image, il devient le LCP.

<video> avec poster

L’image de poster d’un élément vidéo (attribut poster). Si la vidéo occupe la majeure partie de l’écran, le poster doit se charger le plus vite possible.

Comment se décompose le temps LCP

Google décompose le LCP en 4 sous-composantes. Comprendre chacune d’elles est la clé pour bien diagnostiquer et hiérarchiser les optimisations.

Règle : attaquez d’abord la composante la plus lourde. Si le TTFB représente 3 secondes sur les 5 du LCP, optimiser les images n’aura qu’un impact minime. Corrigez d’abord le temps de réponse du serveur.

Principales causes d’un LCP lent

90  % des mauvais scores LCP ont les mêmes causes profondes. Le diagnostic prend 15 minutes dans DevTools ou PageSpeed Insights.

Comment optimiser le LCP : un plan étape par étape

L’optimisation du LCP ne repose pas sur une astuce unique : c’est un ensemble d’améliorations liées entre elles. Travaillez dans l’ordre, en commençant par les actions au plus fort impact.

Étape 1 : ramener le TTFB à 200–400 ms

Le TTFB est la base. Si le serveur est lent, toutes les autres optimisations se heurtent à ce plafond.

1. Configurez la mise en cache HTTP : Cache-Control: max-age=31536000 pour les ressources statiques, s-maxage pour les proxys CDN.
2. Activez la compression : Brotli (à privilégier) ou gzip pour le HTML, le CSS et le JS. Brotli produit des fichiers 15–25  % plus légers que gzip.
3. Branchez un CDN : Cloudflare, Fastly, BunnyCDN. Pour les sites statiques, la mise en cache en périphérie ramène le TTFB à 20–50 ms.
4. Optimisez la base de données : index sur les champs fréquemment interrogés, mise en cache des requêtes avec Redis ou Memcached.
5. Utilisez HTTP/2 ou HTTP/3 : plusieurs requêtes sur une seule connexion, sans blocage de tête de ligne.

Étape 2 : optimiser l’image LCP

Si l’élément LCP est une image (visuel principal, photo produit), cette série d’actions offre un très bon retour sur investissement.

• Passez aux formats modernes : WebP (gain de 25 à 35  % par rapport au JPEG) ou AVIF (gain de 40 à 55  %). Utilisez <picture> avec une image de repli.
• Ajoutez fetchpriority="high" à l’image LCP : le navigateur la chargera en priorité absolue.
• Retirez loading="lazy" de l’élément LCP. Le lazy load ne convient qu’aux images situées sous la première fenêtre d’affichage.
• Ajoutez <link rel="preload" as="image"> dans le <head> pour l’image LCP : le navigateur commence à la charger avant l’analyse du body.
• Indiquez les attributs width et height pour éviter le CLS. Le navigateur réserve l’espace avant le chargement de l’image.
• Configurez srcset et sizes pour un chargement adapté à l’écran : sur mobile, l’utilisateur reçoit une image de 400 px au lieu de 1600 px.

Étape 3 : supprimer les ressources bloquant le rendu

Chaque ressource bloquant le rendu ajoute du délai au LCP. Objectif : aucune ressource bloquante sur le chemin critique.

Étape 4 : optimiser les polices (quand le LCP est du texte)

Quand l’élément LCP est un bloc de texte (titre, chapeau), le problème vient souvent du délai d’affichage de la police.

1. Ajoutez font-display: swap ou optional dans @font-face. Le navigateur affiche d’abord la police système, puis la remplace par la police personnalisée une fois chargée.
2. Utilisez <link rel="preload" as="font" type="font/woff2" crossorigin> pour les polices critiques dans le <head>.
3. Limitez le jeu de caractères : le subsetting ne charge que les glyphes utiles (latin, cyrillique).
4. Hébergez vous-même les polices au lieu de les charger depuis Google Fonts : vous supprimez une résolution DNS et une connexion supplémentaires.
5. Configurez size-adjust, ascent-override et descent-override dans @font-face pour réduire le CLS lors du remplacement de la police.

Étape 5 : SSR et SSG pour les frameworks JavaScript

Si le site tourne sous React, Vue ou Next.js sans SSR, le LCP sera élevé par défaut : le navigateur doit télécharger le JavaScript, l’exécuter, puis seulement afficher le contenu.

Server-Side Rendering (SSR)

Le HTML est généré sur le serveur à chaque requête. Le navigateur reçoit un HTML prêt à l’emploi, l’analyse, et l’élément LCP apparaît sans attendre le JS. La meilleure option pour les contenus dynamiques.

Static Site Generation (SSG)

Le HTML est généré au moment du build. Le serveur livre un fichier déjà prêt, ce qui offre la meilleure vitesse de TTFB et de LCP. Idéal pour les blogs, les pages de destination et les pages non personnalisées.

Incremental Static Regeneration (ISR)

SSG avec régénération périodique (Next.js). Combine la rapidité des fichiers statiques et la fraîcheur des données. Optimal pour la plupart des contenus CMS.

Streaming SSR

Le serveur commence à envoyer le HTML avant la fin du rendu : le navigateur affiche le contenu progressivement. React 18 et Next.js 13+ le prennent en charge nativement.

Étape 6 : background-image en CSS comme LCP

Si l’élément LCP utilise une background-image en CSS, le navigateur ne peut pas commencer à la charger tant que le CSSOM n’est pas construit. C’est l’une des causes les plus insidieuses d’un LCP lent.

• Remplacez la background-image CSS par <img fetchpriority="high"> : le navigateur la découvre dès l’analyse du HTML.
• Si ce remplacement est impossible, utilisez <link rel="preload" as="image"> pour lancer le chargement manuellement.
• Pour les fonds responsives, utilisez imagesrcset et imagesizes dans la balise preload.
• Placez le CSS contenant la background-image LCP dans un <style> en ligne : vous supprimez une requête réseau.

Outils de mesure et de diagnostic du LCP

Un diagnostic précis compte plus qu’une optimisation à l’aveugle. Utilisez les deux types d’outils : le laboratoire (tests synthétiques) et le terrain (utilisateurs réels).

Comment diagnostiquer le LCP dans Chrome DevTools

DevTools est l’outil le plus précis pour comprendre exactement ce qui ralentit le LCP sur une page donnée.

1. Ouvrez DevTools → Performances, lancez un enregistrement, rechargez la page, puis arrêtez l’enregistrement.
2. Dans Timings, repérez le marqueur LCP : il indique l’heure exacte et l’élément concerné.
3. Étudiez la cascade : repérez la ressource de l’élément LCP et vérifiez à quel moment son chargement a commencé par rapport au TTFB.
4. Cherchez les barres rouges : ce sont les ressources bloquant le rendu. Elles apparaissent juste avant le LCP.
5. Onglet Network, filtrez par type Image : repérez l’image LCP et vérifiez sa priorité (elle doit être Élevée).
6. Onglet Coverage : il affiche le CSS et le JS inutilisés. Une grande quantité de code inutile entraîne un retard du LCP.

FAQ