LCP (Largest Contentful Paint)

Le Largest Contentful Paint (LCP) est l'un des trois Core Web Vitals de Google. Il mesure le temps écoulé entre le début du chargement de la page et l'instant où le plus grand élément visible dans la fenêtre — généralement une image hero, une image de produit, une vidéo ou un bloc de texte large — est entièrement rendu. Le LCP est le meilleur indicateur de la vitesse de chargement perçue par l'utilisateur, c'est-à-dire le moment où la page semble prête.

Selon les standards Google, un LCP inférieur à 2,5 secondes est considéré "Bon", entre 2,5 et 4 secondes il est "À améliorer", et au-delà de 4 secondes il est "Mauvais". Les causes les plus fréquentes d'un LCP dégradé sont : des images non optimisées ou non priorisées (manque de fetchpriority sur l'image hero), des ressources CSS ou JavaScript bloquant le rendu, des temps de réponse serveur lents (TTFB élevé), des polices web chargées tardivement, et l'absence de CDN pour les utilisateurs géographiquement distants du serveur.

Les optimisations spécifiques au LCP comprennent : utilisation de formats d'image modernes (WebP, AVIF), attribution explicite des dimensions des images, implémentation du preloading de l'image LCP via la balise link rel="preload", déplacement des CSS critiques inline pour éviter les requêtes bloquantes, activation du HTTP/2 ou HTTP/3, et mise en place d'une stratégie de mise en cache CDN agressive. Next.js et les frameworks modernes gèrent une partie de ces optimisations automatiquement via leur composant Image.