Edouard Dorier Portfolio

Avec l’évolution constante des exigences en matière de performance web, les Core Web Vitals sont devenus des indicateurs clés pour mesurer l'expérience utilisateur. Google les prend en compte pour le SEO, mais surtout, ils ont un impact direct sur l’ergonomie perçue par vos utilisateurs.

Dans cet article, vous verrez comment optimiser efficacement FCP, LCP, CLS et FID à l’aide de la stack React / Next.js, avec des meilleures pratiques concrètes pour améliorer votre score Lighthouse et le ressenti global.

🧠 Core Web Vitals : c’est quoi ?

• FCP (First Contentful Paint) : temps avant l’affichage du premier contenu (texte, image…)
• LCP (Largest Contentful Paint) : temps de rendu du plus gros élément visible
• CLS (Cumulative Layout Shift) : stabilité visuelle, évite les sauts d’éléments
• FID (First Input Delay) / INP : délai entre l’interaction de l’utilisateur et la réponse

⚙️ 1. Structurer votre projet pour la performance

• Utilisez le rendu statique (SSG) avec getStaticProps et getStaticPaths
• Activez l’optimisation d’image native avec <Image />
• Chargez les polices via next/font :

import { Inter } from 'next/font/google'
const inter = Inter({ subsets: ['latin'] })

⚡ 2. Optimiser FCP et LCP

• Préchargez le contenu au-dessus de la ligne de flottaison
• Minimisez le JS initial
• Utilisez priority pour les images critiques :

<Image src="/hero.jpg" alt="Hero" width={800} height={600} priority />

• Évitez les loaders animés au profit de rendu direct ou "skeletons"
• Activez HTTP/2 sur votre hébergement pour paralléliser les chargements

📐 3. Réduire le CLS (stabilité de la mise en page)

• Réservez de l’espace pour les images :

<Image src="/card.jpg" alt="Card" width={300} height={200} />

• Utilisez des placeholders pour tout contenu chargé après coup
• Évitez les injections dynamiques non anticipées (publicités, iframes)
• Pour les modales/menus dynamiques, utilisez des animations CSS fluides

⚡ 4. Améliorer FID / INP (interactions)

• Divisez les gros composants avec dynamic import :

const HeavyComponent = dynamic(() => import('./HeavyComponent'), { ssr: false })

• Évitez les onClick sur <div> ou <span> : utilisez <button> ou <a>
• Préchargez les handlers critiques pour ne pas bloquer la première interaction
• Ne surchargez pas le thread principal avec du JS inutile dès le premier rendu

🛠️ 5. Surveillez vos métriques en production

• Utilisez reportWebVitals :

export function reportWebVitals(metric) {
  if (metric.name === 'LCP') {
    console.log('LCP:', metric.value)
  }
}

• Analysez avec :

  • Google PageSpeed
  • Lighthouse
  • WebPageTest
  • Chrome DevTools (Performance + Web Vitals)

✅ Récapitulatif

Vitals	À optimiser
FCP	Préchargement, polices optimisées, rendu minimal
LCP	Hero image optimisée, lazy loading intelligent
CLS	Réservation d’espace, transitions fluides
FID/INP	JS léger, interactions accessibles, lazy JS

📦 Outils utiles

• next/image
• next/font
• framer-motion
• react-intersection-observer

🎯 Conclusion

Optimiser les Core Web Vitals, ce n’est pas viser un bon score Lighthouse uniquement. C’est offrir une expérience utilisateur fluide, rapide et stable, favorisant conversion, rétention et SEO.

Avec Next.js et React, les outils sont déjà là : à vous d’appliquer les bonnes pratiques dès la conception du projet !