Nous l’avons déjà dit et nous devons en fait le répéter : Le monde du développement et de la conception web évolue si rapidement qu’une nouvelle terminologie est souvent nécessaire pour définir de nouvelles métriques, technologies, techniques et méthodes.
Une telle terminologie est le LCP ou Largest Contentful Paint, l’une des métriques les plus récentes dans le monde de l’expérience utilisateur. En bref, il s’agit d’une des métriques responsables de la mesure du temps de rendu du contenu sur une page web donnée.
Jusque-là, cela semble plutôt obtus, non ? Comment peut-on l’optimiser, en même temps que le SEO ? Pourquoi est-il important pour votre site web et/ou votre entreprise ? Voyons voir.
LCP : La définition
Pour commencer, nous devons expliquer plus précisément ce qu’est réellement le Largest Contentful Paint ou LCP. Pour être tout de suite très technique, Holy Google définit le LCP tout simplement comme « le temps de rendu du plus grand élément de contenu visible dans le viewport ». Pour des raisons de clarté, nous considérons désormais ce plus grand élément de contenu comme une image, plus précisément comme un fichier JPEG ou PNG. Dans la plupart des cas, « le plus grand » dans la définition de Google fait référence à une image qui se trouve au-dessus du pli et qui est l’une des premières, si ce n’est la première image, que les visiteurs voient lorsqu’ils chargent une page web. Si vous voulez améliorer le LCP, l’optimisation de l’image est à peu près un must.
Toutefois, pour vous donner une meilleure idée de toute la folie du LCP, vous voudrez peut-être le comparer à d’autres métriques, comme le FCP (First Contentful Paint FCP) et le Visually Complete.
Alors, laissons une chance aux définitions, n’est-ce pas ?
-FCP ou First Contentful Paint est le délai entre le début du chargement de la page et le moment où n’importe quelle partie du contenu de la page est rendue à l’écran.
-LCP ou Largest Contentful Paint est le temps écoulé entre le début du chargement et le moment où le plus grand élément d’image ou le plus grand bloc de texte est rendu et est entièrement visible et compréhensible sur la page.
-Visually Complete est le temps nécessaire pour que la page entière soit entièrement visible et perceptible pour le client qui l’a ouverte.
Si vous ne lisez que les points ci-dessus, vous devriez vous douter que toutes ces métriques peuvent être assez décisives lorsqu’il s’agit d’évaluer l’expérience utilisateur. Elles peuvent avoir leurs propres avantages et inconvénients, mais la plupart des experts de l’arène numérique considèrent le LCP comme un « heureux milieu » qui marque le moment où il peut avoir un impact significatif sur l’expérience utilisateur dans son ensemble.
En dehors de cela, Google recommande que le LCP se produise dans les 2,5 après le premier chargement afin de garantir une expérience utilisateur solide. Il ne s’agit là que d’une valeur indicative optimale, mais les experts s’accordent également à dire que tout ce qui prend plus de 4 secondes entraîne de mauvaises valeurs de LCP.
Le LCP et son influence sur les Lighthouse Scores et le SEO
Ces derniers temps, le LCP est devenu l’un des nombreux Core Web Vital Scores que Google mesure dans son algorithme de classement. Chacune de ces métriques vitales représente une facette UX spécifique lorsqu’elle est mesurée sur le terrain (ou dans des circonstances réelles, lorsqu’un utilisateur clique effectivement sur une adresse web). En tant que telles, elles reflètent les expériences réelles dans un monde numérique qui dérive vers des solutions centrées sur l’utilisateur à chaque nouvelle tendance.
Pour mettre LCP en perspective : Dans Google Lighthouse, le LCP représente environ 25 % du score de performance global (Lighthouse version 6.0), ce qui fait du LCP la métrique la plus importante parmi les vitrines web principales lorsqu’il s’agit de déterminer le score de performance global d’UX.
D’autre part, Google a également déclaré que le contenu resterait le facteur le plus important de l’optimisation des moteurs de recherche lorsqu’il s’agit du classement. Toutefois, de solides Core Web Vitals peuvent aider les exploitants de sites web à obtenir un meilleur classement dans un champ encombré. En d’autres termes, si vous faites partie des propriétaires de sites web qui sont en concurrence pour la première place dans les résultats de recherche, vous devriez accorder plus d’attention à Largest Contentful Paint, car ce sera un facteur assez critique pour un bon classement.
Améliorer Largest Contentful Paint
Maintenant que vous savez ce qu’est LCP et à quel point il est important, il est temps de vous pencher sur les moyens de l’améliorer. Pour commencer, il existe quelques suggestions fournies par Google, mais la méthode la plus efficace consiste à optimiser le contenu pour l’appareil qui le demande.
Restons sur le même exemple d’image : vous avez une image JPEG de 800kb destinée à être affichée sur des ordinateurs de bureau à haute résolution. Pour obtenir le même effet sur un smartphone, vous devriez optimiser (c’est-à-dire réduire) la même image à moins de 100 ko sans en altérer la qualité. Cette étape vous permet d’améliorer LCP de plus de 60 %, ce qui représente plusieurs secondes avec une seule optimisation.
Effectuer des tests de vitesse d’image
Il existe plusieurs outils qui peuvent vous aider à voir à quelle vitesse vos images se chargent sur votre site et où vous pouvez mettre en œuvre des possibilités d’amélioration LCP.
Les meilleurs outils peuvent vous montrer des métriques aussi importantes que)
- Indice de vitesse
- Réduction du chargement des images
- Temps de chargement visuel complet de la page
- Plus grande image riche en contenu
Les outils les plus sophistiqués peuvent même proposer une vidéo montrant la vitesse de chargement de votre page avec et sans optimisations. Ils pourraient également analyser chaque page de votre site et fournir une estimation des économies de charge utile. Dans certains cas, vous pouvez atteindre un étonnant 94 % de charge utile réduite, ce qui, du point de vue de LCP, représente une énorme amélioration.
Services CDN et LCP
Les réseaux de diffusion de contenu pour les images peuvent également vous aider en simplifiant l’optimisation des images. Pour chaque image présente sur votre site, le service CDN que vous choisissez est hautement probable :
- Identifiez l’appareil qui demande votre page web.
- Optimisez l’image pour l’appareil.
- Livrez la page via un serveur CDN de périphérie qui est physiquement (plus précisément géographiquement) le plus proche de l’utilisateur.
Préconnexion
Les CDN d’images sont donc un bon moyen d’améliorer le LCP. Une autre chose que vous pouvez essayer est d’utiliser les indications de ressources pour mettre en place une préconnexion pour votre contenu, ce qui peut également aider à rationaliser l’ensemble du processus de téléchargement.
Par exemple, l’instruction de lien suivante peut aider à accélérer le processus en faisant en sorte que le navigateur se connecte plus rapidement au CDN tiers préféré, ce qui permet de commencer le téléchargement plus tôt.
(<link rel=?preconnect ? href=?https://example.com ?)
(<link rel=?preconnect ? href=?https://cdn.example.com ?)
Il est vrai que les services CDN rendent tout plus rapide, mais l’établissement d’une préconnexion permet de gagner du temps pendant la phase de connexion.
Minimiser les CSS et JavaScript bloquants
Si ces deux éléments sont « bloqués », cela signifie que votre navigateur doit analyser puis exécuter JS et CSS pour créer le niveau final de votre page dans le viewport.
Il est probable que votre site s’appuie fortement sur CSS et JavaScript (comme la plupart des sites web aujourd’hui). Cela signifie qu’il est quasiment impossible d’éviter toutes les ressources de blocage du rendu. En général, les propriétaires de sites web devraient toutefois faire attention au JS ou au SCC référencé dans l’élément . Pour éviter les problèmes, assurez-vous que seules les ressources nécessaires sont chargées dans le , tandis que vous différez le reste ou le laissez se charger de manière asynchrone.
En outre, il existe d’autres possibilités d’améliorer LCP grâce à CSS et JS, et cela vaut la peine de les examiner d’un peu plus près.
CSS critique en ligne
C’est un peu plus sophistiqué, mais vous pouvez le contourner en demandant au navigateur d’obtenir le CSS nécessaire pour le rendu de la partie « above the fold », ce qui peut améliorer votre LCP. Pour cette partie, vous devez également veiller à ce que le contenu ne se déplace pas et à ce que le contenu n’apparaisse pas sans style.
Les CSS critiques ou les styles nécessaires au navigateur pour construire la structure globale et les styles principaux de la partie de la page affichée ?above the fold ? doivent être inline. Inlined » peut également faire référence aux images d’arrière-plan, qui devraient également être fournies par votre CDN d’images.
Éviter le lazy load JS
Étant donné que de nombreux navigateurs modernes prennent en charge le lazy loading de manière native, l’utilisation de JS pour le lazy load pourrait être contre-productive.
Comme les images représentent dans la plupart des cas une grande partie de la performance globale du LCP, il est peut-être préférable de laisser le navigateur s’occuper du chargement sans risquer de le surcharger de JavaScript. Pourquoi ?
Le lazy loading piloté par JS entraîne une latence supplémentaire lorsque le navigateur doit d’abord charger et analyser JS, puis attendre son exécution et enfin commencer à rendre les images, interrompant ainsi le pré-parservateur du navigateur.
D’autre part, si vous utilisez déjà un service CDN, les avantages réels découlant du lazy loading seront moins efficaces, ou plus petits.
C’est particulièrement vrai pour les grandes images Hero qui se trouvent above the fold et qui ont une grande influence sur le LCP. Elles ne bénéficieront pas du lazy loading contrôlé par JS. Pour cette raison, il est peut-être préférable de ne pas faire de JS un sujet pour le rendu des images et de s’appuyer plutôt sur le navigateur pour décider quelles images doivent être « lazy-loaded ».
En résumé
Comme vous pouvez le constater, le LCP peut être un facteur assez décisif lorsqu’il s’agit du classement global. Et si le contenu restera toujours le numéro un du classement, il est clair que l’expérience utilisateur jouera un rôle de plus en plus important dans le SEO.
Ceux qui souhaitent avoir un avantage concurrentiel devraient donc investir un peu de temps dans le LCP afin d’arriver eux-mêmes en page 1. Ceci mis à part, certains de ces conseils et astuces sont assez simples, mais la plupart des propriétaires de sites web gagneraient à se tourner vers leurs partenaires d’agences numériques pour voir où et comment ils peuvent s’améliorer le plus.
