Core Web Vitals : comprendre LCP, INP et CLS pour enfin les corriger

Depuis 2021, Google utilise trois mesures de l'expérience utilisateur dans son classement : les Core Web Vitals. Elles ne font pas tout le référencement, loin de là, mais elles ont un mérite rare : elles mesurent ce que vivent réellement vos visiteurs, sur leur téléphone, avec leur connexion.

Le problème, c'est que leurs noms n'aident pas. LCP, INP, CLS : on sait qu'il faut « être dans le vert », rarement pourquoi on ne l'est pas. Reprenons-les une par une.

Le LCP : quand la page semble enfin chargée#

Le Largest Contentful Paint mesure le temps nécessaire pour afficher le plus grand élément visible à l'écran. Sur une page produit, c'est souvent la photo principale ; sur un article, le titre ou l'image d'en-tête.

Les seuils fixés par Google :

• bon : 2,5 secondes ou moins ;
• à améliorer : entre 2,5 et 4 secondes ;
• mauvais : au-delà de 4 secondes.

Dans la grande majorité des audits que nous voyons, un LCP lent s'explique par l'une de ces trois causes : une image principale trop lourde, une image découverte trop tard par le navigateur, ou un serveur qui met plus d'une seconde à répondre.

Le correctif le plus rentable tient souvent en une ligne. On indique au navigateur de charger l'image principale en priorité :

<img src="/hero.webp" alt="Chaussures de trail sur un sentier" fetchpriority="high" width="1200" height="800">

L'INP : la page répond-elle quand on clique ?#

L'Interaction to Next Paint a remplacé le FID en mars 2024. Il mesure le délai entre une action de l'utilisateur (un clic, une touche, un tap) et la mise à jour visible de la page. Là où le FID ne regardait que la première interaction, l'INP les observe toutes et retient l'une des plus lentes.

Les seuils :

• bon : 200 millisecondes ou moins ;
• à améliorer : entre 200 et 500 millisecondes ;
• mauvais : au-delà de 500 millisecondes.

Un INP élevé veut presque toujours dire que le fil principal du navigateur est occupé au moment du clic : un script de suivi qui s'exécute, un gros composant qui se recalcule, un gestionnaire d'événement qui fait trop de choses d'un coup.

Les pistes qui fonctionnent :

• alléger les scripts tiers : widgets de chat, pixels publicitaires et outils d'A/B test sont les premiers suspects ;
• découper les tâches longues : afficher d'abord le retour visuel du clic, reporter le reste du travail ;
• différer ce qui n'est pas urgent avec l'attribut defer sur les scripts non essentiels.

Le CLS : la page qui bouge toute seule#

Le Cumulative Layout Shift mesure les déplacements inattendus du contenu. Vous connaissez la situation : vous allez toucher un lien, une bannière se charge au-dessus, et vous cliquez sur autre chose.

Ici, pas de secondes mais un score :

• bon : 0,1 ou moins ;
• à améliorer : entre 0,1 et 0,25 ;
• mauvais : au-delà de 0,25.

Les coupables habituels sont faciles à repérer : images sans dimensions, encarts publicitaires sans espace réservé, polices web qui changent la taille du texte en se chargeant. La correction la plus simple consiste à toujours indiquer width et height sur vos images, ou à réserver la place avec la propriété CSS aspect-ratio.

Données de laboratoire ou données réelles ?#

Un point crée beaucoup de confusion. Google évalue vos Core Web Vitals à partir des données de terrain, collectées auprès de vrais utilisateurs de Chrome, en retenant le 75e centile des visites. Un test lancé depuis votre ordinateur, avec une bonne connexion, peut donc afficher d'excellents chiffres pendant que vos visiteurs sur mobile vivent une tout autre expérience.

Les mesures de laboratoire restent indispensables pour comprendre un problème et vérifier une correction. Mais c'est l'évolution des données réelles, sur plusieurs semaines, qui dira si vous avez gagné.

Par où commencer#

Si vous ne deviez faire que trois choses cette semaine :

1. identifier l'élément LCP de vos pages clés et lui donner la priorité de chargement ;
2. ajouter des dimensions à toutes les images ;
3. faire l'inventaire des scripts tiers et retirer ceux qui ne servent plus.

C'est exactement ce que Codanalyst vérifie dans son analyse de performance, page par page, avec la correction adaptée à chaque cas. Lancez un audit gratuit pour voir où en est votre site.