SEO & Référencement

Core Web Vitals : Le guide ultime d'optimisation avec Next.js

27 janvier 20257 min de lecturePar Ahmad Al-Kardali

Core Web Vitals : Le guide ultime d'optimisation avec Next.js

Depuis 2021, Google ne classe plus seulement les sites selon leur contenu, mais aussi selon leur "expérience utilisateur". C'est ce qu'ils appellent les Core Web Vitals.

Si vous échouez à ces tests, votre référencement en souffre. Peu importe la qualité de vos textes.

La bonne nouvelle ? Next.js est conçu spécifiquement pour exceller sur ces métriques. Voici comment.

Les 3 métriques clés

LCP (Largest Contentful Paint) : Vitesse de chargement. Combien de temps pour voir l'élément principal (souvent une image ou un titre) ? Cible : < 2.5s.
INP (Interaction to Next Paint) : Réactivité. Le site réagit-il vite quand je clique ? Remplace le FID depuis 2024. Cible : < 200ms.
CLS (Cumulative Layout Shift) : Stabilité visuelle. La page "saute"-t-elle pendant le chargement ? Cible : < 0.1.

1. Optimiser le LCP (Vitesse)

Le coupable n°1 d'un mauvais LCP est presque toujours une image non optimisée.

Avec Next.js : Le composant <Image />

N'utilisez jamais la balise <img> standard pour vos images importantes. Le composant next/image fait le travail difficile pour vous :

import Image from 'next/image'
import heroImage from './hero.jpg'

export default function Hero() {
  return (
    <Image
      src={heroImage}
      alt="Hero"
      priority // CRUCIAL pour le LCP
      sizes="(max-width: 768px) 100vw, 50vw"
      placeholder="blur" // Effet de chargement sympa
    />
  )
}

La prop priority dit à Next.js : "Cette image est la plus importante, charge-la en premier, avant même le CSS si possible". Sans ça, le navigateur la chargerait paresseusement (lazy loading), ce qui tuerait votre score LCP.

2. Optimiser le CLS (Stabilité)

Vous avez déjà essayé de cliquer sur un bouton et une pub est apparue juste au-dessus, faisant décaler tout le contenu ? C'est un mauvais CLS.

Le problème des polices d'écriture (Fonts)

Souvent, le texte s'affiche avec une police système, puis "saute" quand la belle Google Font est chargée.

La solution Next.js : next/font

import { Inter } from 'next/font/google'

const inter = Inter({ subsets: ['latin'] })

export default function RootLayout({ children }) {
  return (
    <html lang="fr" className={inter.className}>
      <body>{children}</body>
    </html>
  )
}

next/font télécharge la police au moment du build et l'héberge avec votre site (plus de requête vers Google Fonts). Mieux encore, il utilise size-adjust pour que la police système prenne exactement la même place que la police finale. Résultat : zéro décalage visuel (CLS = 0).

Le problème des images sans dimension

Si vous ne spécifiez pas width et height, le navigateur ne sait pas quelle place réserver. Quand l'image arrive, elle pousse tout le texte. Le composant <Image /> de Next.js oblige à définir ces dimensions (ou utilise un ratio pour les images responsive), éliminant ce problème.

3. Optimiser le INP (Réactivité)

Le INP mesure la frustration : "J'ai cliqué, mais rien ne se passe". C'est souvent causé par un gros script JavaScript qui bloque le fil principal (Main Thread).

La solution : <Script /> et les Server Components

Moins vous envoyez de JavaScript, meilleur sera votre INP. C'est là que les Server Components brillent. En gardant la logique lourde sur le serveur, le navigateur a moins de travail.

Pour les scripts tiers (Google Analytics, Chatbots, Pixels Facebook), utilisez le composant <Script /> avec une stratégie intelligente :

import Script from 'next/script'

// Charge Google Analytics seulement quand le navigateur est au repos
<Script
  src="https://www.googletagmanager.com/gtag/js?id=..."
  strategy="lazyOnload"
/>

// Charge le chat support seulement après que tout soit fini
<Script
  src="https://chat.service.com/widget.js"
  strategy="worker" // (Expérimental) Charge dans un Web Worker
/>

Monitorer en temps réel

N'attendez pas le rapport Search Console. Utilisez Vercel Speed Insights.

Installez le package : npm i @vercel/speed-insights

Ajoutez-le à votre layout :

import { SpeedInsights } from "@vercel/speed-insights/next"

export default function Layout({ children }) {
  return (
    <html lang="fr">
      <body>
        {children}
        <SpeedInsights />
      </body>
    </html>
  )
}

Vous aurez des données réelles (Real User Monitoring) basées sur vos vrais visiteurs, pas juste une simulation Lighthouse.

Conclusion

Optimiser les Core Web Vitals peut sembler technique, mais avec Next.js, 80% du travail est fait par le framework :

Images optimisées automatiquement
Polices stables sans layout shift
Code splitting automatique
Server Components pour réduire le JS

Il ne vous reste qu'à utiliser les bons composants (<Image>, <Script>, next/font) et à surveiller vos métriques. C'est l'investissement le plus rentable pour votre SEO technique en 2025.

Tags :#Core Web Vitals#Next.js#SEO#Performance#Google

Besoin d'aide ?