LCP
Définition
Largest Contentful Paint. Temps mis pour afficher le plus grand élément visible de la page. Objectif : sous 2,5 secondes pour passer au vert sur Lighthouse.
Ce que LCP mesure
LCP (Largest Contentful Paint) mesure le temps mis pour afficher le plus grand élément visible dans le viewport au moment du chargement : souvent l'image de hero, le titre principal h1, ou un bloc texte massif. C'est l'indicateur qui répond à la question simple : à quel moment l'utilisateur sent que la page est arrivée ? Le navigateur identifie automatiquement quel élément est le plus grand et chronomètre son apparition. La valeur retenue est le moment où cet élément devient visible, pas quand toute la page est chargée. Cette nuance change tout.
Les seuils Google
Sous 2,5 secondes, votre LCP est considéré comme bon (vert). Entre 2,5 et 4 secondes, à améliorer (orange). Au-delà de 4 secondes, mauvais (rouge). Le ranking dans Google se calcule sur le 75e percentile : 75% de vos visiteurs doivent passer sous le seuil pour que Google considère la page comme rapide. Une moyenne à 2 secondes ne suffit pas si 30% des utilisateurs voient 5 secondes. Cette nuance pousse à optimiser pour les terminaux et connexions les plus faibles, pas pour le MacBook en fibre du développeur.
Identifier l'élément LCP
Avant d'optimiser, on identifie quel élément est mesuré. Chrome DevTools (onglet Performance, marker LCP) le montre directement. Sur la majorité des sites marketing, c'est l'image de hero. Sur un blog, le titre h1 ou la première image de l'article. Sur un e-commerce, l'image principale du produit. Connaître cet élément oriente toutes les optimisations : si c'est une image, on travaille son chargement ; si c'est du texte, on travaille les fonts et le rendu serveur. Optimiser à l'aveugle gaspille des heures.
Optimiser une image LCP
Format moderne : WebP ou AVIF, qui pèsent 30 à 50% de moins qu'un JPEG. Dimensions exactes : pas de 4000x3000 redimensionné par le navigateur, mais une version servie à la taille réelle d'affichage. Attribut priority sur next/image, ou loading="eager" et fetchpriority="high" en HTML brut, qui dit au navigateur de la télécharger avant le reste. Preload dans le head pour les cas critiques. CDN avec edge proche de l'utilisateur. Lazy-loading sur toutes les images en dessous du fold, jamais sur l'image LCP. Ces six points couvrent 80% des cas.
Les autres leviers
Le JavaScript bloquant retarde le rendu : on minimise les scripts synchrones, on déplace les analytics et trackers en defer ou via une balise script ajoutée après le LCP. Les fonts qui changent au chargement provoquent un re-rendu : on précharge les .woff2 critiques et on utilise font-display swap. Le rendu serveur (SSR) ou statique (SSG) livre du HTML complet, contre un SPA qui attend que React s'hydrate. L'edge runtime réduit la latence réseau de 200 à 500 ms sur les utilisateurs distants. Combiner ces leviers permet de descendre sous la seconde.
Mesurer correctement
Chrome DevTools donne le LCP local, utile pour itérer rapidement. PageSpeed Insights mesure en lab et en field via CrUX, distinction critique : seules les données de terrain comptent pour le ranking. WebPageTest permet des tests avancés avec terminaux et bande passante variés. Sur un site déployé, on installe un RUM (Real User Monitoring) qui mesure en continu sur tous les utilisateurs réels, alerte sur les régressions, et segmente par page, par appareil ou par pays. Les écarts entre lab et field sont parfois énormes : un Lighthouse à 95 peut cacher un mauvais LCP en réel.
L'avantage Next.js
Sur un site Next.js correctement codé, on atteint sans difficulté un LCP sous la seconde. next/image gère automatiquement WebP, dimensions, priority et lazy-loading. next/font préload et inline les fonts critiques. Le rendu SSR ou SSG livre du HTML complet au premier octet. Le déploiement sur Vercel ajoute un edge runtime mondial avec un CDN automatique. Combiné à un design simple sans dépendances superflues, on bat la quasi-totalité des sites WordPress concurrents sur ce critère, sans optimisation manuelle complexe. Cette avance se traduit en positions SEO et en taux de conversion supérieurs.