Core Web Vitals : les trois chiffres que mesure Google

Les Core Web Vitals sont un signal de classement confirmé et, plus important encore, un facteur de conversion. Le trio actuel :

• LCP (Largest Contentful Paint) : contenu principal visible en < 2,5 s. Correctif : statique/ISR, priority sur l'image hero, un minimum de CSS bloquant, un TTFB rapide (voir stratégie de rendu).
• INP (Interaction to Next Paint) : a remplacé le FID en mars 2024 ; chaque interaction doit répondre en < 200 ms. Correctif : moins de scripts tiers, chargés plus paresseusement, des bundles clients plus petits ("use client" seulement là où c'est nécessaire), découpage des tâches longues.
• CLS (Cumulative Layout Shift) : < 0,1. Correctif : dimensions sur toutes les images/embeds, place réservée aux bannières, next/font (pas de saut au changement de police).

Mesurez de deux façons :

• En laboratoire : Lighthouse dans la CI (par ex. @lhci/cli sur chaque PR) détecte les régressions avant le déploiement.
• Sur le terrain : les données de vrais utilisateurs sont ce sur quoi Google classe réellement. On les branche avec un seul hook :

// app/web-vitals.tsx
"use client";
import { useReportWebVitals } from "next/web-vitals";

export function WebVitals() {
  useReportWebVitals((metric) => {
    // envoi vers votre propre outil d'analytics
    navigator.sendBeacon("/api/vitals", JSON.stringify(metric));
  });
  return null;
}

Vous consultez les données de terrain dans la Search Console → Core Web Vitals ou dans PageSpeed Insights (qui affiche CrUX quand il y a assez de données).

Checklist :

• LCP < 2,5 s, INP < 200 ms, CLS < 0,1 dans les données de terrain, pas seulement dans Lighthouse
• Lighthouse CI ou équivalent surveille les régressions
• useReportWebVitals alimente l'analytics avec les métriques de vrais utilisateurs
• Mobile vérifié séparément : c'est là que la plupart des sites flanchent