Si tu as un site WordPress, tu ne peux pas faire l'impasse sur les Core Web Vitals de Google. L'une des trois métriques en particulier vaut la peine d'être examinée de plus près : Le Largest Contentful Paint joue un rôle important non seulement pour le temps de chargement, mais aussi pour ton classement Google. Si tu veux savoir ce qui se cache derrière cet indicateur et comment tu peux améliorer ton Largest Contentful Paint , tu es au bon endroit. Dans cet article, nous clarifions toutes les questions importantes et dévoilons les mesures que les propriétaires de sites Web peuvent prendre pour obtenir de bons résultats.

Qu'est-ce que le Largest Contentful Paint ? 

Lorsqu'un site web est consulté, il ne faut généralement que quelques secondes pour qu'il se construise complètement dans le navigateur. Pendant ce temps, de nombreux processus ont lieu, invisibles pour les visiteurs. Le Largest Contentful Paint (LCP) se réfère à l'un des derniers événements avant que le site web ne soit complètement chargé : il décrit le temps nécessaire pour que le plus gros élément de la page soit complètement chargé et visible. Il s'agit généralement d'un bloc de texte, d'une image ou d'une vidéo.

Ainsi, le Largest Contentful Paint est l'une des métriques les plus importantes pour le temps de chargement des sites web. Il fait également partie, avec le First Input Delay (FID) et le Cumulative Layout Shift (CLS), des Core Web VitalsGoogle utilise ces critères pour évaluer l'expérience des utilisateurs.

Peinture au plus grand contenu vs. Peinture au premier contenu

Un terme qui revient souvent dans le contexte du temps de chargement et de la performance des sites web et qui peut facilement être confondu est le First Contentful Paint (FCP). C'est pourquoi nous différencions encore une fois explicitement les deux métriques pour une meilleure compréhension :

• Le Largest Contentful Paint mesure le temps qu'il faut pour que l'élément le plus grand, c'est-à-dire le contenu principal d'une page, soit complètement chargé.
• Le First Contentful Paint fait référence au temps qui s'écoule avant que le premier élément ne s'affiche sur la page, quel que soit le contenu.

Ton LCP sera presque toujours un peu plus élevé que ton FCP, car le contenu principal n'est généralement pas le premier élément à être chargé.

Pourquoi le Largest Contentful Paint est-il important ?

Tu te demandes probablement pourquoi tu devrais t'intéresser de plus près à Largest Contentful Paint ? Nous avons deux bonnes raisons pour toi. Les deux contribuent à augmenter la visibilité de ton site web (et de ton entreprise) et à augmenter ton taux de conversion.

1. une expérience utilisateur améliorée

Le Largest Contentful Paint est un indicateur important de la manière dont les autres vivent ton site web. En général, tes visiteurs ne se soucient pas de savoir combien de temps il faut pour que chaque script et élément de la page soit complètement chargé. Cependant, ils sont intéressés par le temps qui s'écoule avant qu'ils ne puissent utiliser le site de manière efficace et voir les contenus les plus importants.

Si tu optimises ton site Web de manière à ce que ton LCP soit le meilleur possible (nous y reviendrons plus tard), tu offriras à tes visiteurs une expérience utilisateur solide. Si tu les laisses attendre cinq secondes ou plus avant d'accéder au contenu principal de ton site, ils sauteront et iront voir ailleurs. Ils sont donc loin de télécharger du contenu, de s'abonner, de s'abonner à tes chaînes, de te contacter ou d'acheter tes produits.

2. classement optimisé sur Google

Le contenu est et reste le facteur de classement le plus important pour Google. Mais si deux sites obtiennent des résultats équivalents en termes de contenu, celui qui a les meilleurs Core Web Vitals remonte dans le classement. Cela s'explique par le fait que les métriques sont considérées par Google comme des facteurs de classement officiels. C'est le LCP qui influence le plus le score : Dans le classement de performance de Google Lighthouse, la valeur représente environ 25%.

Des Core Web Vitals solides - et surtout un LCP solide - peuvent donc t'aider à obtenir un meilleur classement dans les moteurs de recherche.

Voici comment mesurer le Largest Contentful Paint

Tu peux mesurer ton LCP de différentes manières. Les outils de Google sont un bon point de départ : la Google Search Console, Google PageSpeed Insights et Lighthouse. En outre, WebPageTest offre de bonnes possibilités d'analyse avancées.

Google Search Console

Avec la Google Search Console, tu obtiens un aperçu de la performance de ton site web complet. Tu trouveras des informations sur les Core Web Vitals dans la barre de navigation de gauche. En ouvrant l'onglet, tu obtiendras un aperçu graphique de tes URLs et tu pourras voir assez rapidement quelles URLs sont problématiques. Tu peux alors les examiner de plus près à l'étape suivante.

Si tu n'as pas mis en place la Google Search Console pour ton site, tu peux aussi obtenir toutes les informations via Lighthouse ou PageSpeed Insights.

Google PageSpeed Insights

Google PageSpeed Insights te fournit, en plus des valeurs LCP pures, des conseils directement utiles et des indications sur la manière d'améliorer le Largest Contentful Paint. De plus, Google t'indique quel élément a été utilisé concrètement pour le test. Tu vois donc tout de suite où tu peux te concentrer sur l'optimisation.

Tu peux utiliser cet outil en trois étapes simples :

1. Appelle PageSpeed Insights Appeler
2. Saisis l'URL de la page que tu veux vérifier.
3. Démarre le test en cliquant sur Analyser.

Ensuite, Google te montre tous les Core Web Vitals en un coup d'œil, à chaque fois pour le bureau et pour les appareils mobiles. Tu devrais absolument jeter un coup d'œil aux deux variantes.

Pour trouver concrètement le Largest Contentful Paint Element, fais défiler la page de résultats vers le bas jusqu'à la section Diagnostics. Dans la section Largest Contentful Paint element, tu trouveras l'élément le plus grand dans le viewport.

Attention : l'élément peut être différent pour les appareils mobiles et les ordinateurs de bureau. Tu dois donc toujours vérifier les deux.

Lighthouse

Avec Lighthouse, tu testes et analyses le LCP dans ton propre navigateur. L'outil est déjà intégré dans les outils de développement de Google Chrome.

Voici comment tu dois procéder dans ton navigateur :

1. Ouvre l'URL que tu veux vérifier (de préférence dans une fenêtre incognito).
2. Ouvre les outils de développement Chrome (DevTools). Le moyen le plus rapide est de faire un clic droit n'importe où sur la page et de cliquer à nouveau sur Explorer dans le menu qui s'ouvre alors.
3. Ensuite, dans les outils de développement, va dans l'onglet Lighthouse.
4. Choisis si le LCP doit être testé pour le bureau ou pour la vue mobile. Sous Categories, il suffit de cocher Performance.
5. Commence l'analyse en cliquant sur Générer un rapport.

Le test dure entre 15 et 20 secondes selon le site. Ensuite, tu peux voir toutes les valeurs, les évaluer et les comparer par exemple avec les résultats de la Search Console (si tu l'as configurée).

WebPageTest

WebPageTest est particulièrement adapté si tu souhaites configurer le test de manière individuelle et aller plus loin dans l'analyse des performances. Ici, tu peux aussi définir des métriques comme le lieu du test, la vitesse de connexion ou l'appareil lui-même dans les options avancées.

Les résultats sont également un peu plus complets avec WebPageTest : l'outil te montre exactement comment ton site web se charge, quels éléments sont chargés et à quelle vitesse le tout se déroule. Le rapport contient donc, en plus des valeurs LCP, de nombreuses autres métriques - y compris le diagramme en cascade. Tu peux voir ce que c'est exactement et comment l'évaluer correctement dans notre article Optimiser WordPress : Comment analyser ton site web en 7 secondes.

Qu'est-ce qu'un bon score LCP ?

Google indique assez précisément comment le LCP est évalué :

• Un Largest Contentful Paint de moins de 2,5 secondes est considéré comme bon et souhaitable.
• Des valeurs comprises entre 2,5 et 4 secondes sont certes encore satisfaisantes, mais peuvent être optimisées.
• Si la valeur LCP est supérieure à 4 secondes, elle est considérée comme mauvaise et doit absolument être améliorée.

D'où vient un LCP faible ? 

Le Largest Contentful Paint de chaque site web peut être décomposé en quatre sous-éléments qui, ensemble, constituent le temps complet de LCP :

• Time to First Byte (TTFB) : c'est le temps qui s'écoule entre la demande de l'utilisateur et la première réponse du serveur, c'est-à-dire le premier octet de données chargé. Idéalement, le TTFB devrait représenter environ 40% du temps du LCP.
• Resource Load Delay: Hiermit ist die Verzögerung beim Laden der Ressourcen gemeint – also die Zeitspanne zwischen dem ersten Byte und dem Moment, in dem der Browser beginnt, das LCP-Element zu laden. Diese sollte so klein wie möglich (< 10 Prozent der vollen LCP-Zeit) sein.
• Resource Load Time : cette valeur décrit le temps nécessaire pour charger l'élément LCP lui-même. Comme il s'agit ici, comme pour le TTFB, d'une demande de réseau, ce processus peut également prendre environ 40% du temps total du LCP.
• Element Render Delay: Damit wird ausgedrückt, wie viel Zeit zwischen dem Ende des Ladevorgangs und dem vollständigen Rendern des LCP-Elements noch vergeht. Auch diese Verzögerung sollte so klein wie möglich (< 10 Prozent der vollen LCP-Zeit) sein.

Chacun de ces éléments est influencé par d'autres facteurs - la liste des causes possibles d'un LCP faible est donc pratiquement infinie. Mais la plupart du temps, il y a une (ou plusieurs) des quatre raisons suivantes :

• Ton serveur répond trop lentement (TTFB).
• JavaScript et CSS bloquent le chargement des pages (Resource Load Delay).
• Tu as beaucoup de grandes ressources ou de contenus visuellement exigeants sur ton site, qui prennent beaucoup de temps à charger (Resource Load Time).
• Le rendu côté client fait en sorte qu'il faut plus de temps pour que l'élément LCP s'affiche complètement (Element Render Delay).

Voici comment améliorer le Largest Contentful Paint

Tu sais maintenant de quoi se compose le Largest Contentful Paint et à quoi cela peut être dû si la valeur est mauvaise. Voyons maintenant ce que tu peux faire si tu veux améliorer le Largest Contentful Paint de ton site WordPress. Voici les principaux conseils et mesures à prendre :

Miser sur un hébergement rapide de WordPress

La base d'un bon LCP est un temps de chargement court, plus précisément un TTFB court. Un hébergement performant peut faire la différence. Vérifie donc si ton hébergement actuel ne te ralentit pas inutilement. Si c'est le cas, tu devrais envisager de passer à un hébergement géré spécialisé pour WordPress, adapté à tes besoins.

Si tu héberges ton site web sur Raidboxes , tu bénéficieras d'une infrastructure entièrement adaptée à WordPress, ce qui en vaut la peine : Après avoir déménagé sur nos serveurs, les sites WordPress se chargent généralement jusqu'à quatre fois plus vite - et ce, sans aucune optimisation supplémentaire.

Activer la mise en cache

Si tu veux que ton site WordPress ait un bon LCP et se charge rapidement, il n'y a pratiquement pas d'autre solution que d'avoir une bonne mise en cache WordPress. Il améliore le temps de réponse du serveur en stockant temporairement les fichiers fréquemment utilisés et en les récupérant plus rapidement la fois suivante. Pour cela, tu peux soit utiliser un plugin, soit choisir un hébergement avec une mise en cache côté serveur, comme le propose par exemple Raidboxes .

Éliminer le JavaScript et le CSS qui bloquent le rendu

Chaque site web se compose d'éléments HTML, de JavaScript et de CSS. Ce dernier règle l'affichage du site web, JavaScript est responsable des éléments dynamiques (par exemple les animations ou les formulaires). Si JavaScript et/ou CSS sont chargés avant l'élément LCP alors qu'ils ne sont pas encore nécessaires, ils compliquent et ralentissent le rendu.

Tu dois donc supprimer le JavaScript et le CSS inutiles et garder les fichiers aussi compacts que possible. Tu peux également déplacer les deux vers le bas de la page ou retarder les scripts pour qu'ils ne bloquent pas le contenu principal. Le plus simple est d'utiliser des plugins comme Autoptimize ou WP Rocket.

Pour en savoir plus sur le JavaScript et le CSS, consulte notre article sur la réduction du CSS, du HTML et du JavaScript.

Optimiser les images

Plus les images de ton site sont grandes, plus il est probable que le LCP soit mauvais. C'est pourquoi tu dois toujours compresser tes images le mieux possible. Veille toutefois à ce que la perte de qualité ne soit pas trop importante. Si tu peux déterminer quel est ton élément LCP et qu'il s'agit d'une image, tu peux réduire sa taille de manière ciblée. Ainsi, le navigateur aura besoin de moins de temps pour la télécharger et ta valeur LCP sera réduite.

Pour savoir quelle est la taille parfaite et dans quel format il est préférable de télécharger les images, consulte l'article Tailles des images WordPress : Comment les images fonctionnent dans WordPress & les meilleures pratiques pour ton site web. En outre, tu trouveras également dans notre magazine un aperçu de 6 plugins populaires pour la compression d'images.

Donner la priorité au plus gros élément

L'élément le plus grand d'une page doit être facile à trouver et se charger le plus tôt possible. Par défaut, ce n'est généralement pas le cas pour les images, par exemple. L'attribut fetchpriority te permet toutefois d'indiquer au navigateur que certains éléments doivent être récupérés avec une priorité plus élevée.

Cela pourrait ressembler à ça :

<img fetchpriority=“high“ src=“/path/to/hero-image.webp“>

(Remarque : insère cette commande dans WordPress en tant que bloc "Code" et sélectionne HTML dans les options de bloc sous "Longue vue"), elle sera alors formatée de manière appropriée.

Mais attention : tu ne dois pas donner la priorité à plus d'une ou deux images en avant, sinon le signal perd de son efficacité. Inversement, tu peux aussi réduire la priorité des images. Cela peut être utile pour les images des carousel sliders qui se trouvent au début de la page, mais qui ne sont pas directement visibles au démarrage. En leur accordant une priorité plus basse, tu libères de la bande passante pour les ressources essentielles.

Conclusion : améliorer le temps de réponse et optimiser le code

En fin de compte, le Largest Contentful Paint peut être un facteur décisif lorsqu'il s'agit de ton classement Google et de l'expérience utilisateur. Il vaut donc la peine de s'intéresser de plus près à cet indicateur et de le comprendre.

Plus tu t'intéresses au Largest Contentful Paint, plus il devient évident qu'il existe un nombre presque infini de petites et grandes vis de réglage sur lesquelles tu peux agir pour optimiser le LCP. Certains sont plus faciles à trouver, d'autres nécessitent des connaissances techniques plus approfondies. Cet article ne donne donc qu'un premier aperçu et tu peux te concentrer sur deux choses pour commencer :

1. Accélère le temps de réponse de ton serveur.
2. Optimise le code de ton site pour que l'élément LCP s'affiche le plus rapidement possible.

Le facteur le plus important pour le temps de réponse est ton hébergement. Avec un hébergement WordPress performant, comme celui que nous proposons sur Raidboxes , tu n'as plus à te soucier des longs délais d'attente avant la réponse du serveur. Cela vaut donc la peine de changer.