Core Web Vitals : comprendre LCP, INP et CLS — et les mesurer vraiment

Les Core Web Vitals sont trois indicateurs choisis par Google pour résumer l'expérience de chargement d'une page. Ils comptent pour votre référencement — modestement — et surtout pour vos visiteurs : un site qui répond vite convertit mieux, c'est l'un des résultats les plus reproduits des études de e-commerce. Encore faut-il comprendre ce que chaque métrique mesure, et ne pas confondre un test de laboratoire avec la réalité.

Les trois métriques, en langage clair

LCP (Largest Contentful Paint) : le temps d'affichage du plus gros élément visible — en général l'image principale ou le titre. C'est la réponse à « quand ai-je l'impression que la page est là ? ». Seuil recommandé : 2,5 secondes.

INP (Interaction to Next Paint) : le délai entre une interaction (clic, saisie) et la mise à jour visible de l'écran. INP a remplacé FID en 2024, et c'est un durcissement notable : là où FID ne mesurait que le premier délai d'entrée, INP observe toutes les interactions de la session. Seuil : 200 millisecondes.

CLS (Cumulative Layout Shift) : la stabilité visuelle. Chaque fois que le contenu saute — une image sans dimensions, une bannière qui s'insère — le score se dégrade. Seuil : 0,1.

Ces seuils s'évaluent au 75ᵉ percentile : il ne suffit pas que la médiane soit bonne, il faut que trois visiteurs sur quatre vivent une bonne expérience, y compris sur mobile en 4G moyenne.

Laboratoire ou terrain : deux mesures qui ne disent pas la même chose

C'est la confusion la plus fréquente. PageSpeed Insights, Lighthouse ou WebPageTest simulent une visite dans des conditions fixées : c'est reproductible, parfait pour comparer un avant/après, mais ce n'est pas votre trafic. Les données de terrain (RUM, et le rapport CrUX de Google) agrègent ce que vivent vos vrais visiteurs sur 28 jours : c'est la seule mesure qui compte pour le référencement — et pour vos clients.

Les deux divergent souvent, et c'est normal : un public majoritairement sur desktop fibré aura un excellent LCP de terrain malgré un score Lighthouse mobile médiocre ; l'inverse existe aussi. Ni l'une ni l'autre n'est « la vraie » mesure : le laboratoire sert à diagnostiquer et comparer, le terrain sert à décider et prioriser.

Mesurer sur vos vrais visiteurs

La bibliothèque open source web-vitals, maintenue par l'équipe Chrome, tient en quelques lignes :

import { onLCP, onINP, onCLS } from 'web-vitals';

function envoyer(metrique) {
  // navigator.sendBeacon survit à la fermeture de l'onglet
  const corps = JSON.stringify({
    nom: metrique.name,
    valeur: metrique.value,
    page: location.pathname,
  });
  navigator.sendBeacon('/api/vitals', corps);
}

onLCP(envoyer);
onINP(envoyer);
onCLS(envoyer);

Côté serveur, stockez ces valeurs et regardez le p75 par gabarit de page (accueil, fiche produit, tunnel de commande…), pas la moyenne globale : une moyenne mélange vos pages rapides et vos pages lentes et ne vous dira jamais où agir. Si vous ne voulez rien construire, le rapport « Signaux Web essentiels » de la Search Console et l'API CrUX donnent déjà la tendance par groupe de pages, gratuitement — avec moins de finesse.

Où agissent les optimisations, métrique par métrique

• LCP se gagne côté serveur et réseau : temps de réponse (TTFB), priorité de chargement de l'image principale (fetchpriority="high", pas de lazy loading sur elle), poids des images, CSS bloquant.
• INP se gagne côté JavaScript : moins de code au chargement, des gestionnaires d'événements courts, découper les longues tâches. C'est la métrique la plus difficile à corriger après coup, car elle découle de l'architecture front.
• CLS se gagne par discipline : dimensions explicites sur images et iframes, espace réservé pour les contenus injectés, polices avec font-display maîtrisé.

Ce qu'il faut retenir

Un bon score PageSpeed est agréable, mais l'objectif réel est le p75 de terrain sous les seuils, sur les pages qui font votre chiffre d'affaires. Commencez par mesurer (CrUX si vous partez de zéro, RUM si vous voulez prioriser finement), identifiez le gabarit de page le plus dégradé, et traitez la métrique dominante. L'erreur classique est l'inverse : optimiser au hasard ce qui se voit dans un audit de laboratoire, sans savoir si un seul visiteur réel en bénéficie.