Core Web Vitals — Optimiser son score en 2026

Les Core Web Vitals ne sont plus optionnels. Depuis leur intégration dans l'algorithme de classement Google, ils impactent directement votre référencement. Voici comment les maîtriser avec Nuxt.

Les trois métriques essentielles

LCP (Largest Contentful Paint) — Temps de chargement du plus grand élément visible. Cible : < 2.5s.

CLS (Cumulative Layout Shift) — Stabilité visuelle de la page. Cible : < 0.1.

INP (Interaction to Next Paint) — Réactivité aux interactions. Cible : < 200ms.

Optimiser le LCP

Images avec <NuxtImg>

<NuxtImg
  src="/hero.jpg"
  width="1200"
  height="600"
  loading="eager"
  fetchpriority="high"
  format="webp"
/>

Toujours précharger l'image hero avec fetchpriority="high" et loading="eager".

Fonts avec nuxt.config.ts

export default defineNuxtConfig({
  app: {
    head: {
      link: [
        { rel: 'preconnect', href: 'https://fonts.googleapis.com' },
        { rel: 'preload', as: 'style', href: '...' }
      ]
    }
  }
})

Éviter le CLS

• Toujours spécifier width et height sur les images
• Éviter les éléments dont la taille dépend du contenu chargé en async
• Préférer min-height aux hauteurs dynamiques pour les blocs de contenu

Améliorer l'INP

L'INP remplace le FID depuis mars 2024. Il mesure la latence de toutes les interactions, pas seulement la première.

• Éviter les long tasks JavaScript (> 50ms)
• Utiliser requestIdleCallback pour les traitements non critiques
• Préférer les transitions CSS aux animations JS

Mesurer avec Nuxt DevTools

Nuxt DevTools intègre un panel de performance accessible via Shift + Alt + D. Il affiche les Web Vitals en temps réel pendant le développement.

Conclusion

Un score Lighthouse de 95+ est atteignable sur tout projet Nuxt bien configuré. L'essentiel : optimiser les images, précharger les fonts, et éviter les long tasks JavaScript.