Edouard Dorier Portfolio

With the constant evolution of web performance requirements, Core Web Vitals have become key indicators for measuring user experience. Google considers them for SEO, but more importantly, they have a direct impact on the perceived usability for your users.

In this article, you'll learn how to effectively optimize FCP, LCP, CLS, and FID using the React / Next.js stack, with concrete best practices to boost your Lighthouse score and overall user perception.

🧠 Core Web Vitals: What Are They?

• FCP (First Contentful Paint): Time to first render of content (text, image, etc.)
• LCP (Largest Contentful Paint): Time to render the largest visible element
• CLS (Cumulative Layout Shift): Visual stability, avoids layout shifts
• FID (First Input Delay) / INP: Delay between user interaction and response

⚙️ 1. Structuring Your Project for Performance

• Use Static Site Generation (SSG) with getStaticProps and getStaticPaths
• Enable native image optimization with <Image />
• Load fonts via next/font:

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

⚡ 2. Optimizing FCP and LCP

• Preload above-the-fold content
• Minimize initial JS
• Use priority for critical images:

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

• Avoid animated loaders, prefer direct rendering or skeletons
• Enable HTTP/2 on your hosting to parallelize loading

📐 3. Reducing CLS (Layout Stability)

• Reserve space for images:

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

• Use placeholders for any content loaded asynchronously
• Avoid unexpected dynamic injections (ads, iframes)
• For dynamic modals/menus, use smooth CSS animations

⚡ 4. Improving FID / INP (Interactivity)

• Split large components with dynamic import:

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

• Avoid onClick on <div> or <span>: use <button> or <a>
• Preload critical handlers to avoid blocking first interaction
• Don’t overload the main thread with unnecessary JS on initial render

🛠️ 5. Monitor Your Metrics in Production

• Use reportWebVitals:

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

• Analyze with:

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

✅ Summary

Vitals	What to Optimize
FCP	Preloading, optimized fonts, minimal rendering
LCP	Optimized hero image, smart lazy loading
CLS	Space reservation, smooth transitions
FID/INP	Lightweight JS, accessible interactions, lazy JS

📦 Useful Tools

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

🎯 Conclusion

Optimizing Core Web Vitals isn't just about achieving a good Lighthouse score. It’s about delivering a smooth, fast, and stable user experience, which drives better conversion, retention, and SEO.

With Next.js and React, the tools are already available — it’s up to you to apply best practices right from the start of your project!