Core Web Vitals

Definition

A set of three specific performance metrics defined by Google that directly impact a website's Search Engine Ranking.

Explain Like I'm New

Google cares about 3 things: 1. LCP (Largest Contentful Paint): How fast does the biggest image/text load? 2. FID / INP (Interaction to Next Paint): If I click a button, does the site instantly respond, or is it frozen? 3. CLS (Cumulative Layout Shift): Does the page violently jump around while images load, causing me to click the wrong button?

Real World Example

Using the `<Image>` component to solve CLS, and using Server Components to solve LCP.

Common Use Cases

•SEO optimization
•UX measurement

Interactive Example

'use client';
import { useReportWebVitals } from 'next/web-vitals';

export function WebVitalsReporter() {
  // This hook automatically calculates the exact Google Web Vitals metrics
  // as real users interact with the site!
  useReportWebVitals((metric) => {
    
    // You can send these metrics to Google Analytics, Vercel Analytics, etc.
    if (metric.name === 'LCP') {
      console.log(`Largest Contentful Paint took ${metric.value} milliseconds`);
      
      // Example: Send to custom analytics endpoint
      fetch('/api/analytics', { body: JSON.stringify(metric), method: 'POST' });
    }
  });

  return null;
}

Interview Questions

basic

Which Core Web Vital measures how visually stable a page is while it loads?

intermediate

What built-in Next.js hook allows you to measure and report Core Web Vitals to an analytics service?

Flash Cards

Question

Which vital?

Click to reveal answer

Answer

Cumulative Layout Shift (CLS).

Question

Which hook?

Click to reveal answer

Answer

`useReportWebVitals()`