Le LCP mesure le temps avant l'affichage du contenu principal. Le contenu principal est le plus grand bloc de texte ou la plus grande image de la page. Pour la plupart des pages, le LCP est l'indicateur clé, car il détermine le moment où la page devient utile à l'utilisateur.
L'utilisateur arrive sur la page. La page commence à se charger. Le navigateur télécharge le HTML. Le navigateur télécharge le CSS. Le navigateur télécharge le JavaScript. Le HTML s'affiche. Le CSS applique les styles. Le JavaScript s'exécute. Le contenu principal apparaît. C'est le LCP.
Un LCP d'une seconde est excellent. L'utilisateur voit le contenu vite. Un LCP de trois secondes est lent. L'utilisateur attend. Un LCP de cinq secondes est très lent. L'utilisateur part.
Ce qui compte comme Largest Contentful Paint
Le plus grand élément de la page, dans la partie visible sans défiler. En général une image ou un titre. Exemple : une page d'accueil avec une image principale. L'image principale est le plus grand élément. Son moment d'apparition est le LCP.
Exemple : un article de blog avec un titre. Le titre est le plus grand élément. Son moment d'apparition est le LCP.
Exemple : une fiche produit avec l'image du produit. L'image du produit est le plus grand élément. Son moment d'apparition est le LCP.
Le LCP se mesure depuis le clic de l'utilisateur sur le lien (début du chargement de la page) jusqu'à l'apparition du plus grand élément. Il inclut le temps de téléchargement du HTML, du CSS et du JavaScript, le téléchargement de l'image et l'affichage de la page.
Optimiser le LCP
Objectif d'optimisation : un LCP sous deux virgule cinq secondes.
Stratégie un : optimiser le temps de réponse du serveur (TTFB). Un serveur plus rapide fait arriver le HTML plus vite. L'arrivée du HTML est un prérequis à l'affichage. Réduisez le TTFB en améliorant le serveur, en utilisant un CDN, en réduisant les requêtes vers la base de données.
Stratégie deux : réduire la taille du fichier CSS. Un CSS plus léger se télécharge plus vite. Le CSS doit être téléchargé avant l'affichage de la page. Réduisez le CSS en supprimant les styles inutilisés, en le minifiant, en différant le CSS non critique.
Stratégie trois : réduire la taille du fichier JavaScript. Un JavaScript volumineux retarde l'exécution et l'affichage. Réduisez le JavaScript en supprimant le code inutilisé, en découpant les gros fichiers, en différant le JavaScript non critique.
Stratégie quatre : optimiser les images. Les images sont souvent les plus grands éléments (LCP). Réduisez le poids des images en les compressant, en utilisant des formats modernes (WebP), en diminuant leurs dimensions.
Stratégie cinq : précharger les ressources critiques. Indiquez au navigateur de télécharger tôt l'image ou la police critique. L'image se télécharge en parallèle du HTML et du CSS. Cela réduit le LCP.
Exemple concret : optimiser le LCP d'un article de blog
LCP de départ : deux virgule huit secondes.
Analyse : l'image principale de l'article est le plus grand élément. L'image pèse deux mégaoctets. Elle met une virgule deux seconde à se télécharger. Le téléchargement de l'image est le goulot d'étranglement.
Optimisation
Compresser l'image : passer de deux mégaoctets à zéro virgule cinq mégaoctet. Le téléchargement dure maintenant zéro virgule trois seconde.
Convertir au format WebP : réduire encore à zéro virgule trois mégaoctet. Le téléchargement dure maintenant zéro virgule une seconde.
Précharger l'image : indiquer au navigateur de la télécharger tôt. L'image se télécharge en parallèle du HTML. On gagne zéro virgule deux seconde.
Placer le CSS critique dans la partie visible : réduire le temps avant que la page puisse s'afficher. On gagne zéro virgule trois seconde.
Nouveau LCP : une virgule sept seconde.
Deux virgule huit moins une virgule deux (téléchargement de l'image) plus zéro virgule une (téléchargement de l'image compressée) égale une virgule sept seconde. En dessous de l'objectif de deux virgule cinq.
Le LCP selon le type de page
Page d'accueil
L'image principale est généralement le LCP. Optimisez en compressant l'image, en utilisant un CDN, en préchargeant.
Article de blog
Le titre ou la première image est le LCP. Optimisez en réduisant le délai du CSS et du JavaScript, en préchargeant les polices.
Fiche produit
L'image du produit est le LCP. Optimisez en compressant l'image, avec des images adaptatives pour les différents appareils.
Page de paiement
Le formulaire ou le bouton est le LCP. Optimisez en réduisant le CSS et le JavaScript, en préchargeant les ressources critiques.
Chaque type de page a ses propres stratégies d'optimisation. Identifiez votre élément LCP. Optimisez cet élément.
Le LCP sur mobile et sur ordinateur
Le LCP est généralement plus lent sur mobile que sur ordinateur. Le réseau mobile est plus lent. Les appareils mobiles ont moins de puissance de calcul.
LCP de départ sur ordinateur : une virgule cinq seconde. LCP de départ sur mobile : trois secondes.
Le mobile est deux fois plus lent. Les utilisateurs mobiles ressentent davantage la lenteur.
Optimisez d'abord le mobile. Concentrez-vous sur la réduction du poids des images (la bande passante mobile est limitée). Réduisez le JavaScript (les appareils mobiles l'analysent plus lentement). Utilisez des formats adaptés au mobile.
Mesurer l'amélioration du LCP
LCP de départ
Mesurez avant l'optimisation.
Mettre en place l'optimisation
Nouveau LCP
Mesurez après l'optimisation.
Amélioration
LCP de départ moins nouveau LCP.
Exemple
Départ : deux virgule huit secondes. Après optimisation : une virgule sept seconde. L'amélioration est d'une virgule une seconde.
Calculer l'impact
Une amélioration d'une virgule une seconde pourrait augmenter le taux de conversion d'un pour cent (selon le point de départ et le secteur). Pour cinquante mille visiteurs par mois, cela fait cinq cents conversions de plus, avec une valeur de commande de cent dollars. Cinquante mille dollars par mois. Six cent mille dollars par an.
Comparez avec le coût de l'optimisation. Si le coût est de cinquante mille dollars, le retour se fait en un mois. Excellent retour sur investissement.
Questions fréquentes
Comment savoir quel élément est notre LCP ?
Utilisez Google Chrome DevTools. Clic droit sur la page. Inspecter. Onglet Performance. Enregistrez le chargement de la page. DevTools indique l'élément LCP. Vous pouvez aussi consulter PageSpeed Insights. Lighthouse identifie les éléments LCP. Consultez aussi le rapport Core Web Vitals de Search Console. Il montre les éléments LCP des pages. Grâce au créateur de site web de WEMASY, vous pouvez le faire directement sur votre site.
Faut-il optimiser le LCP de toutes les pages ou seulement de la page d'accueil ?
Optimisez toutes les pages. Mais priorisez selon le trafic. La page d'accueil est importante, tout comme les fiches produits (pour une boutique en ligne) ou les pages d'articles (pour un site éditorial). Mesurez le LCP sur toutes les pages importantes. Priorisez l'optimisation selon le volume de trafic.
Le préchargement aide-t-il toujours le LCP ?
Pas toujours. Le préchargement consomme de la bande passante. Si vous préchargez une ressource sans importance, vous utilisez une bande passante qui aurait pu servir à télécharger une ressource importante. Préchargez uniquement les ressources critiques (image principale, police critique). Ne préchargez pas les ressources non critiques.
Comment optimiser le LCP quand le contenu principal est dynamique (chargé depuis une API) ?
Le délai de l'appel API s'ajoute au LCP. Réduisez le temps de réponse de l'API en optimisant la base de données, en mettant les réponses en cache, en utilisant un CDN. Affichez aussi un écran squelette ou un contenu provisoire pendant le chargement de l'API. Le contenu provisoire apparaît instantanément. L'utilisateur a l'impression que la page est chargée. Le vrai contenu vient ensuite. Le LCP perçu est plus rapide que le LCP réel.
Faut-il utiliser le chargement différé pour l'élément LCP ?
Non. Le chargement différé retarde l'image jusqu'à ce qu'elle soit sur le point d'entrer dans la fenêtre d'affichage. Si l'image est dans la partie visible (élément LCP), le chargement différé la retarde pour rien. Ne différez que les images hors écran. Chargez l'élément LCP immédiatement.
En quoi le LCP diffère-t-il du FCP (First Contentful Paint) ?
Le FCP correspond à l'apparition d'un contenu quelconque (même un petit texte). Le LCP correspond à l'apparition du contenu principal (souvent une image plus grande ou un titre). Le FCP est plus rapide que le LCP. Le LCP compte davantage pour l'expérience utilisateur. Améliorez d'abord le LCP.