Core Web Vitals : le guide complet 2026

Les Core Web Vitals (CWV) sont l'ensemble de métriques de Google qui mesurent l'expérience réelle des utilisateurs : vitesse de chargement, réactivité de l'interface et stabilité visuelle. Depuis mai 2021, elles font partie de Page Experience et entrent dans le calcul du classement.

Les trois métriques sont évaluées par URL : de bons scores sur votre page d'accueil ne profiteront pas aux pages produits. Google s'appuie sur le Chrome UX Report (utilisateurs réels), et non sur des simulations en laboratoire.

zoom_in

Qu'est-ce que les Core Web Vitals

Historique : du FID à l'INP

Google a introduit les Core Web Vitals en 2020 avec trois métriques : le LCP, le FID (First Input Delay) et le CLS. Le FID mesurait le délai du premier clic ou tap : utile, mais il ne couvrait qu'une partie de l'interactivité de la page.

LCP – Largest Contentful Paint

Le LCP enregistre le moment où le plus grand bloc de contenu visible de la page est entièrement affiché. Il s'agit généralement d'une image principale, de l'image de couverture d'un article ou d'un grand titre H1.

Causes courantes d'un LCP lent

• TTFB lent (serveur, CDN, absence de cache) : jusqu'à 40 % du temps de LCP
• Image principale non priorisée : attribut fetchpriority="high" absent
• Image principale non préchargée (<link rel="preload">)
• CSS et JS bloquants qui retardent le premier affichage
• Images trop lourdes : pas de WebP ni d'AVIF, pas de srcset
• Élément LCP généré par JavaScript (rendu SSR React pas encore terminé au moment du LCP)

<!-- Prioritise the LCP image -->
<link rel="preload" as="image" href="/hero.webp" fetchpriority="high" />

<img
  src="/hero.webp"
  alt="Hero"
  fetchpriority="high"
  loading="eager"
  decoding="async"
  width="1280"
  height="720"
/>

INP – Interaction to Next Paint

INP mesure le délai entre une interaction de l'utilisateur (clic, frappe au clavier, tap) et l'affichage visuel suivant de la page. Contrairement au FID, l'INP prend en compte toutes les interactions de la session et retient le pire cas, après écrêtage des valeurs aberrantes.

Ce qui dégrade l'INP

• Les Long Tasks de plus de 50 ms bloquent le thread principal : le navigateur ne peut pas traiter les entrées
• Gestionnaires d'événements lourds : setState synchrone dans React, mises à jour massives du DOM
• Absence de scheduler.yield() ou de setTimeout(0) pour découper les longues tâches
• Scripts tiers (chat, publicité, analytics) qui occupent le thread principal
• Animations pilotées par JavaScript au lieu de transform et opacity en CSS

// Breaking up a Long Task with scheduler.yield()
async function processLargeList(items) {
  for (let i = 0; i < items.length; i++) {
    processItem(items[i]);
    // Yield to the main thread every 50 items
    if (i % 50 === 0) {
      await scheduler.yield();
    }
  }
}

CLS – Cumulative Layout Shift

Le CLS est une métrique sans unité qui décrit le décalage imprévu total des éléments de la page. Formule : fraction d'impact × fraction de distance. Le déplacement d'un bouton sur lequel on vient de cliquer ne compte pas : seuls comptent les éléments qui bougent sans action de l'utilisateur.

Principales sources de CLS

• Images sans attributs width et height : le navigateur ne connaît pas leur taille avant le chargement
• Polices web sans font-display: optional ou swap : le FOUT fait bouger le texte
• Bannières et bandeaux (cookies) injectés dynamiquement en haut de page
• Animations CSS qui modifient top, left ou margin au lieu de transform
• Publicités sans espace réservé (min-height sur le conteneur)

/* Reserve space for an ad slot */
.ad-container {
  min-height: 250px;
  width: 100%;
}

/* Animation without CLS: transform and opacity only */
.card:hover {
  transform: translateY(-4px);
  /* Wrong: margin-top: -4px — this shifts layout */
}

Impact sur le classement

Google confirme que les CWV font partie des signaux Page Experience pris en compte dans le classement. Mais c'est un critère départageant, et non le facteur principal. Une page au contenu solide et aux mauvais CWV devancera une page aux excellents CWV mais au contenu faible.

L'effet indirect pèse davantage : des pages rapides réduisent le taux de rebond, augmentent la profondeur de session et la conversion. L'argument économique en faveur des CWV est plus fort que l'argument SEO. Amazon a constaté : +100 ms de LCP = -1 % de chiffre d'affaires.

Comment mesurer les CWV

Il existe deux types de données : les données de laboratoire (simulation avec Lighthouse, WebPageTest) et les données terrain (utilisateurs réels, avec CrUX et la GSC). Google classe les pages sur la base des données terrain. Le laboratoire sert au diagnostic.

Outils de diagnostic

// web-vitals v4 — collect real CWV
import { onLCP, onINP, onCLS } from 'web-vitals';

function sendToAnalytics({ name, value, id }) {
  // Send to GA4
  gtag('event', name, {
    value: Math.round(name === 'CLS' ? value * 1000 : value),
    metric_id: id,
    metric_delta: value,
  });
}

onLCP(sendToAnalytics);
onINP(sendToAnalytics);
onCLS(sendToAnalytics);

Liste d'optimisation

zoom_in

LCP

• Ajoutez fetchpriority="high" et supprimez loading="lazy" sur l'image principale
• Ajoutez <link rel="preload" as="image"> pour l'image principale dans le <head>
• Convertissez les images en WebP ou en AVIF, et configurez srcset
• Ramenez le TTFB à 800 ms maximum : CDN, cache, Edge SSR
• Supprimez les scripts bloquants du <head> (async, defer, module)
• Définissez Cache-Control: max-age=31536000 pour les ressources statiques

INP

• Profilez les Long Tasks dans Chrome DevTools → Performance → Main Thread
• Découpez les tâches de plus de 50 ms avec scheduler.yield() ou setTimeout(0)
• Temporisez (debounce) les gestionnaires input et scroll (16 à 100 ms)
• Optimisez React : useMemo, useCallback, React.memo, virtualisation des listes
• Déplacez les scripts tiers vers des Web Workers ou chargez-les après le LCP
• Animations CSS : transform et opacity uniquement

CLS

• Définissez width et height sur tous les <img> : le navigateur réserve l'espace
• Utilisez aspect-ratio pour les conteneurs dont les dimensions sont inconnues
• Configurez font-display: optional pour les polices critiques
• Réservez un min-height pour les emplacements publicitaires et les contenus dynamiques
• Placez les avis (cookies, bandeaux) en bas de page, et non en haut
• Vérifiez le FOUT : une police sans repli fait bouger le texte au chargement