Largest Contentful Paint (LCP) : comment l'optimiser

Le Largest Contentful Paint mesure le temps d'affichage du plus grand élément visible d'une page, avec un seuil de 2,5 secondes. Comment le mesurer, trouver ce qui le ralentit et l'améliorer, notamment sur WordPress.

Le Largest Contentful Paint (LCP) mesure le temps nécessaire pour afficher le plus grand élément visible au chargement d’une page, le plus souvent une image ou un bloc de texte en haut de l’écran. Google considère qu’un LCP est bon à 2,5 secondes ou moins, à améliorer entre 2,5 et 4 secondes, et mauvais au-delà de 4 secondes, mesuré sur 75 % des visites. Pour l’améliorer, on agit sur quatre leviers : la réponse du serveur, la découverte rapide de la ressource principale, son poids, et tout ce qui retarde son affichage.

On explique ce que mesure exactement le LCP, comment le mesurer, comment trouver ce qui le ralentit grâce à ses quatre sous-parties, puis on détaille les optimisations qui marchent, avec les réglages propres à WordPress.

Qu’est-ce que le Largest Contentful Paint ?
Quel est un bon score LCP ?
Comment mesurer votre LCP ?
Comment savoir ce qui ralentit votre LCP ?
Comment améliorer votre LCP ?
Comment optimiser le LCP sur WordPress ?
Quelles erreurs éviter ?
Questions fréquentes
Sources

Qu’est-ce que le Largest Contentful Paint ?

Le LCP est l’une des trois Core Web Vitals, les indicateurs que Google utilise pour évaluer l’expérience réelle des visiteurs sur une page, avec l’INP (réactivité aux interactions, qui a remplacé le FID le 12 mars 2024) et le CLS (stabilité visuelle). Le LCP mesure la vitesse de chargement telle que l’utilisateur la perçoit : à quel moment le contenu principal de la page apparaît-il ?

Concrètement, le navigateur note le moment où s’affiche le plus grand élément visible dans la fenêtre. Les éléments pris en compte sont :

les images <img> et les images <image> à l’intérieur d’un SVG ;
les vidéos <video> (leur image d’affiche ou leur première image) ;
les éléments avec une image de fond chargée en CSS via url() ;
les blocs de texte (titres, paragraphes).

Seul compte ce qui est visible dans la fenêtre au chargement : le contenu situé plus bas dans la page n’entre pas en jeu. Les navigateurs ignorent aussi les éléments invisibles (opacité à 0), ceux qui couvrent toute la fenêtre et sont traités comme un arrière-plan, et les images de remplissage de faible qualité. Enfin, le navigateur cesse de chercher un nouvel élément dès que l’utilisateur interagit avec la page (clic, défilement, touche du clavier).

Largest Contentful Paint

Quel est un bon score LCP ?

LCP	Appréciation de Google
2,5 secondes ou moins	Bon
Entre 2,5 et 4 secondes	À améliorer
Plus de 4 secondes	Mauvais

Point important : Google évalue ce seuil au 75e percentile des chargements de page, séparément sur mobile et sur ordinateur. Autrement dit, pour que votre page soit jugée « bonne », au moins trois visites sur quatre doivent afficher le contenu principal en 2,5 secondes ou moins. Une mesure isolée sur votre ordinateur de bureau, avec une bonne connexion, ne suffit donc pas.

Côté référencement, Google indique que les Core Web Vitals correspondent à ce que ses systèmes de classement cherchent à récompenser, et recommande vivement d’obtenir de bons résultats. Ce n’est pas pour autant le critère principal : un contenu pertinent reste prioritaire. Mais une page lente fait aussi fuir les visiteurs, comme on l’explique dans notre article sur l’impact d’un site internet lent.

Comment mesurer votre LCP ?

Il existe deux familles de mesures, et il faut les deux :

Les données de terrain, issues de vrais visiteurs utilisant Chrome (le rapport CrUX). On les trouve dans PageSpeed Insights (en haut du rapport, si votre site a assez de trafic) et dans le rapport Core Web Vitals de Google Search Console, qui regroupe les URL offrant une expérience similaire et les évalue sur les 28 derniers jours. Ce sont ces données que Google prend en compte.
Les données de laboratoire, mesurées lors d’un test simulé : Lighthouse (intégré à PageSpeed Insights et à Chrome) et le panneau Performances des outils de développement de Chrome. Elles sont utiles pour diagnostiquer et tester une correction, car elles indiquent l’élément LCP et le détail du chargement.

Notre article sur les Core Web Vitals présente ces outils plus en détail.

Comment savoir ce qui ralentit votre LCP ?

La documentation de Google (web.dev) découpe le LCP en quatre sous-parties successives. Les identifier dans PageSpeed Insights ou Chrome permet de savoir où agir, au lieu d’essayer des optimisations au hasard.

Sous-partie	Ce qu’elle mesure	Part recommandée
Temps de réponse du serveur (TTFB)	Du début de la navigation à la réception du premier octet de la page HTML	Environ 40 %
Délai de chargement de la ressource	Temps perdu avant que le navigateur commence à télécharger l’image LCP	Moins de 10 %
Durée de chargement de la ressource	Téléchargement de l’image elle-même	Environ 40 %
Délai d’affichage de l’élément	Temps entre la fin du téléchargement et l’affichage à l’écran	Moins de 10 %

Si l’un des deux « délais » pèse lourd, c’est qu’il y a du temps perdu, souvent facile à récupérer. Si le téléchargement est long, c’est le poids de l’image qu’il faut travailler. Si le TTFB domine, c’est côté serveur et cache.

Comment améliorer votre LCP ?

1. Accélérer la réponse du serveur

Mettez les pages en cache pour ne pas les recalculer à chaque visite. Notre article sur la mise en cache d’un site explique les différents niveaux de cache.
Utilisez un réseau de diffusion de contenu (CDN), qui rapproche vos fichiers des visiteurs. Selon le Web Almanac 2024 cité par Google, seules 33 % des pages HTML étaient servies par un CDN.
Limitez les redirections : chacune ajoute un aller-retour avant même le début du chargement.
Choisissez un hébergement dimensionné pour votre site et à jour (version de PHP récente pour WordPress, base de données optimisée).

2. Faire découvrir l’image LCP au plus vite

C’est souvent le gain le plus simple. Selon le Web Almanac 2024, 73 % des pages mobiles ont une image comme élément LCP, et 35 % de ces images n’étaient pas repérables dans le code HTML initial (chargées par JavaScript ou en image de fond CSS, par exemple).

Placez l’image principale dans une balise <img> présente dans le HTML, plutôt qu’en image de fond CSS ou injectée par un script.
Ajoutez fetchpriority="high" à cette image pour que le navigateur la télécharge en priorité. Le même Web Almanac notait que seules 15 % des pages concernées utilisaient cet attribut.
Ne mettez jamais loading="lazy" sur l’image LCP : Google précise que le chargement différé de cette image ajoute toujours un délai inutile.
Si l’image ne peut être déclarée que dans le CSS ou le JavaScript, préchargez-la dans l’en-tête avec une balise link rel="preload".

<img src="/images/hero-800.webp"
     srcset="/images/hero-800.webp 800w, /images/hero-1600.webp 1600w"
     sizes="100vw"
     width="1600" height="900"
     fetchpriority="high"
     alt="Description de l'image">

3. Alléger l’image LCP

Compressez vos images avant ou pendant la mise en ligne (outil d’export, extension WordPress dédiée ou étape de compilation).
Utilisez des formats modernes. Le WebP est reconnu par tous les navigateurs actuels et compresse bien mieux que le JPEG ou le PNG. L’AVIF compresse un peu mieux encore, mais MDN recommande de prévoir un format de repli via l’élément <picture>.
Servez la bonne taille selon l’écran avec srcset et sizes ou l’élément <picture> : une image de 1 600 pixels de large n’a rien à faire sur un smartphone.
Servez les images depuis le même domaine que la page quand c’est possible, pour éviter une connexion supplémentaire, ou utilisez un CDN.

Pour aller plus loin sur les images, voyez nos conseils de SEO pour les images.

4. Supprimer ce qui bloque l’affichage

Réduisez le CSS bloquant : intégrez directement dans la page le petit CSS nécessaire au haut de page, et différez le reste.
Évitez les scripts synchrones dans l’en-tête : ajoutez defer ou async aux scripts qui ne sont pas indispensables à l’affichage.
Méfiez-vous du rendu côté client : sur un site construit avec React, Vue ou un autre framework JavaScript, si le contenu principal n’apparaît qu’après l’exécution du script, le LCP en pâtit. Le rendu côté serveur ou la génération de pages statiques règlent souvent le problème.
Limitez les scripts tiers (chat, tests A/B, bannières) qui masquent ou modifient le haut de page.

Google recommande aussi, pour les navigations d’une page à l’autre, d’exploiter le cache « aller-retour » du navigateur (bfcache) et l’API Speculation Rules, qui permet de préparer à l’avance la page suivante probable : le LCP devient alors quasi instantané.

Comment optimiser le LCP sur WordPress ?

WordPress fait déjà une partie du travail. Depuis la version 6.3, il ajoute automatiquement fetchpriority="high" à l’image qu’il estime être l’image LCP, et il évite de mettre en chargement différé les images susceptibles d’apparaître en haut de page. Il reste à vérifier et compléter :

Contrôlez l’image LCP réelle dans PageSpeed Insights : si WordPress s’est trompé (image de fond, slider, image injectée par un constructeur de pages), corrigez le modèle de page.
Évitez les sliders et carrousels en haut de page : ils chargent plusieurs grandes images et reposent souvent sur du JavaScript.
Installez un cache de page et, si possible, un cache objet côté serveur.
Faites le ménage dans les extensions : chacune peut ajouter des feuilles de style et des scripts sur toutes les pages.
Compressez et convertissez les images en WebP ou AVIF avec une extension dédiée ou au moment de l’export.
Vérifiez les polices : si votre titre principal est l’élément LCP, une police lourde chargée tardivement retarde son affichage.

Ces réglages font partie du suivi qu’on assure dans nos formules d’hébergement et maintenance (le budget dépend du niveau de service, voir nos tarifs indicatifs), et l’analyse des Core Web Vitals est incluse dans nos audits de référencement naturel.

Quelles erreurs éviter ?

Chasser le score Lighthouse à 100 au lieu de regarder les données de terrain de vos vrais visiteurs.
Tester uniquement sur ordinateur : le mobile est presque toujours plus lent.
Appliquer le chargement différé à toutes les images, y compris celle du haut de page.
Empiler les extensions d’optimisation qui font la même chose et entrent en conflit.
Cacher le contenu principal derrière une animation d’apparition : tant qu’il n’est pas affiché, le LCP n’est pas atteint.
Oublier de revérifier après chaque refonte, nouveau thème ou nouvelle extension.

Questions fréquentes

Quelle différence entre LCP et FCP ?

Le First Contentful Paint (FCP) mesure l’affichage du tout premier contenu, même minime. Le LCP mesure l’affichage du plus grand élément, donc du contenu principal. Le LCP reflète mieux ce que l’utilisateur perçoit comme « la page est chargée ».

Pourquoi mon LCP est-il différent entre PageSpeed Insights et Search Console ?

Le test de laboratoire simule un appareil et une connexion donnés, à un instant donné. Search Console affiche les données de terrain de vrais visiteurs sur une période glissante et regroupe les pages similaires. Les deux sont utiles, mais ce sont les données de terrain qui comptent pour Google.

Le LCP a-t-il un impact sur le référencement ?

Oui, en tant que Core Web Vital : Google indique que ces indicateurs correspondent à ce que ses systèmes de classement cherchent à récompenser. Mais la pertinence du contenu reste le facteur principal, et un bon LCP ne compense pas une page qui ne répond pas à la recherche.

Quel élément est le plus souvent l’élément LCP ?

Une image, dans la grande majorité des cas : 73 % des pages mobiles selon le Web Almanac 2024 cité par Google. Sur les pages très textuelles, c’est souvent le titre principal ou le premier paragraphe.

Combien de temps pour voir l’effet d’une optimisation ?

Immédiatement dans un test de laboratoire. Les données de terrain de Search Console reposent sur une période glissante de 28 jours : comptez quelques semaines pour que l’amélioration y apparaisse. Pour un diagnostic de votre site, écrivez-nous à contact@osmova.com ou via le formulaire de contact.

Largest Contentful Paint (LCP) : comprendre et optimiser

Qu’est-ce que le Largest Contentful Paint ?

Quel est un bon score LCP ?

Comment mesurer votre LCP ?

Comment savoir ce qui ralentit votre LCP ?