Améliorer les Core Web Vitals : corriger LCP, INP et CLS

Les Core Web Vitals ne s’améliorent pas via un réglage unique, mais métrique par métrique : vous accélérez le chargement (LCP), vous rendez la page plus réactive (INP) et vous maintenez la mise en page stable (CLS). Chaque métrique a ses propres causes et donc ses propres correctifs. Dans cet article, vous découvrez, métrique par métrique, ce que vous devez concrètement traiter, comment vérifier que cela fonctionne, et dans quel ordre procéder pour que l’effet se voie sur vos leads et pas seulement sur un chiffre.

Vous voulez d’abord savoir ce que mesurent précisément le LCP, l’INP et le CLS, et pourquoi Google en tient compte ? Lisez notre explication sur ce que sont les Core Web Vitals. Ici, nous passons directement aux solutions.

Quels sont les seuils à atteindre ?

Vous visez trois valeurs : un LCP sous 2,5 secondes, un INP sous 200 millisecondes et un CLS sous 0,1. Ce sont les limites que Google qualifie de « bonnes ».

• Le LCP (Largest Contentful Paint) mesure la vitesse à laquelle le plus grand bloc de contenu apparaît à l’écran, le plus souvent votre image hero ou un grand titre.
• L’INP (Interaction to Next Paint) mesure la vitesse à laquelle votre page réagit quand quelqu’un clique, tape ou saisit du texte. Depuis 2024, l’INP est la mesure officielle de la réactivité et a remplacé l’ancienne métrique FID.
• Le CLS (Cumulative Layout Shift) mesure l’ampleur des décalages de mise en page pendant le chargement.

Important à savoir avant de commencer : Google évalue ces chiffres au 75e percentile de vos données réelles de visiteurs. Autrement dit, au moins trois quarts de vos visiteurs doivent obtenir un bon score. Une belle mesure en laboratoire sur votre ordinateur portable rapide ne dit donc pas grand-chose ; ce qui compte, c’est ce que votre public vit sur un appareil et une connexion moyens. C’est pourquoi vous travaillez toujours à partir de données réelles et non d’une impression.

Comment améliorer votre LCP ?

La voie la plus rapide vers un meilleur LCP consiste à alléger et à accélérer votre plus grand élément visible en premier. Dans la pratique, il s’agit presque toujours d’une image ou d’un processus de chargement lourd qui bloque le passage.

Correctifs concrets, par ordre d’impact :

• Compressez vos images et utilisez des formats modernes comme le WebP ou l’AVIF. Une image hero de plusieurs mégaoctets est un tueur de LCP classique. Donnez aussi aux visuels les bonnes dimensions plutôt que de réduire un gros fichier dans le navigateur.
• Optez pour un hébergement rapide et un CDN. Un serveur lent fait attendre le navigateur avant que quoi que ce soit n’apparaisse. Un hébergement proche de votre public, en l’occurrence généralement en Europe, fait une différence notable.
• Chargez votre image la plus importante en priorité. Avec des techniques comme le preload, vous indiquez au navigateur que ce visuel doit arriver en premier. Le lazy loading n’a justement pas sa place sur votre hero, car vous retardez alors précisément ce dont vous avez besoin.
• Limitez ce qui bloque la page. Les polices lourdes, les scripts externes et le CSS superflu qui doit se charger en premier retardent le moment où votre contenu devient visible. Moins le navigateur a de travail avant le premier affichage, mieux c’est.

Une grande partie de ces gains relève du travail technique sous le capot. Cela vaut la peine de bien le faire dès la construction ou lors d’une refonte de site web, car corriger après coup coûte toujours plus cher.

Comment améliorer votre INP ?

Vous améliorez l’INP en réduisant la quantité et le poids du JavaScript, afin que la page soit libre de réagir vite à un clic. Un INP lent donne la sensation d’un bouton qui ne répond pas, après quoi, agacé, on reclique.

Ce qui fait la différence :

• Élaguez les scripts tiers. Les traqueurs, widgets de chat, outils de tests A/B et pixels marketing s’accumulent et occupent le thread principal. Supprimez ce que vous n’utilisez pas vraiment et chargez le reste en différé.
• Découpez les tâches lourdes. De longs blocs de JavaScript ininterrompus bloquent toute réaction. En fractionnant les tâches, vous laissez au navigateur la marge de répondre aux interactions entre-temps.
• Soyez critique envers les page builders et plugins lourds. Sur WordPress surtout, une accumulation de plugins et un constructeur de thème lourd peuvent plomber votre INP. Ici, moins signifie souvent plus rapide.
• Gardez vos formulaires légers. Vos formulaires de contact et de devis sont précisément les endroits où l’interaction compte. Un formulaire qui bloque au moment où quelqu’un veut l’envoyer vous coûte directement un lead.

L’INP est la métrique la plus étroitement liée à la sensation de fluidité de votre site. Une page qui réagit immédiatement garde les gens dans le flux vers votre point de conversion.

Comment régler le CLS ?

Vous réglez le CLS en attribuant à l’avance une place fixe à tout ce qui occupe de l’espace, afin que rien ne se décale pendant le chargement de la page. Un contenu qui saute est irritant et coûte parfois littéralement un clic à côté.

Les causes les plus fréquentes et leur correctif :

• Des visuels sans dimensions fixes. Donnez à chaque image et vidéo une largeur et une hauteur fixes, pour que le navigateur réserve l’espace avant que le visuel n’arrive. C’est de loin la source de décalage de mise en page la plus courante.
• Publicités, intégrations et bannières. Réservez un bloc fixe pour le contenu qui se charge plus tard, comme une carte intégrée, une vidéo ou un bandeau cookies. Ainsi, rien n’est poussé vers le bas.
• Des polices qui se chargent tard. Quand une police web n’apparaît que plus tard et que le texte se réagence, votre mise en page saute. En chargeant les polices intelligemment et en choisissant un bon style de repli, vous limitez ce phénomène.
• Du contenu inséré en haut de page. Une notification ou une barre qui apparaît soudain au-dessus de votre contenu repousse tout le reste. Prévoyez-lui de la place plutôt que de l’insérer par-dessus.

Le CLS est généralement le moins cher des trois à réparer, car les correctifs sont souvent petits et localisés. Il est pourtant souvent oublié, justement parce qu’il se remarque à peine sur une machine de développement rapide.

Comment vérifier que vos améliorations fonctionnent ?

Vous mesurez avant et après, et vous regardez vos visiteurs réels, pas seulement un test en laboratoire. Sinon, vous améliorez un chiffre que votre public ne verra jamais.

Dans la pratique, vous utilisez deux types de sources ensemble :

• Les données de terrain (visiteurs réels). Google Search Console affiche les Core Web Vitals de tout votre site sur la base de données d’utilisateurs réels, avec les URL qui demandent de l’attention. C’est votre source de vérité, car c’est exactement ce que Google évalue.
• Les données de laboratoire (diagnostic). Des outils comme PageSpeed Insights et Google Lighthouse lancent un test dans un environnement simulé. Pratique pour voir ce qui ralentit une page et pour tester rapidement, mais les chiffres fluctuent et constituent un diagnostic, pas un verdict final.

Une méthode qui fonctionne : mesurez la situation actuelle, appliquez un correctif, et vérifiez après quelques semaines dans Search Console si vos scores de terrain suivent. Les données de terrain accusent un certain retard parce qu’elles se construisent sur une période, ne vous attendez donc pas à un autre chiffre juste après le déploiement. Testez toujours aussi sur mobile, car c’est là que l’expérience est généralement la plus lourde et que se trouve le plus grand gain.

Quel correctif traiter en premier ?

Commencez par la métrique qui, sur vos pages les plus importantes, est la plus éloignée du seuil et touche le plus de visiteurs. Pas par ce qui est techniquement le plus amusant à résoudre.

Un ordre honnête :

1. Regardez quelles pages génèrent du trafic et des leads. Votre page d’accueil, votre principale page de création de site web et vos meilleures landing pages pèsent plus lourd qu’un article de blog enfoui.
2. Traitez-y la métrique qui est dans le rouge. Si votre LCP est à quatre secondes, la compression des images rapporte plus que d’éliminer un dernier détail de CLS.
3. Prenez les gains faciles au passage. Des dimensions fixes pour les visuels et la suppression de quelques scripts superflus coûtent peu et aident immédiatement.

Ne courez pas après des scores parfaits. Une page à 100 sur 100 qui ne mène personne vers votre formulaire ne rapporte rien. L’objectif est que les visiteurs restent, cliquent sans friction et convertissent. La vitesse y est un levier, pas une ligne d’arrivée. Vous voulez comprendre plus en profondeur comment cela s’intègre dans un site sain et visible ? Vous trouverez le cadre large dans notre guide sur la création d’un site web B2B.

Le résumé en bref

Les Core Web Vitals s’améliorent métrique par métrique. Pour le LCP, tout tourne autour d’images plus légères et d’un hébergement rapide, pour l’INP autour de moins de JavaScript et plus léger, et pour le CLS autour de dimensions fixes pour que rien ne saute. Travaillez à partir de données réelles de visiteurs dans Search Console, utilisez les outils de laboratoire pour le diagnostic, et commencez par les pages et les métriques qui touchent le plus de trafic et de leads. Ainsi, un site plus rapide ne devient pas une fin en soi, mais un moyen direct de convertir plus de visiteurs.

Vos Core Web Vitals sont mauvais et vous voulez savoir où se trouve le vrai gain ? Nous cartographions ce qui ralentit votre site et le résolvons à la racine, avec un focus sur les leads et le chiffre d’affaires plutôt que sur des chiffres vaniteux. Planifiez votre entretien gratuit et vous saurez où se trouvent vos opportunités.