Largest Contentful Paint (LCP) : Tout ce qu’il faut savoir en 2024
5,00/5Les Core web vitals regroupent un ensemble d’indicateurs qui servent à mesurer la qualité de l’expérience utilisateur sur un site internet. Ils évoluent avec le temps et sont utilisés par Google pour évaluer le référencement des pages web dans ses résultats de recherche. Parmi les métriques qui les composent figure le Largest Contentful Paint ou LCP. Découvrez, ci-dessous, différentes méthodes pour l’améliorer. Si vous préférez, faire appel à une agence SEO est une option plus simple pour optimiser son LCP.
Concrètement, c’est quoi ? Comment le calculer ? Quels sont les différents outils et techniques pour l’analyser ? Comment l’optimiser ? Voici tout ce que vous devez absolument connaître sur le Largest contentful paint.
Qu’est-ce que le LCP ?
Définition
Le Largest Contentful Paint est une mesure de performance utilisée pour évaluer le temps qu’il faut pour qu’un utilisateur voie le contenu principal d’une page web. Plus précisément, il mesure le temps écoulé entre le début du chargement d’une page et le moment où le plus grand élément visible de cette page est entièrement rendu dans la fenêtre d’affichage.
Un LCP rapide est important, car il contribue à une meilleure expérience utilisateur. Ce qui peut se traduire par un meilleur classement dans la SERP et une bonne rétention des visiteurs. Cela rend également le site internet plus accessible, notamment pour les utilisateurs avec des connexions lentes ou des appareils mobiles moins puissants.
En tout cas, il s’agit d’un des indicateurs clés de performance (KPI) utilisés dans le cadre de l’initiative Web Vitals de Google, qui vise à aider les propriétaires de sites web à optimiser l’UX en fournissant des directives de performance spécifiques.
Quels sont les éléments pris en compte pour le calcul du Largest Contentful Paint ?
Le Largest Contentful Paint représente la vitesse à laquelle le plus grand élément de contenu visible apparaît dans l’espace d’affichage d’une page web. Les éléments mesurés par le LCP peuvent varier d’un site à l’autre, mais concernent généralement :
- Les images (<img> ou <image> à l’intérieur d’un élément <svg>). Ce sont souvent les plus grands éléments sur une page.
- Les vidéos (<video>). Elles s’intègrent dans les éléments de contenu pour le LCP, en particulier si elles occupent une grande partie au-dessus de la ligne de flottaison.
- Le niveau bloc contenant des text nodes ou nœuds de texte. Les grands blocs de texte, tels que les titres et les paragraphes, sont pris en compte si leur taille est significative.
- Les éléments avec une image de fond chargée via la fonction url () (par opposition à un dégradé CSS).
Quelle que soit la nature de l’élément, seule la taille qui s’affiche dans l’écran est mesurée. Si celui-ci s’étend au-delà de la fenêtre d’affichage ou est tronqué, on ne considère pas ces parties. Ainsi, le Largest Contentful Paint exclut le contenu masqué, mais aussi les images avec une faible densité de pixels.
Qu’est-ce qu’un bon ou mauvais LCP ?
Pour définir la qualité du LCP, il faut tout simplement se référer à la vitesse de chargement de la page sur un site web.
Un bon Largest Contentful Paint est généralement considéré comme étant inférieur à 2,5 secondes à 75 % du temps. Cela signifie que le temps de chargement du contenu principal de la page est relativement court. L’idéal serait toutefois d’avoir un score en dessous de 1,2 seconde pour ne pas avoir à effectuer des améliorations.
Un tel LCP favorise une meilleure satisfaction des utilisateurs et peut avoir un impact positif sur le classement dans les résultats de recherche. Et pour cause, Google privilégie les sites offrant une UX optimale.
En revanche, on parle d’un mauvais Largest Contentful Paint lorsqu’il est supérieur à 4 secondes. Cette lenteur dans le temps de chargement peut avoir diverses origines. On peut citer la lenteur du temps de réponse du serveur, le rendu côté client, l’ajout de CSS et de JavaScript, les ressources volumineuses, etc.
Quoi qu’il en soit, un LCP médiocre est susceptible d’entraîner une frustration chez les utilisateurs, d’augmenter le taux de rebond et de nuire à la perception de la crédibilité du site internet. Cela peut même avoir des répercussions négatives sur le classement dans la SERP, car les moteurs de recherche accordent de plus en plus d’importance à la performance web dans leurs algorithmes de classement.
Comment le LCP affecte vos SEO et taux de conversion ?
Lien entre LCP, classement Google et engagement des utilisateurs
Le LCP constitue un facteur de référencement important pour Google puisqu’il est directement lié à l’expérience utilisateur. En effet, depuis 2020, l’algorithme de classement de Google se focalise sur trois aspects de l’expérience utilisateur. La vitesse de chargement d’une page, mesurée en partie par le LCP, est l’un des indicateurs clés de cette expérience. Cette métrique a donc le pouvoir d’influencer le positionnement d’un site web dans les pages de résultats de recherche.
En regardant la SERP, vous verrez qu’une page avec un LCP élevé sera mal classée par rapport à une autre avec un LCP plus bas. D’ailleurs, lorsqu’elle prend trop de temps à charger, l’internaute risque de ne pas y rester suffisamment longtemps. Et un utilisateur qui quitte une page avant qu’elle ne soit complètement chargée sera toujours moins enclin à convertir, c’est-à-dire à effectuer une action souhaitée, comme acheter un produit ou s’abonner à un service.
Par conséquent, un mauvais LCP entraîne une baisse du taux de conversion ainsi qu’une augmentation du taux de rebond. Dans le cas contraire, il permet d’améliorer le taux de rétention des utilisateurs et le temps passé sur la page. Ce qui va, par la même occasion, augmenter le trafic organique vers le site web.
Importance du LCP dans l’expérience utilisateur
Le Largest Contentful Paint joue un rôle crucial dans l’expérience utilisateur d’un site web. En tant que mesure de la vitesse de chargement du contenu principal d’une page, il a un effet direct sur la perception et la satisfaction des utilisateurs.
Voici quelques raisons pour lesquelles il tient une place importante dans l’UX :
- Première impression. Le LCP représente le premier contact visuel de l’utilisateur avec le contenu principal de la page. Une réponse immédiate va alors créer une première impression positive, tandis qu’un chargement lent peut susciter de la frustration et de l’impatience.
- Engagement. Les visiteurs ont plus de chance de rester sur un site web et d’explorer son contenu lorsque les pages s’affichent rapidement. Un bon LCP favorise de ce fait un engagement plus élevé en incitant les utilisateurs à interagir davantage avec le site.
- Conversions. Les sites web avec des temps de chargement moins lents ont tendance à générer plus de conversions, que ce soit des ventes, des inscriptions ou d’autres actions souhaitées. Comme un excellent LCP fournit une UX positive, cela permettra d’optimiser le taux de conversions.
- Satisfaction globale. En fin de compte, un LCP rapide contribue à une UX globale plus agréable. Les utilisateurs apprécient les sites qui répondent rapidement à leurs besoins et offrent un accès facile au contenu recherché.
En définitive, le Largest Contentful Paint s’avère essentiel pour maintenir l’engagement, encourager la rétention des visiteurs et garantir leur satisfaction.
Études de cas : Impact du LCP sur les performances des sites
Dans une page web, le plus grand élément est susceptible de changer au moment du chargement étant donné que ce dernier se fait le plus souvent par étapes. Concrètement, après avoir dessiné le premier frame, le navigateur envoie un PerformanceEntry (en l’occurrence, une entrée largest-contentful-paint) qui détermine le plus grand élément de la page. Puis, il refait la même action quand cet élément change et ainsi de suite.
Prenons l’exemple d’une page composée d’un texte et d’une image. Au début, le navigateur peut uniquement charger le texte, avant d’envoyer une entrée largest-contentful-paint faisant référence à un <h1>. L’image apparaît ensuite dans la fenêtre d’affichage, c’est à ce moment qu’une seconde entrée largest-contentful-paint, avec la propriété element qui fait référence à une <img>, est transmise.
Afin de réduire les coûts du calcul et d’envoi des PerformanceEntry, l’élément le plus important de la page, dont la taille ou la position a été modifiée, ne donne pas lieu à de nouveaux candidats au LCP. En d’autres termes, les éléments initialement invisibles à l’écran, mais qui s’y affichent ultérieurement, ne sont pas pris en compte. Aussi, les éléments présents de base dans la fenêtre d’affichage, puis supprimés, gardent toujours leur taille originelle dans l’écran.
En pratique, voici comment cela se présente :
Exemple 1
Dans la première série d’images, nous pouvons voir que l’élément le plus grand (marqué en vert) change trois fois lors du chargement. Dans ce cas, du nouveau contenu est ajouté au DOM (Document Object Model) à chaque fois. Cela vient modifier la structure et l’affichage des éléments de la page web. Dans la deuxième série d’images, on observe une transformation de la mise en page. Le plus grand élément se retire de l’écran pour laisser place à un autre LCP candidat.
Exemple 2
Il faut tout de même savoir que l’élément le plus volumineux ne s’affiche pas toujours tardivement.
Dans la première chronologie du LCP sur Instagram, le logo constitue l’élément le plus grand et apparaît très tôt, bien que d’autres éléments s’ajoutent au fur et à mesure du chargement de la page. De même pour le deuxième exemple, où le texte est lisible avant même que les images et le logo de Google ne soient visibles.
Comment analyser le LCP (outils et techniques) ?
Outils recommandés pour mesurer le LCP
Le Largest Contentful Paint peut être calculé en utilisant des outils de terrain ou de laboratoire. En voici quelques-uns :
PageSpeed Insights
PageSpeed Insights est un outil fourni par Google qui analyse la performance d’une page web sur mobile et sur ordinateur. Il donne des recommandations pour améliorer la vitesse de chargement et affiche le LCP parmi d’autres KPI.
Pour mesurer le Largest Contentful Paint à partir de ce programme, il convient d’ouvrir Google PageSpeed Insights dans le navigateur, d’entrer l’URL de la page à tester et de cliquer sur « Analyser ». Une fois l’analyse terminée, vous verrez le score LCP de votre page.
Ci-dessous un exemple avec l’URL du site du magazine de mode ELLE.
Pour identifier l’élément utilisé par Google pour mesurer le LCP, rendez-vous dans la section Élément identifié comme « Largest Contentful Paint », dans l’onglet Diagnostics.
Chrome DevTools
Cet outil de développement intégré à Google Chrome propose une section Performance qui permet d’enregistrer et d’analyser les performances d’une page web. Il donne accès à des métriques détaillées, dont le LCP, pour évaluer les performances de chargement.
Pour l’utiliser, suivez les étapes ci-après :
- Ouvrir le navigateur Chrome et accéder à la page à tester
- Ouvir les Chrome DevTools (F12 ou clic droit > « Inspecter » > onglet « Performance »)
- Cliquer sur l’onglet Performance, puis sur Recharger.
À l’issue de l’analyse, vous pouvez voir le score LCP de la page web en sélectionnant la section Réseau.
WebPage Test
Il s’agit d’un service en ligne, à la fois gratuit et complet, dédié aux tests de performances d’un site web depuis différentes localisations et sur différents navigateurs. Il révèle des données détaillées sur le temps de chargement, le LCP et d’autres métriques des Core web vitals. L’utilisateur a même la possibilité de bénéficier de conseils pour améliorer les performances de sa page.
Pour déterminer le Largest Contentful Paint d’une page sur WebPage Test, il faut :
- Se rendre sur webpagetest.org
- Entrer l’URL de la page à tester
- Sélectionner la localisation et le navigateur
- Cliquer sur Démarrer le test
- Accéder à l’onglet Résumé pour voir le résultat.
Si vous souhaitez afficher une analyse plus approfondie du LCP, cliquez sur l’onglet Détails.
GTmetrix
Cet outil utilise un navigateur web réel pour charger la page du site internet. Il calcule le LCP en mesurant le temps réel nécessaire pour afficher le plus grand élément de contenu visible. GTmetrix propose également des analyses du référencement et offre des rapports complets et personnalisables.
Pour exploiter ce logiciel, vous devez accéder à gtmetrix.com, saisir l’URL du site web et cliquer sur Analyser. L’état du LCP apparaîtra alors dans l’onglet Performances.
Rapport d’expérience utilisateur Chrome
Le rapport d’expérience utilisateur Chrome (CrUX) est une source de données précieuse pour mesurer le Largest Contentful Paint d’un site. Il regroupe des données réelles collectées auprès d’utilisateurs Chrome qui visitent un site en particulier.
Voici les étapes à suivre :
- Accéder à la Search Console Google
- Sélectionner le site web à tester
- Cliquer sur Expérience utilisateur
- Cliquer sur Core Web Vitals
- Consulter le rapport Largest Contentful Paint.
Le rapport LCP génère un certain nombre d’informations telles que la distribution des scores LCP pour différentes pages du site, la comparaison du score LCP avec celui d’autres sites ou encore des suggestions d’amélioration.
Interprétation des résultats de LCP
Ce genre d’interprétation implique de comprendre ce que les résultats signifient en termes d’UX et de performance du site internet. Certains points sont alors à considérer, comme le temps de chargement et la qualité de l’UX.
Comme évoqué plus haut dans cet article, le temps indiqué par le LCP représente la durée écoulée depuis le début du chargement de la page jusqu’à ce que le plus grand élément de contenu visible soit entièrement rendu à l’écran. Plus ce temps est court, meilleure est l’expérience pour l’utilisateur. Cela signifie aussi que les utilisateurs voient d’emblée le contenu principal de la page. Ce qui réduit le risque de frustration et encourage l’engagement sur le site.
Pour rappel, le Largest Contentful Paint est classé en 3 catégories :
- Bon (<= 2,5 secondes) : chargement rapide
- Moyen (2,5 à 4 secondes) : chargement un peu lent, mais toujours acceptable
- Mauvais (>= 4 secondes) : chargement très lent.
Afin d’identifier les performances les plus lentes et les opportunités d’amélioration, n’hésitez pas à comparer le LCP des différentes pages de votre site internet. Vous pouvez même le comparer à celui des concurrents pour voir comment vous vous situez.
Dans tous les cas, il paraît judicieux d’analyser le Largest Contentful Paint en conjonction avec d’autres métriques des Core web vitals, à savoir le First Contentful Paint (FCP) et le Cumulative Layout Shift (CLS). Ensemble, ces KPI projettent une image plus complète de la rapidité de chargement et de la stabilité visuelle de votre site web.
Comment améliorer le LCP ?
Étapes détaillées pour l’optimisation du LCP
Les causes d’un mauvais LCP sont innombrables, les plus courantes étant la lenteur du chargement des ressources, le rendu côté client et les ressources bloquant le rendu. Néanmoins, il existe plusieurs méthodes pour pallier ces problèmes et améliorer le Largest Contentful Paint (LCP) d’une page.
Optimiser les images
Les images peuvent ralentir considérablement le chargement d’une page. De fait, les fichiers d’images volumineux nécessitent plus de temps pour être téléchargés et affichés à l’écran, voilà pourquoi le rendu du contenu principal de la page est retardé.
La solution idéale serait donc de réduire la taille des images sans sacrifier la qualité visuelle en utilisant des outils de compression comme JPEGmini, TinyPNG ou Imagify. Vous pouvez également adopter des formats d’image plus récents comme WebP qui offrent une meilleure compression que les formats traditionnels comme JPEG et PNG. Ce type de format peut réduire la taille des images de 25 à 35 % sans perte de qualité visible.
En outre, pensez à indiquer les dimensions des images dans le code HTML à l’aide des attributs « width » et « height » pour éviter le retraitement de la mise en page lors de leur chargement. Cela va permettre au navigateur de réserver l’espace nécessaire pour les contenus visuels avant leur chargement.
Minimiser les codes JavaScript et CSS
Les scripts JavaScript volumineux peuvent requérir un temps de traitement supplémentaire, de telle manière qu’ils retardent le chargement des éléments de la page. Il en va de même pour les règles CSS complexes ou coûteuses en calcul. À cet effet, il semble utile de supprimer toutes fonctionnalités non utilisées en se servant de bibliothèques légères et en minifiant le code pour réduire sa taille de téléchargement.
Les pratiques de codage inefficaces qui pourraient ralentir l’exécution du code JavaScript sont à éviter, comme les boucles longues ou les opérations de traitement intensives sur le thread principal. Les styles qui risqueraient de ralentir le chargement initial de la page sont aussi à bannir pour avoir un bon rendu CSS.
Plus particulièrement, limitez l’utilisation de propriétés CSS qui affectent le layout de la page, telles que « position : absolute » ou « float », car elles peuvent conduire à un recalcul de la mise en page et entraver le rendu du contenu principal. Priorisez les styles essentiels et déplacez ceux non critiques vers des fichiers externes ou utilisez des techniques comme le Critical CSS pour charger d’abord les styles indispensables au rendu initial de la page.
Dans certains cas, la combinaison de plusieurs fichiers JavaScript et CSS en un seul fichier entraîne une réduction du nombre de requêtes HTTP nécessaires au chargement de la page.
Utiliser un CDN (Content Delivery Network)
Un CDN est un réseau de serveurs distribués à travers le monde qui stocke et diffuse des copies de contenus web. Son utilisation contribue à optimiser le Largest Contentful Paint grâce à une livraison efficace des ressources statiques (images, fichiers CSS et scripts JavaScript) à partir de serveurs situés plus près des utilisateurs. C’est cette réduction de distance qui va effectivement minimiser le temps de latence et parfaire le temps de chargement d’un site internet.
Par ailleurs, les CDN sont souvent dotés de fonctionnalités avancées pour accélérer le chargement des pages, entre autres la mise en cache des ressources et la compression des fichiers. L’autre avantage de ces CDN, c’est qu’ils peuvent toujours rendre un site disponible malgré une panne de serveur. De plus, ils ont la capacité de rediriger une partie du trafic de votre site vers ses serveurs. Ce qui peut réduire la charge sur le serveur principal et améliorer ses performances.
Mettre en cache les ressources
Le chargement des ressources comme les images et les fichiers CSS à chaque visite d’un utilisateur peut déboucher sur un LCP plus long. En utilisant le cache du navigateur, vous conservez des copies locales de vos données en vue de les charger plus rapidement lors des prochaines visites.
Pour ce faire, nous vous recommandons de configurer les directives de mise en cache. Les en-têtes de cache indiquent au navigateur combien de temps il peut stocker une copie de votre contenu en cache. Vous pouvez les définir pour différentes ressources statiques.
À noter que l’activation de la mise en cache du navigateur se fait manuellement ou à l’aide de plug-ins pour WordPress (WP Rocket, Cache Enabler, W3 Total Cache, WP Fastest Cache, etc.).
Parmi les outils les plus utilisés pour la mise en cache, on peut citer :
- Varnish Cache : serveur de mise en cache HTTP open source très performant. Il peut être paramétré en tant que proxy avant vos serveurs web pour mettre en cache le contenu.
- Redis : base de données clé-valeur en mémoire utilisable pour la mise en cache des données. Il est souvent utilisé conjointement avec d’autres serveurs pour accélérer la distribution du contenu.
- Nginx : serveur web modifiable pour la mise en cache du contenu statique et dynamique à l’aide de directives de configuration telles que proxy_cache et fastcgi_cache.
Choisir une police web performante
L’intégration de plusieurs variantes de polices ou de polices personnalisées peut gêner la vitesse de rendu du contenu principal de la page. Ce qui va plus ou moins affecter le Largest Contentful Paint, d’où l’importance de les optimiser.
Le moyen le plus simple consiste à héberger les polices web localement ou à utiliser un service de webfont comme Google Fonts pour les charger de manière asynchrone. En parallèle, limitez le nombre de polices que vous utilisez sur votre page. Et surtout, n’incluez pas de polices personnalisées pour les petits éléments de texte qui pourraient être rendus plus efficacement avec des polices système génériques.
D’autre part, pensez à utiliser le CSS font-display pour charger les polices web en différé. De cette façon, elles ne seront chargées que lorsqu’elles seront nécessaires. Avec ces quelques conseils sur le choix de la police, vous avez la possibilité d’améliorer le score LCP de votre site.
Opter pour un fournisseur d’hébergement fiable
Un bon fournisseur d’hébergement web garantit des performances de serveur optimales, avec des temps de réponse rapides et une disponibilité élevée. En effet, ce type de prestataire investit dans une infrastructure robuste et évolutive, avec des serveurs bien configurés, des réseaux performants et des systèmes de stockage efficaces. Cette infrastructure solide l’aide à minimiser les temps d’arrêt et les ralentissements, impactant directement le LCP.
Il faut aussi savoir qu’un fournisseur d’hébergement intègre des stratégies d’optimisation de ressources, comme la mise en cache intelligente, la compression de fichiers et l’utilisation de CDN. Ces techniques, comme nous l’avons vu, favorisent l’accélération du chargement des ressources statiques. De quoi réduire efficacement le Largest Contentful Paint.
Pour couronner le tout, un hébergeur fiable dispose d’un support technique réactif et compétent. En cas de problèmes de performance du serveur, d’erreurs de configuration ou d’autres problèmes pouvant affecter le LCP, une équipe qualifiée saura apporter les solutions adéquates dans les plus brefs délais.
Afin de trouver le service d’hébergement qui vous convient le mieux, voici quelques bonnes pratiques :
- Rechercher des avis clients. Les avis clients donnent un aperçu de ce que les autres utilisateurs pensent de la performance et de la crédibilité de l’hébergeur.
- Comparer les fonctionnalités. Les fonctionnalités proposées par les hébergeurs ne se valent pas toutes. Celles-ci doivent pouvoir répondre à vos besoins et bonifier le LCP de votre page.
- Choisir un hébergeur avec des serveurs dans plusieurs endroits. Cela réduit la distance entre vos utilisateurs et vos serveurs.
- Tenir compte du budget. Les prix des hébergeurs web varient en fonction des fonctionnalités et des performances offertes.
Conseils pour maintenir un bon LCP lors des mises à jour du site
Durant les mises à jour du site, il est impératif de conserver un bon LCP pour assurer une UX de qualité et retenir les visiteurs. Il est aussi question de maintenir le positionnement dans les résultats de recherche, une stratégie incontournable pour la visibilité et le trafic organique du site.
Pour ce faire, nous vous suggérons de :
- Effectuer des tests de performance. Avant de déployer des mises à jour sur votre site, réalisez des tests pour évaluer l’impact potentiel sur le Largest Contentful Paint. Utilisez des outils comme PageSpeed Insights ou WebPageTest pour mesurer les KPIs et identifier tout changement significatif dans le LCP.
- Surveiller les changements de LCP après les mises à jour. Après avoir effectué des mises à jour sur votre site, suivez régulièrement les indicateurs de performance pour détecter tout changement. Vous pouvez utiliser des outils ou des services de suivi des performances pour rester informé des variations du LCP.
- Procéder à des tests de charge. Si vos mises à jour impliquent des changements majeurs dans l’architecture du site ou l’ajout de nouvelles fonctionnalités, passez des tests de charge en vue d’évaluer les performances du site sous différentes charges de trafic. Veillez à ce que le Largest Contentful Paint reste stable même lorsque le site est fortement sollicité.
- Corriger les problèmes de performance. Si vous observez une détérioration du LCP après une mise à jour, identifiez et corrigez les problèmes rapidement. Cela peut inclure l’optimisation des images, la réduction du poids des ressources, la révision du code, etc.
Enfin, n’oubliez pas que la performance web est un processus continu. Votre engagement à surveiller régulièrement les métriques correspondantes et à apporter des améliorations constantes sera de mise pour maintenir un bon Largest Contentful Paint au fil du temps.
Conclusion : L’importance d’un LCP optimal pour le succès en ligne
En conclusion, un bon Largest Contentful Paint, pendant ou en dehors des mises à jour du site, se révèle essentiel pour fournir une expérience utilisateur mémorable et renforcer l’image de marque. Les tests de performance, la surveillance des KPIs et l’engagement dans une amélioration continue sont autant de pratiques que vous pouvez mettre en œuvre pour un LCP optimisé.
Quant à son avenir et celui des tendances du web performance, on peut s’attendre à une accentuation de l’importance accordée aux algorithmes de recherche de plus en plus orientés vers les métriques de vitesse de chargement. Toute entreprise devra donc continuer à investir dans l’optimisation de leurs sites web pour rester compétitive et répondre aux attentes croissantes des utilisateurs en matière de rapidité et de fluidité d’expérience.
