Nous avons abordé les trois Signaux Web essentiels (CWV) dans notre précédent article sur l'optimisation de la mise à jour des Core Web Vitals de Google. Toutefois, nous ne pouvons pas parler des Signaux Web essentiels sans nous plonger dans un facteur clé : le LCP, également appelé Largest Contentful Paint.
Dans ce guide, nous allons explorer ce qu'est le LCP, pourquoi il est important, ses avantages et les améliorations que vous pouvez apporter grâce à lui pour optimiser votre site Web.
Qu'est-ce que le LCP et pourquoi est-il important ?
LCP est l'abréviation de Largest Contentful Paint. Le LCP mesure la vitesse des pages. Il indique le temps nécessaire au chargement du principal contenu d'une page (en gros, le moment où la page devient lisible pour l'utilisateur).
Le LCP fait partie intégrante de l'expérience de l'utilisateur. Les utilisateurs n'ont généralement pas envie de s'attarder et d'attendre qu'un site se charge s'ils peuvent obtenir immédiatement une meilleure expérience ailleurs.
Si votre LCP est médiocre, votre taux de rebond pourrait être plus élevé et votre classement général pourrait en souffrir. Un LCP médiocre peut même entraîner une baisse du taux de conversion, ce qui est une mauvaise chose pour les entreprises naissantes.
Grâce à la mise à jour des Core Web Vitals, le LCP devient un facteur plus important pour votre classement dans les SERP. Pour continuer à figurer dans le classement organique et conserver ces visiteurs, il est très important de rester au top de votre LCP.
Le LCP ne concerne que le contenu principal situé au-dessus de la ligne de flottaison. Ce sont les images, les vidéos ou les blocs de texte qui s'affichent sans que l'utilisateur doive les faire défiler. Gardez cela à l'esprit lorsque vous notez les zones qui posent problème.
Définition d'un LCP bon ou médiocre
Pour obtenir un bon LCP, d'après les consignes de Google, le contenu principal de votre page doit se charger dans les 2,5 premières secondes. Le graphique ci-dessous le montre plus en détail :
Si vos utilisateurs doivent attendre cinq secondes ou plus pour que le contenu principal se charge (c'est-à-dire si votre LCP est médiocre et qu'une amélioration est nécessaire), ils risquent fort d'abandonner et d'aller ailleurs.
Les consignes de Google précisent également que votre LCP doit être classé comme « bon » au moins 75 % du temps. Si vous parvenez à gérer ce point, vos performances monteront en flèche.
Nous allons examiner votre LCP spécifique dans un moment. Pour l'instant, concentrons-nous sur les causes générales d'un LCP médiocre et sur la manière de les traiter.
Quelles sont les causes d'un LCP médiocre ?
La liste de ce qui pourrait être à l'origine d'un LCP médiocre est techniquement sans fin.
Ce peut être tout ce qui prend beaucoup de place : des lecteurs multimédias intégrés qui peuvent ralentir une page, des diapositives d'images non optimisées, des boutons de réseaux sociaux, ou même des widgets comme le login, un formulaire d'inscription à la newsletter, etc.
Mais soyons un peu plus précis.
Comme le montre le graphique ci-dessus, les facteurs à l'origine d'un LCP médiocre appartiennent souvent à quatre groupes principaux :
1. Temps de réponse du serveur lent
La lenteur du temps de réponse du serveur a un impact négatif sur toutes les métriques de la vitesse de chargement et, par conséquent, elle est définitivement à l'origine d'un LCP médiocre.
Les temps de réponse du serveur lent sont souvent le résultat de problèmes au niveau de votre infrastructure de base, des requêtes de base de données non optimisées ou des réponses API qui prennent beaucoup de temps à se résoudre. Et tout cela se passe en arrière-plan de votre site.
La première étape pour améliorer cette situation consiste à s'assurer que votre site est hébergé sur un bon serveur.
2. JavaScript et CSS bloquant le rendu
Bien que la personnalisation de votre site Web soit un excellent moyen de l'aider à se démarquer, l'ajout de JavaScript et de CSS pour embellir le thème de votre site et son contenu aura malheureusement aussi un impact sur son temps de chargement.
Parfois, pour le bien de votre LCP, il est préférable de s'en tenir à une conception de site moins « lourde » et de réduire le nombre de plugins, en particulier au-dessus de la ligne de flottaison.
3. Temps de chargement lent des ressources
Les ressources volumineuses ou le contenu à fort impact visuel d'une page prennent forcément beaucoup de temps à charger. C'est une réalité.
Si vous avez beaucoup d'images de qualité non optimisées, de GIF et de zones de texte à rendre au-dessus de la ligne de flottaison, votre LCP en sera affecté.
4. Rendu côté client
Le rendu côté client (c'est-à-dire le rendu des pages web directement dans un navigateur avec JavaScript) est une méthode de développement assez populaire.
Cependant, elle implique de nombreux allers-retours pour le navigateur afin de collecter et de charger le JavaScript avant de rendre le contenu principal, et donc une attente supplémentaire pour votre utilisateur.
Si vous vous appuyez également sur le rendu côté client, vous voudrez peut-être examiner cette question lorsque vous travaillerez sur votre LCP.
Lisez ce qui suit pour en savoir plus sur l'optimisation de ces éléments afin d'améliorer votre LCP.
Comment réparer un LCP médiocre ?
Il existe plusieurs solutions aux LCP médiocres : certaines étant plus faciles que d'autres. Nous allons vous présenter ici quelques-unes des plus simples.
1. Optimisez votre CSS
Les fichiers CSS sont des ressources qui bloquent le rendu. Les ressources doivent être chargées et traitées avant que le serveur puisse rendre la page entière.
Toutefois, vous pouvez optimiser les fichiers CSS en supprimant manuellement le code inutilisé, en réduisant au minimum les fichiers CSS utilisés ou en optimisant vos images d'arrière-plan CSS à l'aide de requêtes média.
Cela semble délicat, mais il existe de nombreuses ressources et plein de tutoriels sur les métriques de vitesse centrées sur l'utilisateur qui peuvent vous aider en ce sens !
2. Optimisez vos images
Il y a quelques étapes à suivre pour optimiser vos images. Les principales sont les suivantes :
- Compressez vos images
- Envisagez de convertir vos images vers des formats plus efficaces
- Utilisez les vidéos au lieu des GIF (ils prennent moins de temps à charger)
- Veillez à ce que vos images soient aux bonnes dimensions
Et il est toujours bon de se demander : ai-je vraiment besoin de cette image ? Est-ce qu'elle ajoute quelque chose à ma page ? Si ce n'est pas le cas, il peut être utile de s'en débarrasser.
3. Optimisez vos WebFonts
Les polices sont souvent livrées dans des fichiers volumineux. Aussi, le contenu textuel d'une police peu courante n'apparaîtra pas sur une page si le fichier de la police n'a pas encore été chargé.
Les utilisateurs mettront donc plus de temps à voir les informations essentielles sur une page Web ! Cela ne fera clairement pas l'affaire.
Pour éviter cela, vous devez optimiser vos WebFonts. En réduisant la taille de votre WebFont, en utilisant l'affichage de la police ou en mettant à jour le style de votre page pour utiliser votre police personnalisée, le chargement de la page devrait s'accélérer.
4. Optimisez votre JavaScript
Vous écrivez votre JavaScript, vous y mettez toutes les informations dont vous avez besoin, et vous êtes prêt à partir, n'est-ce pas ?
Pas tout à fait. Si votre JavaScript traîne depuis un certain temps, il peut être utile de le vérifier, car il pourrait nuire à la vitesse de chargement des pages.
Voici quelques mesures que vous pouvez prendre pour optimiser votre JavaScript (compte tenu des dernières métriques LCP) :
- supprimer le code inutilisé
- vérifier que votre code est à jour et compatible avec les navigateurs modernes
- installer un JavaScript moderne et réduire les charges utiles grâce en fractionnant le code
Découvrir votre LCP
Alors, comment savoir ce qu'est votre LCP ?
Un bon point de départ pour vérifier les performances de votre LCP est d'utiliser les outils fournis par Google : Google Search Console, Google Page Insights et Lighthouse.
Vous trouverez un onglet correspondant aux Signaux Web essentiels dans la barre de navigation de gauche de Google Search Console. En entrant dans cet onglet, vous obtiendrez un aperçu de vos URL. À partir de là, il est assez facile de voir où se situent les problèmes et quels ajustements vous pouvez faire pour les résoudre.
Si vous n'avez pas configuré Google Search Console pour votre site, ne vous inquiétez pas. Vous pouvez également accéder à ces informations via les outils Lighthouse et PageSpeed Insights.
Voici l'aperçu de PageSpeed Insights pour le site Amazon version bureau. Il nous montre tous les Signaux Web essentiels en un coup d'œil :
Comme vous pouvez le constater, le Largest Contentful Paint est plutôt bon, mais il reste possible de l'améliorer. Rendez-vous dans la section Opportunités, explorez toutes les recommandations et saisissez toutes les chances d'obtenir des classements encore meilleurs.
Il est bon de suivre ces recommandations dans les temps pour passer la mise à jour des Signaux Web essentiels de Google. Faites régulièrement une vérification afin d'améliorer constamment votre LCP, les autres métriques du site et la situation générale de votre référencement (SEO).
Que peut faire Semrush pour vous aider ?
Donc, vous avez vérifié votre LCP, et vous avez identifié les problèmes. Maintenant, vous devez vous efforcer de les corriger et reprendre tout le processus dans une semaine ou deux.
L'entretien constant de votre référencement pour maintenir le LCP de votre site à niveau peut devenir rapidement fatigant. La bonne nouvelle est que nous savons exactement comment rendre ce processus plus efficace : l'outil Audit de site.
Testez la vitesse de votre site à l'aide de cet outil et générez une liste de toutes les améliorations et de tous les problèmes possibles : tout comme PageSpeed Insights, mais en mieux. L'outil Audit de site recherche également les erreurs SEO techniques et vous fournit des graphiques et des tableaux faciles à lire qui expliquent tous les problèmes et toutes les solutions.
Cet outil peut vous aider à combler vos lacunes au niveau des Signaux Web essentiels en évaluant votre URL et en analysant son contenu, tout en vous tenant constamment au courant des performances de votre LCP.
Une fois que vous avez configuré l'audit de votre site, il ne vous reste plus qu'à cliquer sur « Voir les détails » sous « Core Web Vitals » :
Vous trouverez les résultats de votre LCP dans les pages analysées en dessous du graphique :
Vous savez maintenant comment maintenir à jour les performances de votre LCP et où aller pour repérer les points à améliorer. Si vous suivez régulièrement chacune des recommandations de l'Audit de site, votre LCP et vos Signaux Web essentiels s'amélioreront forcément.
Servez-vous de ces données pour suivre l'évolution de votre LCP au fil du temps, et vous ne manquerez pas d'améliorer en un rien de temps vos performances de vitesse sur Internet.