Tous les articles

Core Web Vitals — Optimiser son score en 2026

Par Marie Dupont15 mai 20269 min de lecture

LCP, CLS, INP — les métriques qui comptent pour Google et vos utilisateurs. Voici les techniques concrètes pour atteindre un score Lighthouse de 95+ sur un site Nuxt.

Un site qui rame, c'est comme un riddim qui traîne derrière le beat : ça casse l'ambiance direct. 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, pour que votre site charge aussi vite qu'un bon riddim démarre.

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.

La performance web, c'est un peu comme le tempo d'un bon morceau : personne ne le remarque quand il est bon, tout le monde le sent quand il ne l'est pas. One love et bon chargement.