Yourtarget Agency

LCP, INP, CLS : comment améliorer votre Core Web Vitals ?

core web vitals seo
Sommaire
    Add a header to begin generating the table of contents
    Scroll to Top

    Les Core Web Vitals sont un ensemble d’indicateurs créés par Google pour mesurer la qualité de l’expérience utilisateur sur une page web. Ils reposent sur trois mesures principales : Largest Contentful Paint (LCP), Interaction to Next Paint (INP), Cumulative Layout Shift (CLS). Les Core Web Vitals font partie des critères de référencement de Google, alors comment les améliorer ? Les détails sont à découvrir dans cet article.

    Core Web Vitals, c’est quoi au juste ?

    Par définition, les Core Web Vitals constituent une série d’indicateurs qui mesurent l’expérience utilisateur concrète en se basant sur la vitesse de chargement, l’interaction et la stabilité visuelle de la page. Il est important pour les propriétaires de sites d’obtenir un bon score Core Web Vitals, et cela pour se démarquer dans la recherche Google et proposer une expérience utilisateur de qualité. En effet, les Core Web Vitals reposent sur trois mesures principales :

    LCP (Largest Contentful Paint)

    Cet indicateur évalue la durée qu’il faut pour que les éléments principaux visibles et utiles d’une page soient chargés. En termes simples, il évalue la rapidité de chargement de la majeure partie du contenu de la page indispensable pour une interaction significative de l’utilisateur. Selon Google, un LCP inférieur à 2,5 secondes est jugé satisfaisant.

    INP (Interaction to Next Paint)

    Cet indicateur évalue la réactivité et doit rester sous les 200 millisecondes. Il mesure plus précisément l’interactivité, soit le temps nécessaire à une page pour répondre à une interaction d’un utilisateur. L’INP a remplacé le FID comme signal Web essentiel en mars 2024.

    CLS (Cumulative Layout Shift)

    Cet indicateur assure la stabilité visuelle. Les variations imprévues de contenu pendant la navigation — telles que du texte se déplaçant lorsqu’une image ou une bannière est en cours de chargement — en sont la cause. Il s’agit d’un score qui ne possède pas d’unité. Pour offrir une expérience utilisateur de qualité, votre score CLS doit être inférieur à 0,1.

    Comment optimiser les Core Web Vitals ?

    Depuis juin 2021, les Core Web Vitals font partie des critères de classement SEO. Google y accorde beaucoup d’importance. Voici quelques astuces qui peuvent vous aider à mesurer et à améliorer vos métriques Core Web Vitals.

    Améliorer le LCP

    Il est important d’accélérer la réponse du serveur. À noter que si le serveur prend du temps à renvoyer la page, tout le reste attend. De ce fait, on vous recommande :

    • d’opter pour un hébergement adapté
    • d’utiliser la version récente PHP pour WordPress
    • d’un cache de pages et un CDN pour servir les fichiers depuis un point proche du visiteur

    Tout cela peut vous aider à accélérer le temps de chargement du site.

    Pour améliorer le LCP, il est aussi important d’optimiser l’image principale. Pour s’y faire, on vous conseille de présenter l’image en un format moderne : WebP ou AVIF, avec des tailles adaptées pour chaque écran. Il est déconseillé d’utiliser le chargement différé : le lazy loading est bénéfique pour les images situées plus bas sur la page, pas pour celle située en haut. Il faut ensuite signaler l’image comme prioritaire au navigateur en utilisant l’attribut fetchpriority ou le préchargement. Enfin, il faut éviter les carrousels en haut de page qui retardent souvent l’affichage.

    La dernière étape nécessaire pour améliorer le LCP est de supprimer ce qui bloque le rendu. De ce fait, il est important de réduire le CSS au nécessaire et différer les scripts non essentiels, et surtout limiter le nombre de polices et de graisses chargées.

    Améliorer l’INP

    À savoir qu’une mauvaise INP est généralement due à une surabondance de JavaScript qui monopolise le processeur lorsque l’utilisateur interagit.

    La première étape pour améliorer l’INP des Core Web Vitals est de faire l’inventaire des scripts tiers. En effet, outils de chat, pixels publicitaires, outils heatmap… chaque élément représente un prix. N’enregistrez que ceux qui sont réellement utiles, chargez-les après la visualisation et regroupez les balises dans Google Tag Manager de manière judicieuse.

    La seconde étape consiste à découper les tâches longues. Cela inclut notamment le fractionnement d’un traitement lourd déclenché au clic. Le but est d’afficher un retour visuel dans l’immédiat. Il faut ensuite alléger les constructeurs de pages et les extensions, et pour en finir, testez sur un téléphone d’entrée de gamme.

    Améliorer le CLS

    Pour améliorer le CLS, il faut commencer par indiquer la largeur et la hauteur des images et des vidéos pour que le navigateur réserve leur place. Ensuite, on vous conseille de prévoir l’espace pour les éléments qui seront chargés ensuite :

    • bannières publicitaires
    • vidéos intégrées
    • cartes et widgets de commentaires

    La prochaine étape est de présenter l’alerte de cookies en surimpression plutôt qu’en déplaçant le contenu vers le bas. Apprenez également à gérer le chargement des polices web afin d’empêcher que la taille du texte ne varie lors de l’arrivée de la police. Pour améliorer le CLS du Core Web Vitals, il est important de ne jamais placer d’informations au-dessus de ce qui est actuellement affiché à l’utilisateur, à l’exception des cas où cela répond à une action de sa part.

    Les outils nécessaires pour mesurer vos scores

    Vous pouvez analyser les performances de votre site via des outils gratuits fournis par Google :

    • PageSpeed Insights — l’outil vous offre la possibilité d’évaluer la performance de votre site Internet page par page. Il illustre le classement sur les versions mobile et bureau, puis propose des recommandations d’optimisation pour rehausser les performances.
    • Lighthouse — c’est l’extension de Google Chrome. Il effectue des tests de vérification sur votre page afin d’évaluer la performance de votre site Internet, y compris les Core Web Vitals. Néanmoins, cet outil ne s’intéressait pas au FID.
    • Google Search Console — elle présente l’option “Signaux Web essentiels”, qui permet d’obtenir une vue d’ensemble des signaux critiques de votre site web et d’obtenir des alertes en cas d’apparition d’un nouveau problème lié aux trois indicateurs. Ici, l’expérience utilisateur est analysée par groupe d’URL.

    LCP, INP, CLS… ces indicateurs clés du Core Web Vitals prennent un rôle indispensable pour tous les acteurs de site web. Pour ceux qui ont déjà étudié l’expérience utilisateur, il ne devrait pas y avoir trop de soucis. Mais pour les autres, il est essentiel de comprendre et d’implémenter dès maintenant les meilleures pratiques afin de maintenir une position favorable dans le moteur de recherche de Google. Fort heureusement, des outils sont disponibles pour vous assister dans la prise en compte de ces critères.

    Retour en haut

    Demandez un devis