LCP WordPress : guide complet pour passer sous les 2,5 secondes en 2026
Le LCP (Largest Contentful Paint) mesure le temps de chargement du plus grand élément visible dans la fenêtre du navigateur — le plus souvent votre image hero ou votre titre H1. Google cible un LCP sous 2,5 s pour le classement. Ce guide technique couvre toutes les optimisations LCP spécifiques à WordPress : preload, fetchpriority, TTFB, WebP et CDN.
Le LCP (Largest Contentful Paint) est la métrique Core Web Vitals qui mesure combien de temps il faut pour que le contenu principal de votre page soit visible. C’est souvent votre image hero, votre logo ou votre titre H1. Google cible < 2,5 s pour un LCP « bon ». Voici comment y arriver sur WordPress.
Identifier l’élément LCP de chaque page
Avant d’optimiser, identifiez l’élément que Google considère comme LCP :
- Ouvrez PageSpeed Insights sur votre URL
- Dans la section « Diagnostics », cherchez « Largest Contentful Paint element »
- L’outil vous indique exactement quel élément HTML est mesuré
Sur un site WordPress classique, le LCP est généralement :
- L’image hero (background-image ou balise img)
- Le logo si le hero est absent
- Le titre H1 si la page est sans image above-the-fold
- La première image d’un article de blog
Problème n°1 : l’image hero est chargée trop tard (lazy load)
La cause la plus fréquente d’un LCP élevé sur WordPress : l’image hero est en loading="lazy". Le lazy load est excellent pour les images below-the-fold, mais catastrophique pour l’image LCP. Sur WordPress, les plugins d’optimisation (Smush, ShortPixel) appliquent parfois le lazy load à toutes les images sans exception.
Fix : Assurez-vous que l’image hero a loading="eager" et ajoutez fetchpriority="high" :
<img src="hero.webp"
loading="eager"
fetchpriority="high"
width="1200" height="630"
alt="Description">Problème n°2 : l’image LCP n’est pas préchargée (preload manquant)
Par défaut, le navigateur ne découvre l’image hero qu’après avoir parsé le HTML. En ajoutant un hint preload dans le <head>, le navigateur commence à télécharger l’image en parallèle dès les premières millisecondes :
<link rel="preload"
as="image"
href="/wp-content/uploads/hero.webp"
fetchpriority="high">Sur WordPress, ajoutez ce code dans functions.php via le hook wp_head, conditionné à la page concernée. Pour une image responsive, utilisez imagesrcset et imagesizes :
<link rel="preload" as="image"
href="hero-800.webp"
imagesrcset="hero-400.webp 400w, hero-800.webp 800w, hero-1200.webp 1200w"
imagesizes="100vw"
fetchpriority="high">Problème n°3 : TTFB élevé (serveur lent)
Le LCP ne peut pas être bon si votre serveur met 1,5 s à répondre. Le TTFB est la fondation du LCP. Un TTFB > 600 ms rend impossible un LCP < 2,5 s, quelles que soient les autres optimisations.
Améliorations du TTFB sur WordPress :
- Cache de page : WP Rocket, LiteSpeed Cache, ou Nginx FastCGI Cache. Un cache qui fonctionne fait passer le TTFB de 800 ms à 80 ms.
- CDN Cloudflare : sert le HTML depuis le datacenter le plus proche du visiteur. Gain de 100 à 400 ms selon la distance.
- PHP-FPM + OPcache : assurez-vous que votre hébergeur utilise PHP 8.2+ avec OPcache activé.
- Base de données optimisée : désactivez les plugins inutiles (chaque plugin actif génère des requêtes BDD à chaque chargement).
Problème n°4 : image trop lourde
Une image hero de 800 ko est un tueur de LCP. Cibles recommandées :
| Format | Qualité | Poids cible hero 1200px |
|---|---|---|
| JPEG | 80 | < 150 ko |
| WebP | 80 | < 80 ko |
| AVIF | 60 | < 50 ko |
Utilisez Squoosh.app ou l’extension ShortPixel pour WordPress. Le plugin Imagify convertit automatiquement en WebP et sert le bon format selon le navigateur via les balises <picture>.
Problème n°5 : polices Google Fonts bloquantes
Si votre titre H1 est l’élément LCP et qu’il utilise une police Google Fonts, le LCP est retardé jusqu’au chargement de la police. Deux solutions :
- font-display: swap : affiche une police système pendant le chargement, puis swipe. Ajoute du CLS mais améliore le LCP.
- Self-hosting : hébergez la police sur votre serveur pour éviter le round-trip DNS vers fonts.googleapis.com. Gagnez 100 à 300 ms.
Checklist LCP complète
- Image hero en
loading="eager"+fetchpriority="high" - Preload de l’image LCP dans le
<head> - Format WebP ou AVIF, < 100 ko
- TTFB < 300 ms (cache page actif)
- CDN activé (Cloudflare ou équivalent)
- Aucune ressource render-blocking avant l’image LCP
- Polices self-hostées ou avec font-display: swap
Notre équipe SEO technique implémente cette checklist sur vos pages et garantit un LCP < 2,5 s sur mobile.
Questions fréquentes sur le LCP WordPress
Mon LCP est bon sur desktop mais mauvais sur mobile — pourquoi ?
Le mobile est plus lent à deux niveaux : CPU (2 à 5x plus lent que desktop) et réseau (Google simule une connexion 4G à 1,6 Mbps). Une image de 300 ko met 1,5 s à télécharger en 4G simulée. Réduisez le poids des images et activez la compression côté serveur (gzip/brotli).
Le LCP change entre les rechargements — est-ce normal ?
Oui. Le LCP dépend du cache (première visite vs visite suivante), de la charge serveur et du réseau. PageSpeed Insights mixe des données lab (simulées) et des données de terrain (CrUX). Fiez-vous aux données de terrain dans Google Search Console pour la réalité.
Un LCP de 2,4 s est-il suffisant pour ne pas être pénalisé par Google ?
Oui, 2,4 s est dans la zone « Bon » (< 2,5 s). Mais visez 1,8 s ou moins : la marge est utile car les données de terrain varient, et les conditions réseau réelles sont souvent plus mauvaises que les simulations.