Guide de correction
LCP lent : diagnostiquer et améliorer l’affichage principal
Un LCP lent signifie que le plus grand contenu visible arrive tard. Trouvez ce qui retarde cet élément avant de modifier votre page.
Comprendre la mesure
Le Largest Contentful Paint repère l’affichage du plus grand élément éligible dans la zone visible : image, bloc de texte ou vidéo. La cible est au plus 2,5 s au 75e percentile des visites, séparément sur mobile et ordinateur ; au-delà de 4 s, le résultat est mauvais. Entre les deux, il est à améliorer.
Une exécution Lighthouse ou Argos est une mesure de laboratoire. Comparez-la aux données terrain CrUX ou RUM, lorsqu’elles existent. Vérifiez si les données concernent cette URL ou toute l’origine ; une absence de données ne prouve pas que la page est rapide.
Trouver la partie qui attend
Enregistrez un chargement dans Performance de Chrome DevTools. Sélectionnez le repère LCP, notez l’élément et, pour une image, retrouvez sa requête dans Réseau. L’élément peut changer selon la largeur et le contenu.
- HTML tardif (TTFB élevé) : examiner redirections, traitement serveur et cache. Tester un cache partagé seulement si la réponse ne contient aucune donnée privée.
- HTML reçu mais requête LCP tardive : chercher une image injectée par JavaScript, un fond découvert via CSS ou un chargement différé.
- Requête commencée mais longue : comparer poids transféré, dimensions, format et cache de la ressource.
- Ressource prête mais élément invisible : examiner CSS bloquante, police, masquage initial et longues tâches JavaScript. Pour un LCP texte, commencer par ces pistes.
Corriger une cause à la fois
Pour une image principale identifiée comme LCP, rendez son URL découvrable dans le HTML initial. Retirez loading="lazy" et testez fetchpriority="high". Réservez cette priorité à la ressource critique ; précharger toutes les images crée de la concurrence.
Servez des dimensions adaptées via srcset/sizes et comparez WebP/AVIF à qualité acceptable. Réduisez les scripts inutiles et le CSS critique bloquant. Un fichier plus léger ne corrige pas un élément qui reste caché jusqu’à la fin d’un script.
<img src="/hero.webp" width="960" height="540"
fetchpriority="high" alt="Présentation du produit">Mesurer avant et après
Gardez la même URL de test, largeur, version du navigateur, ralentissement CPU/réseau et état du cache. Faites au moins cinq passages avant et après ; conservez les valeurs et leur médiane, puis vérifiez l’élément LCP et ses délais dans la trace.
L’exemple local ci-dessous utilise uniquement une page de démonstration. Il illustre le retrait d’un délai de découverte ; ses résultats ne prédisent pas le gain de votre site. Vérifiez ensuite que les interactions, la qualité d’image et les données terrain ne régressent pas.
Lire le constat dans Argos
Le rapport expose les mesures de navigateur disponibles et les constats Lighthouse associés, dont runtime.lcp et lighthouse.audit.largest-contentful-paint. Les valeurs proviennent d’exécutions différentes et peuvent varier. Un module indisponible ne vaut pas un LCP de zéro.
Argos n’identifie pas à lui seul la cause de chaque retard et ne collecte pas votre percentile terrain. Après correction, relancez l’audit de la même page et confrontez-le à vos traces.
Avant/après mesuré sur une démonstration locale
Le 16 octobre 2026, navigateur Chromium intégré, fenêtre 390 × 844, sans ralentissement CPU/réseau, réponses no-store sur loopback. Même image et priorité : avant, insertion par JavaScript après un délai artificiel de 1 000 ms ; après, image présente dans le HTML initial. Élément LCP vérifié : #hero.
| Variante | Mesures | Médiane |
|---|---|---|
| Avant | 1060, 1052, 1048, 1060, 1048 | 1052 ms |
| Après | 60, 52, 52, 56, 56 | 56 ms |
Reproduction dans le dépôt : scripts/lcp-guide-demo.mjs, routes /before et /after. Ce test isole un délai artificiel ; il ne mesure ni un domaine client ni les performances de production d’Argos. Une optimisation du serveur ou du rendu demanderait une autre expérience.
Références officielles
Références consultées le 16 octobre 2026. Exemples à adapter et à tester sur votre périmètre.
Vérifier votre correction
Après vos tests, relancez un audit de la même URL publique et comparez les constats disponibles.