Core Web Vitals expliqués : trois sensations, pas trois chiffres

Les Core Web Vitals ont un problème d'image. On les présente comme trois sigles techniques, LCP, INP, CLS, trois chiffres à faire passer au vert dans un tableau de bord. Présentés comme ça, ils paraissent abstraits, réservés aux développeurs, déconnectés de ton business. C'est exactement pour ça qu'on les ignore.

Pourtant, ces trois métriques ne mesurent pas des abstractions. Elles mesurent trois sensations très concrètes que vit ton visiteur, seconde après seconde, sur ta page. L'attente avant que ça s'affiche. Le délai entre son clic et la réaction. Le sol qui bouge sous ses yeux. Une fois que tu les vois comme des sensations et pas comme des chiffres, tu comprends pourquoi Google les utilise pour classer, et surtout pourquoi ils décident de rester ou partir. Voici les trois, expliqués pour de vrai.

L'attente, la réactivité, la stabilité : ce que mesurent vraiment LCP, INP et CLS

Le FID existe encore ou je dois regarder l'INP maintenant ?

Le FID n'existe plus comme Core Web Vital. L'INP l'a officiellement remplacé le 12 mars 2024, parce qu'il mesure la réactivité tout au long de la visite, pas seulement au tout premier clic. Si un outil ou un rapport te parle encore de FID comme métrique de classement, il est basé sur une donnée obsolète depuis cette date.

Google n'a pas choisi ces trois indicateurs au hasard. Il a cherché à capturer ce qu'un humain ressent quand une page se charge mal, et il a trouvé trois moments de friction distincts. Chaque Core Web Vital correspond à l'un d'eux.

• Le LCP, Largest Contentful Paint, c'est l'attente. Le temps avant que le plus gros élément visible apparaisse, donc le moment où ton visiteur sent que la page est enfin là. Avant ça, il fixe un écran vide et il doute. Un bon LCP reste sous 2,5 secondes.
• L'INP, Interaction to Next Paint, c'est la réactivité. Le délai entre le moment où ton visiteur clique ou tape et le moment où l'interface réagit. Un INP lent, c'est une page qui semble figée, qui ignore les ordres. Un bon INP reste sous 200 millisecondes.
• Le CLS, Cumulative Layout Shift, c'est la stabilité. À quel point la page saute pendant qu'elle se charge. Un CLS élevé, c'est le contenu qui bouge, le clic qui rate sa cible, la sensation d'un sol instable. Un bon CLS reste sous 0,1.

Vues comme ça, les trois cessent d'être techniques. L'attente, la réactivité, la stabilité. Trois émotions, mesurées en chiffres. Et un visiteur qui attend, qui clique dans le vide, ou qui voit la page sauter, est un visiteur qui perd confiance, exactement au moment où tu voudrais qu'il avance.

Ces trois sensations ne se vivent pas en même temps, elles se succèdent dans le temps de la visite. D'abord l'attente, le LCP, pendant le chargement, quand l'écran est encore vide ou incomplet. Ensuite la stabilité, le CLS, pendant que la page finit de se poser et que les éléments arrivent. Enfin la réactivité, l'INP, au moment où le visiteur commence à agir, à cliquer, à saisir. Comprendre cette chronologie aide à diagnostiquer, parce qu'une plainte du type "ton site rame" ne veut rien dire tant qu'on n'a pas situé à quel instant la friction se produit. Rame-t-il avant de s'afficher, pendant qu'il se pose, ou quand on l'utilise. Chaque réponse pointe vers un Core Web Vital différent, et donc un correctif différent.

Ces trois sensations ne sont pas restées théoriques pour moi. Sur Copyboost, elles se sont présentées concrètement, et la plus visible était l'attente.

• Le LCP, l'attente. Mon titre principal, l'élément le plus gros au dessus de la ligne, attendait le chargement d'une police web avant de s'afficher. Neuf polices étaient chargées sans préchargement. Le visiteur fixait un espace vide le temps que la bonne police arrive. En préchargeant la police critique et en séparant les routes, le titre est apparu bien plus tôt, et c'est une part de ce qui a fait monter le Lighthouse de 57 à plus de 75.
• La réactivité et la stabilité. Ces deux là dépendaient du reste, le temps de blocage du fil principal pour l'INP, et le basculement des polices pour le CLS. Traiter chaque sensation à sa source, plutôt que de viser un score, a donné une page qui non seulement notait mieux, mais se ressentait mieux.

La leçon, c'est que je n'ai pas optimisé un chiffre, j'ai supprimé trois frictions. Le score a suivi, il n'était pas la cible.

Lis les trois séparément, jamais en moyenne

Mon LCP est bon, je peux arrêter de m'inquiéter pour ma performance ?

Non. Un LCP au vert ne dit rien de ton INP ni de ton CLS, les trois se cassent indépendamment. Sur mobile, 59% des sites passent le LCP et 79% passent le CLS pris séparément, mais seulement 43% passent les trois en même temps, selon le Web Almanac. Ton LCP correct peut cacher un INP ou un CLS qui fait fuir tes visiteurs sans que rien ne l'annonce.

Voici où je me sépare de la façon habituelle de présenter la performance. Le réflexe est de regarder un score global, un chiffre unique sur cent, et de se rassurer ou de s'inquiéter avec lui. C'est une erreur, parce que ce score est une moyenne qui noie les trois sensations dans un seul nombre.

Le tableau dit exactement ce que l'intuition rate. Chaque métrique prise seule se passe plutôt bien, entre 59 et 97% de sites conformes selon le cas. Mais dès qu'on exige les trois en même temps, le taux de réussite s'effondre à 43% sur mobile et 54% sur desktop. Ce n'est pas un hasard statistique, c'est la preuve chiffrée qu'un site qui gère bien une sensation en néglige souvent une autre, exactement pourquoi les regarder une par une, jamais en moyenne, change ce que tu corriges en premier.

Je le pose clairement. Un bon score global avec un mauvais INP, c'est une page qui paraît rapide mais qui ne répond pas aux clics. Un bon score avec un mauvais CLS, c'est une page rapide qui saute et trahit la confiance. La moyenne te ment par omission. Les trois Core Web Vitals doivent se lire séparément, parce que chacun correspond à une friction différente, et qu'un visiteur frustré ne fait pas la moyenne de son expérience, il retient le pire moment. C'est aussi pour ça que courir après le score parfait est un piège que j'ai traité à part, le chiffre rond ne dit rien des trois sensations qui comptent. Pour mesurer ces trois sensations là où elles comptent vraiment, chez tes visiteurs réels et pas en labo, voici comment lire ta vitesse réelle.

La fiche des trois Core Web Vitals, seuil et premier levier

Comment je sais laquelle des trois sensations coûte le plus à mes visiteurs ?

Regarde laquelle est la plus loin de son seuil en proportion, pas laquelle a le chiffre le plus impressionnant en apparence. Un CLS à 0,3 dépasse son seuil de 0,1 de 200%, alors qu'un LCP à 3,5 secondes ne dépasse son seuil de 2,5 secondes que de 40%, même si 0,3 paraît un tout petit nombre à côté de 3,5. Compare chaque métrique à son propre seuil, LCP à 2,5 secondes, INP à 200 millisecondes, CLS à 0,1, et corrige celle dont l'écart relatif est le plus grand en premier.

Garde cette grille de lecture sous la main.

1. LCP, l'attente. Mesure le temps avant que le gros élément s'affiche. Seuil, sous 2,5 secondes. Premier levier, précharger l'élément principal et sa dépendance, ne jamais le différer.
2. INP, la réactivité. Mesure le délai entre le clic et la réaction. Seuil, sous 200 millisecondes. Premier levier, alléger le JavaScript qui occupe le fil principal et le fait paraître figé.
3. CLS, la stabilité. Mesure l'ampleur des sauts de mise en page. Seuil, sous 0,1. Premier levier, réserver l'espace de chaque image et de tout contenu qui s'insère.

Où tu les regardes : sur le terrain, au 75e centile, pas seulement en labo, parce que ces trois sensations dépendent de l'appareil et de la connexion de tes vrais visiteurs.

C'est la grille que j'ai appliquée à mon propre SaaS. Sur Copyboost, je n'ai pas cherché à faire monter un score, j'ai traité les trois sensations une par une, en commençant par celle qui était la plus loin de son seuil. Le score Lighthouse est passé de 57 à plus de 75, mais c'est la conséquence, pas la cible. Viser le chiffre rond aurait envoyé l'effort sur les métriques déjà bonnes.

Ce qu'il faut retenir

Les Core Web Vitals ne sont pas trois chiffres techniques, ce sont trois sensations de ton visiteur. Le LCP, c'est l'attente. L'INP, c'est la réactivité. Le CLS, c'est la stabilité. Lis les séparément, jamais en moyenne, parce qu'un visiteur retient son pire moment, pas la note globale, et parce que seuls 43% des sites mobiles réussissent les trois en même temps quand chacune prise seule se passe bien mieux. Ouvre PageSpeed Insights sur ta page principale, regarde tes trois Core Web Vitals un par un, et tu sauras laquelle des trois frictions coûte le plus à ta conversion. Si tu veux qu'on lise ensemble ce que ces trois sensations font vraiment vivre à tes visiteurs et quoi corriger d'abord, c'est le coeur du diagnostic performance.