Comment optimiser ses Core Web Vitals en 2026 — guide technique complet

Les trois seuils restent identiques : INP ≤ 200 ms, LCP ≤ 2,5 s, CLS ≤ 0,1, mesurés au 75e percentile des données terrain (CrUX). Ce qui a changé, c'est l'exigence de Google :

Lighthouse 13 (Chrome 143, oct. 2025) a consolidé ses audits en « Performance Insights ». Seules les données terrain (CrUX) comptent pour le ranking — les scores lab servent au diagnostic, pas au classement.

INP mesure le cycle complet de toutes les interactions (clics, taps, clavier) — pas seulement la première comme l'ancien FID. Il se décompose en 3 phases :

• Input Delay — réduire avec defer/async sur les scripts, requestIdleCallback pour le travail non critique
• Processing Duration — découper les longues tâches avec scheduler.yield(), utiliser requestAnimationFrame pour les mises à jour DOM
• Presentation Delay — DOM < 1 500 éléments, content-visibility: auto, CSS contain: layout

Code — scheduler.yield() pour découper les tâches longues :

async function processLargeDataset(items) {
  const chunks = chunkArray(items, 50);
  for (const chunk of chunks) {
    chunk.forEach(item => heavyTransform(item));
    await scheduler.yield();
  }
}

En React : startTransition et useDeferredValue pour les mises à jour non urgentes. En Vue : v-memo. En Angular : @defer.

Benchmark réel : QuintoAndar a réduit son INP de 80 % et observé +36 % de conversions.

72 % des pages ont une image comme élément LCP. Les 5 fixes les plus impactants :

1. <link rel="preload" as="image" href="/hero.webp" fetchpriority="high"> — économise 200-800 ms
2. Formats AVIF/WebP avec <picture> et fallback JPEG
3. JAMAIS loading="lazy" sur l'image LCP — 16-17 % des sites font encore cette erreur
4. CSS critique inline + preconnect pour les CDN
5. SSR/SSG pour les SPA — Next.js Server Components, Astro, Qwik

Cible TTFB : < 200 ms (gold standard). Préchargement des polices avec font-display: swap et métriques de fallback ajustées (size-adjust, ascent-override).

Les 4 règles d'or du CLS :

• Dimensions explicites (width, height, aspect-ratio) sur tous les médias
• Ajustement des métriques de polices fallback (size-adjust, ascent-override, descent-override)
• Espace réservé pour les bannières cookies (position: fixed, min-height)
• Animations uniquement sur transform et opacity — jamais height/width/top

Benchmark : Rakuten 24 a corrigé son CLS et observé +53 % de revenu par visiteur. Les sites passant les 3 CWV ont en moyenne 24 % de taux de rebond en moins.

Code — monitoring INP en production :

import { onINP } from 'web-vitals/attribution';
onINP((metric) => {
  navigator.sendBeacon('/api/analytics', JSON.stringify({
    metric: 'INP', value: metric.value,
    inputDelay: metric.attribution.inputDelay,
    processing: metric.attribution.processingDuration,
    presentation: metric.attribution.presentationDelay,
  }));
});

Seuils d'alerte recommandés : INP > 160 ms, LCP > 2,0 s, CLS > 0,08. Comptez 4 à 6 semaines pour voir les améliorations dans Search Console, 2 à 3 mois pour l'impact ranking.