Core Web Vitals 2026 : la checklist Next.js qui fait passer LCP sous 2,5 s

Les seuils CWV 2026 (rappel sans bullshit)

LCP : sous 2,5 s sur le 75e percentile mobile. CLS : sous 0,1. INP : sous 200 ms. FID est mort depuis mars 2024, ne plus jamais en parler.

Google mesure tout depuis CrUX (Chrome User Experience Report). Lighthouse en local n'est qu'une simulation : la métrique qui compte est celle des 28 derniers jours réels d'utilisateurs.

LCP : 70% des sites perdent ici (images hero)

Sur Next.js 14, le piège classique : `<Image priority />` oublié sur l'image LCP, ou pire, image hero servie en JPEG/PNG au lieu d'AVIF.

Patch : utiliser `next/image` partout, avec `priority` sur l'image visible above-the-fold uniquement, et `formats: ['image/avif', 'image/webp']` dans next.config.js.

Cloudflare Pages : activer Cloudflare Images en upstream pour avoir un CDN qui transcode à la volée. Sur 3 clients, on a fait passer le LCP de 3,8 s à 1,9 s avec juste cette config.

INP : le piège du JS non utilisé

INP mesure la latence d'interaction. Sur les sites Next.js qui hydratent des composants client lourds inutilement, l'INP explose à 400 ms+.

Audit : ouvrir DevTools > Coverage. Tout fichier JS avec plus de 60% de code non exécuté est candidat à un retrait en RSC (React Server Component).

Patch concret : tout composant marketing qui n'a pas d'interactivité doit perdre son `'use client'`. Sur notre stack, on a retiré 47 directives `'use client'` inutiles, gain INP : -180 ms en moyenne.

CLS : la police custom qui décale tout

Le fautif numéro 1 : une font chargée via Google Fonts CDN avec `font-display: swap`. Au chargement, le fallback Arial décale tous les paragraphes.

Patch : utiliser `next/font/google` ou `next/font/local` avec `display: 'swap'` et surtout `adjustFontFallback: true` (par défaut en Next 13.2+). Cela précompile un fallback dont les métriques matchent la font cible.

Pour les images sans dimensions connues, toujours passer `width` et `height` explicites, ou utiliser `fill` avec un parent en `aspect-ratio` fixe.

Cloudflare Pages : la config qui change la donne

Activer dans le dashboard Cloudflare : (1) Auto Minify JS/CSS/HTML désactivé (Next.js le fait déjà), (2) Brotli activé, (3) Early Hints activé, (4) HTTP/3 activé.

Pour les pages statiques (blog), forcer un cache long avec `Cache-Control: public, max-age=31536000, immutable` sur les assets, et `s-maxage=86400` sur les pages elles-mêmes via headers Next.

Sur make-sense.fr, l'activation Early Hints + Brotli a fait passer FCP de 1,4 s à 0,9 s sur mobile 4G.

Third-party scripts : le tueur silencieux

Calendly, Sentry, Cookiebot, GA4, Hotjar : chaque script chargé en synchrone above-the-fold ajoute 100 à 300 ms d'INP.

Règle : tous les scripts non-critiques doivent être chargés avec `next/script` en strategy `afterInteractive` ou `lazyOnload`. Calendly en particulier doit être en `lazyOnload` car son widget pèse 280 ko.

Sur la homepage make-sense.fr, on a un composant `CalendlyLazy` qui charge le script uniquement quand l'utilisateur clique sur le CTA. Gain INP : -240 ms.

Monitorer en continu, pas en one-shot

Lighthouse en CI : bien pour empêcher les régressions, mais ne reflète pas l'expérience réelle.

Setup à mettre en place : (1) GSC > Expérience > Core Web Vitals pour le rapport CrUX officiel, (2) Vercel Speed Insights ou Cloudflare Web Analytics RUM pour les données field temps réel, (3) Sentry Performance pour traquer les régressions par release.

Un Slack alert si le p75 LCP dépasse 2,8 s sur 24 h glissantes empêche les régressions de stagner pendant 28 jours.