Core web vitals

If performance is part of your frontend workflow (and it should be), you’ve probably heard about Core Web Vitals. They’re not just metrics — they directly impact user experience and SEO.

Let’s break them down, without fluff.

📐 What are core web vitals?

Core Web Vitals are a set of metrics defined by Google to measure real-world user experience. They focus on loading, interactivity, and visual stability.

There are 3 main metrics:

🧠 Why do they matter?

• Google uses them for SEO ranking.
• Directly tied to user satisfaction.
• Poor scores = bounce, rage clicks, churn.

They’re not synthetic lab metrics — these are measured from real users in production (via Chrome UX Report or field data).

📊 The 3 core metrics explained

1. LCP – Largest contentful paint

Measures the time it takes for the largest visible element (like an image or block of text) to render.

✅ Optimize with:

• Server-side rendering (SSR)
• Image compression (e.g. next/image)
• Lazy loading below-the-fold content
• Using font-display: swap for fonts

// Next.js example
<Image src="/hero.jpg" width={800} height={400} priority />

2. FID – First input delay

Measures the time between the user’s first interaction and the browser’s response.

✅ Optimize with:

• Breaking up long JS tasks (requestIdleCallback, setTimeout)
• Using React.lazy for non-critical components
• Minimizing 3rd-party scripts (ads, trackers)

// Lazy-load modal only when needed
const Modal = React.lazy(() => import('./Modal'));

3. CLS – Cumulative layout shift

Measures unexpected layout shifts that annoy users.

✅ Optimize with:

• Always set width/height on images and videos
• Avoid layout jumps caused by fonts (e.g. FOUT)
• Don’t inject banners, ads, or iframes above content after load

img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}

🛠 Tools to measure core web vitals

• Lighthouse (Chrome DevTools)
• PageSpeed Insights (Google)
• Web Vitals extension (Chrome)
• next/web-vitals for Next.js reporting
• Real User Monitoring (RUM) tools like:
• Vercel Analytics
• Sentry Performance
• Datadog RUM

🧪 Real-world tips

• Self-host fonts and load them early.
• Keep your main thread under control — no long blocking tasks.
• Defer non-critical JS. Not everything needs to load on page 1.
• Use lazy hydration in frameworks like React/Next.js.

✅ Should you care?

Yes, if:

• You care about SEO and Google ranking.
• You’re optimizing for mobile users (especially on slow networks).
• You want happy users who don’t rage-click or abandon your app.

🧾 TL;DR

📎 Conclusions

Core Web Vitals are not just numbers — they reflect how real users experience your app. You don’t need to obsess over every millisecond, but hitting green on all three metrics should be a baseline for any modern web app.