Apprendre
Optimisation LCP : améliorer Largest Contentful Paint et la vitesse de page
Un guide approfondi du Largest Contentful Paint : les quatre phases qui le composent, comment identifier votre élément LCP et les corrections qui le font vraiment bouger.
Lancez un audit DomainLens frais et utilisez le rapport comme liste de priorités.
Ce que mesure le LCP
Le Largest Contentful Paint (LCP) marque le moment où le plus grand élément du viewport — souvent une image hero, une affiche vidéo ou un gros bloc de texte — finit de s’afficher. C’est la métrique qui répond le mieux à « quand la page a-t-elle vraiment semblé prête ? », d’où son lien étroit avec la sensation de vitesse.
Un bon LCP est de 2,5 secondes ou moins au 75e centile des utilisateurs réels ; au-delà de 4 secondes, c’est mauvais. Mesuré sur le terrain sur votre quart de visites les plus lentes, une page instantanée au bureau peut quand même échouer.
Les quatre phases d’un LCP
La chose la plus utile est d’arrêter de voir le LCP comme un seul nombre et de le décomposer en quatre sous-parties. Presque chaque correction cible l’une d’elles, donc mesurer la répartition indique où passe réellement le temps :
- Time to First Byte (TTFB) : le temps que met le serveur à envoyer le premier octet. Backends lents, absence de cache et hébergement lointain vivent ici.
- Resource load delay : l’écart entre le premier octet et le début du téléchargement de l’image LCP — souvent dû à une découverte tardive ou une priorité basse.
- Resource load time : la durée de téléchargement de l’image LCP elle-même. Images surdimensionnées, non compressées, au mauvais format.
- Element render delay : le temps entre le téléchargement de l’image et son affichage réel — souvent bloqué par du CSS ou JavaScript bloquant.
Comment trouver votre élément LCP
On ne corrige pas ce qu’on n’a pas identifié — et l’élément LCP diffère selon le template et le viewport.
- Dans le panneau Performance, enregistrez un chargement et regardez le marqueur « LCP » de la piste Timings ; il nomme l’élément exact.
- Lancez PageSpeed Insights et lisez le diagnostic « Élément Largest Contentful Paint », qui montre le nœud et la répartition par phase.
- Vérifiez mobile et desktop — l’élément LCP est souvent une image différente sur chacun.
- Confirmez avec les données terrain pour optimiser l’élément que les vrais utilisateurs attendent, pas celui que votre test de labo rapide choisit.
Comment afficher l’élément LCP plus tôt
- Réduisez le TTFB : mettez le HTML en cache au bord/CDN, préchauffez les requêtes lentes et hébergez près de votre audience.
- Rendez l’image LCP immédiatement détectable : placez-la dans le HTML initial avec fetchpriority="high", et préchargez-la si elle vient du CSS ou est injectée par JavaScript.
- Ne lazy-loadez jamais l’image LCP — loading="lazy" sur le hero est l’une des régressions auto-infligées les plus fréquentes.
- Réduisez le fichier : servez une image bien dimensionnée au format moderne (AVIF/WebP) avec srcset responsive pour que le mobile ne télécharge pas le hero desktop.
- Supprimez le travail bloquant : inlinez le CSS critique, différez CSS et JavaScript non critiques, et n’injectez pas le hero via un framework client après l’hydratation.
Les erreurs qui gonflent le LCP
- Optimiser le score de labo Lighthouse en ignorant le TTFB terrain, sous-représenté en labo.
- Tout précharger, ce qui sature le réseau et retarde la seule ressource importante.
- Servir le hero depuis une origine tierce lente sans preconnect.
- N’afficher le contenu principal qu’après un fetch de données côté client, si bien que le LCP attend JavaScript et un aller-retour API.
Comment valider le LCP
Réexécutez la trace Performance et vérifiez que la phase visée a bien diminué — TTFB plus bas, requête d’image plus tôt, blocage supprimé. Puis suivez le LCP terrain dans Search Console au fil des semaines, car il agrège 28 jours de visites réelles.
Dans DomainLens, lisez le LCP avec le temps de réponse serveur et les ressources bloquantes signalées : le gain le plus rapide est souvent de faire demander l’image hero plus tôt et de la télécharger plus légère, sur la connexion mobile de vos visiteurs.