Les Core Web Vitals sont le cadre de Google pour mesurer l'expérience réelle de la page, et constituent un facteur de classement confirmé. Next.js vous donne une avance significative par rapport à la plupart des frameworks, mais un site Next.js mal configuré peut encore échouer sur ces métriques. Voici un guide pratique pour diagnostiquer et corriger chacune d'elles.
Étape 1 : Mesurez avant de Corriger
Avant de changer quoi que ce soit, obtenez des mesures de référence précises. Il existe deux types de données CWV :
Données de terrain (mesures d'utilisateurs réels) — Disponibles dans Google Search Console sous "Core Web Vitals" et dans PageSpeed Insights sous "Découvrez ce que vivent vos utilisateurs réels". C'est ce que Google utilise pour le classement. Cela nécessite suffisamment de trafic pour générer une signification statistique.
Données de laboratoire — Disponibles dans Lighthouse (Chrome DevTools → onglet Lighthouse) et PageSpeed Insights. Utiles pour le développement, mais Google ne les utilise pas pour ses décisions de classement.
Corrigez toujours en vous basant sur les données de terrain quand elles sont disponibles. Les scores de laboratoire peuvent être trompeurs — une page peut obtenir 100 sur Lighthouse et pourtant avoir un INP de terrain médiocre s'il y a beaucoup de JavaScript côté client.
Étape 2 : Corriger le LCP (Largest Contentful Paint)
Le LCP doit être inférieur à 2,5 secondes. Les causes les plus fréquentes sur les sites Next.js :
Les images hero qui chargent trop tard. Chaque image hero devrait utiliser la prop priority sur next/image. Cela indique à Next.js de précharger l'image et de ne pas la charger en différé :
<Image src="/hero.webp" alt="Hero" width={1200} height={600} priority />
Mauvais format d'image. next/image sert automatiquement du WebP et de l'AVIF, mais uniquement si vous utilisez le composant. Si vous avez des balises <img> quelque part — vérifiez vos moteurs de rendu Markdown et composants tiers — ces images ne seront pas optimisées.
Réponse serveur lente (TTFB). Sur Vercel, le TTFB devrait être inférieur à 200 ms. S'il est plus élevé, vérifiez si vous faites des appels base de données lents dans generateStaticParams ou des composants de layout. Préférez la génération statique au rendu côté serveur pour les pages dont le contenu change peu.
Polices bloquant le rendu. Ajoutez display: "swap" à tous les imports Google Fonts dans Next.js :
const inter = Inter({ subsets: ["latin"], display: "swap" });
Étape 3 : Corriger le CLS (Cumulative Layout Shift)
Le CLS doit être inférieur à 0,1. Les causes les plus fréquentes sur les sites Next.js :
Images sans dimensions explicites. Fournissez toujours width et height à next/image. Le composant les utilise pour réserver l'espace avant le chargement de l'image, évitant ainsi le décalage de mise en page.
Polices web causant du FOUT. Utilisez font-display: swap (géré automatiquement par next/font/google) et établissez une préconnexion vers les origines des polices. Évitez de charger des polices depuis des CDN non préconnectés.
Bannières ou notices de cookies injectées dynamiquement. Si une bannière de cookies ou une notification apparaît au-dessus du contenu après le chargement de la page, elle pousse le contenu vers le bas et génère du CLS. Réservez l'espace dans votre layout, ou utilisez un positionnement fixe pour qu'elle se superpose plutôt qu'elle ne déplace le contenu.
Étape 4 : Corriger l'INP (Interaction to Next Paint)
L'INP doit être inférieur à 200 ms. Il a remplacé le FID en 2024 et est le CWV le plus difficile à corriger car il mesure l'interactivité tout au long du cycle de vie de la page, pas seulement au chargement.
Composants client lourds. Dans l'App Router de Next.js, les composants qui n'ont pas besoin d'interactivité devraient être des composants serveur. "use client" ne devrait apparaître que lorsque vous avez réellement besoin des API du navigateur, de gestionnaires d'événements, ou de hooks. Des composants client inutiles augmentent le bundle JavaScript qui doit être analysé et exécuté.
Bloquer le thread principal. Les gros bundles JavaScript exécutés de façon synchrone bloquent les interactions utilisateur. Utilisez des imports dynamiques pour les composants lourds :
const HeavyComponent = dynamic(() => import("./HeavyComponent"), { ssr: false });
Scripts tiers. Analytics, widgets de chat et scripts publicitaires sont une source fréquente de problèmes d'INP. Chargez-les avec next/script en utilisant strategy="afterInteractive" ou strategy="lazyOnload" pour différer leur exécution jusqu'à ce que la page soit interactive.
Étape 5 : le Suivi Après Correction
Les corrections n'apparaissent pas immédiatement dans les données de terrain. Les données CrUX de Google (qui alimentent Search Console et les données de terrain de PageSpeed Insights) ont une fenêtre glissante de 28 jours. Attendez-vous à patienter 4 à 6 semaines après le déploiement des corrections avant de voir les données de terrain s'améliorer.
Pendant cette fenêtre, suivez les scores de laboratoire pour confirmer que les corrections fonctionnent. Configurez Vercel Analytics pour surveiller en continu les Core Web Vitals des utilisateurs réels — cela révèle des problèmes d'INP que les outils de laboratoire manquent.
Une fois que les données de terrain rattrapent leur retard, vous devriez observer des améliorations corrélées dans le classement organique, en particulier pour les pages auparavant dans la zone "à améliorer" ou "médiocre". Associez ce travail aux autres points de notre checklist SEO technique — les Core Web Vitals ne sont qu'un des 20 facteurs qui déterminent votre classement.
Le Raccourci : Bien Construire Dès le Départ
Chaque étape de ce guide existe parce que le site n'a pas été construit avec ces considérations dès le départ. L'approche la plus rentable consiste à construire sur une fondation Next.js correctement configurée qui démarre avec des Core Web Vitals au vert. Ces améliorations ont aussi un impact business direct au-delà du classement — les données sur la vitesse du site et le taux de conversion montrent exactement à quel point c'est mesurable.
Notre service de conception et développement web inclut le SEO technique et l'optimisation des Core Web Vitals par défaut sur chaque projet. Si vous voulez savoir où en est votre site actuel, un audit gratuit vous montrera précisément quelles métriques affectent votre classement.
Prêt à développer votre activité en ligne ? Obtenez votre audit gratuit →