Aller au contenu principal
NOW!

Optimiser les Core Web Vitals avec Next.js

Guide pratique pour atteindre un score Lighthouse supérieur à 95 avec Next.js 15 : LCP, CLS, INP et bonnes pratiques de performance web.

Les Core Web Vitals sont devenus incontournables pour le référencement et l'expérience utilisateur. Google les utilise comme signal de classement depuis 2021, et leur importance ne fait que croître. Voici comment les optimiser avec Next.js.

Les trois métriques à maîtriser

LCP — Largest Contentful Paint (< 2,5 s)

Mesure le temps d'affichage du plus grand élément visible. C'est souvent une image hero ou un titre.

Bonnes pratiques Next.js :

  • Utilisez next/image avec les formats AVIF et WebP
  • Préchargez les polices critiques avec next/font et display: swap
  • Privilégiez les Server Components pour réduire le JavaScript bloquant
  • Placez le contenu critique above the fold en HTML statique

CLS — Cumulative Layout Shift (< 0,1)

Mesure la stabilité visuelle : est-ce que la page « saute » pendant le chargement ?

Bonnes pratiques :

  • Définissez toujours width et height sur les images (next/image le fait automatiquement)
  • Réservez l'espace pour les contenus dynamiques (bannières, widgets)
  • Évitez d'injecter du contenu au-dessus du contenu déjà affiché
  • Utilisez font-display: swap avec des métriques de fallback similaires

INP — Interaction to Next Paint (< 200 ms)

Remplace le FID depuis mars 2024. Mesure la réactivité globale de la page aux interactions.

Bonnes pratiques :

  • Minimisez le JavaScript côté client (Server Components par défaut)
  • Utilisez le code splitting et les dynamic imports (next/dynamic)
  • Déportez les animations lourdes (GSAP) en lazy loading
  • Évitez les re-renders inutiles dans les Client Components

Architecture Next.js pour la performance

Notre stack chez NOW! est conçue pour la performance :

Server Components (par défaut)
  → HTML statique, zéro JS client

Client Components (uniquement si nécessaire)
  → Animations, formulaires, interactivité

Dynamic imports
  → GSAP, composants lourds chargés à la demande

next/image + next/font
  → Images et polices optimisées automatiquement

Outils de mesure

  • Lighthouse (Chrome DevTools) : audit complet en local
  • PageSpeed Insights : données terrain (utilisateurs réels)
  • Google Search Console : rapport Core Web Vitals agrégé
  • Web Vitals extension : monitoring en temps réel

Résultats concrets

En appliquant ces principes, nos projets atteignent systématiquement :

  • Score Lighthouse > 95 sur mobile et desktop
  • LCP < 1,5 seconde
  • CLS < 0,05
  • INP < 150 ms

Conclusion

La performance web n'est pas un luxe technique — c'est un avantage concurrentiel mesurable en conversions et en SEO. Notre équipe intègre ces optimisations dès la conception de chaque projet.

Création de site web performant · Audit de votre site actuel