Core Web Vitals + Measurement

Your Lighthouse score is 98 but Google Search Console shows "Poor" Core Web Vitals. Your site dropped in rankings and you don't know why.

Here's the disconnect: Lighthouse measures lab data (synthetic tests), but Google ranks based on field data (real users over 28 days). That 98 score means nothing if your actual users on 3G mobile are experiencing 4-second LCP. Time to measure what actually matters.

Outcome

Vitals instrumentation with Vercel Speed Insights or custom reporting. Track LCP < 2.5s, INP < 200ms, CLS < 0.1 targets. Real user data (not synthetic Lighthouse scores) informs performance improvements.

Fast Track

1. Add @vercel/speed-insights for real-time Core Web Vitals tracking.
2. Monitor LCP (loading), INP (interactivity), CLS (visual stability) in production.
3. Use field data (real user measurements) to identify bottlenecks - Google only ranks based on real user data, not lab data (synthetic measurements from testing tools like Lighthouse).

Hands-On Exercise 3.6

Requirements:

1. Install @vercel/speed-insights and @vercel/analytics for real-time vitals tracking.
2. Capture LCP (Largest Contentful Paint), INP (Interaction to Next Paint), CLS (Cumulative Layout Shift).
3. Set up custom reporting endpoint to log vitals to your analytics system.
4. Document thresholds: LCP < 2.5s, INP < 200ms, CLS < 0.1.
5. Track improvements after image/font/rendering optimizations.

Implementation hints:

• Google uses field data only for ranking - real user data from Chrome over 28-day window.
• Field data = 75th percentile of users over last 28 days.
• Lighthouse scores don't affect SEO - only real user Core Web Vitals do.
• Vercel Speed Insights shows real-time data - Google takes 28 days to reflect changes.
• Core Web Vitals are UX metrics - use them to debug performance issues, not just chase rankings.
• Mobile and desktop tracked separately.
• Only "sufficiently popular" and "publicly discoverable" pages tracked by Google.

Try It

1. Monitor real-time vitals:

   • Deploy to Vercel with Speed Insights enabled.
   • Visit production site, interact with page.
   • Check Vercel dashboard for LCP, INP, CLS metrics.

2. Test vitals locally:

   • Open DevTools Console, look for web-vitals logs.
   • Use Lighthouse Performance tab for lab data (not used for ranking).
   • Compare field data (real users) vs lab data (synthetic).

3. Verify tracking:

   • Trigger interaction (click, type) and verify INP captured.
   • Scroll page and verify CLS remains < 0.1.
   • Check LCP element in Performance tab - should be hero image or main content.

<context>
I'm measuring Core Web Vitals for my Next.js app and need to identify and fix performance issues.
I have access to: [Lighthouse reports, Vercel Speed Insights, Chrome DevTools, PageSpeed Insights]
My current scores: [paste your LCP, INP, CLS values]
</context>
 
<current-metrics>
Report your Core Web Vitals measurements:
- **LCP (Largest Contentful Paint):** [value] ms - Target: < 2500ms
- **INP (Interaction to Next Paint):** [value] ms - Target: < 200ms
- **CLS (Cumulative Layout Shift):** [value] - Target: < 0.1
- **Device tested:** [Desktop, Mobile, or both]
- **Measurement source:** [Lighthouse, PageSpeed Insights, Speed Insights, Chrome DevTools]
</current-metrics>
 
<lcp-analysis>
If LCP is poor (> 2500ms):
- What is the LCP element? [Hero image, text block, video, etc.]
- Image size and format: [e.g., 2MB JPEG, 500KB PNG]
- Image loading: [Does it use next/image with priority prop?]
- Server response time (TTFB): [Check Network tab]
- Blocking resources: [Large JavaScript bundles, render-blocking CSS]
</lcp-analysis>
 
<inp-analysis>
If INP is poor (> 200ms):
- What interaction is slow? [Button click, form input, navigation]
- JavaScript bundle size: [Check bundle analyzer or Network tab]
- Third-party scripts: [Analytics, chat widgets, ad scripts]
- Long tasks: [Check Performance tab for tasks > 50ms]
- Client-side rendering: [Heavy React re-renders, large state updates]
</inp-analysis>
 
<cls-analysis>
If CLS is poor (> 0.1):
- What elements shift? [Images, ads, fonts, injected content]
- Images without dimensions: [Missing width/height on Image component]
- Font loading: [FOIT/FOUT causing text reflow]
- Dynamic content: [Banners, popups injected after page load]
- Layout reserved space: [Skeleton screens, placeholders]
</cls-analysis>
 
<questions>
1. **Root cause:** Which specific element or resource is causing the poor metric?
2. **Quick wins:** What's the highest-impact fix I can implement first?
3. **Next.js optimizations:** Am I using the right rendering strategy, next/image, next/font?
4. **Trade-offs:** Will fixing this metric negatively impact another metric?
5. **Measurement gap:** Why do lab scores (Lighthouse) differ from field data (real users)?
</questions>
 
<specific-scenario>
Example issue:
- LCP: 4200ms (red - very poor)
- LCP element: Hero image (1.8MB JPEG, 2400x1600)
- Current implementation: <img src="/hero.jpg" />
- No priority loading, no format optimization
 
Diagnosis:
1. **Problem:** Large unoptimized image blocking LCP
2. **Solution:** Replace with <Image priority> for preload, automatic WebP/AVIF format
3. **Expected improvement:** LCP reduces to < 2000ms with optimized formats and preloading
</specific-scenario>
 
Diagnose my Core Web Vitals issues and provide specific Next.js optimizations with implementation code (next/image priority, Suspense boundaries, font display strategies, width/height attributes) and expected metric improvements for each fix.

Commit & Deploy

git add -A
git commit -m "feat(advanced): add core web vitals measurement"
git push -u origin feat/advanced-vitals

Done-When

• instrumentation-client.ts exists in apps/web/src/ and imports registerWebVitals
• Open DevTools Console on any page: see "LCP:", "INP:", and "CLS:" log entries with numeric values
• LCP value logged is < 2500ms (green zone) or identifies specific improvement needed
• INP value logged is < 200ms after clicking a button or typing in an input
• CLS value logged is < 0.1 after page fully loads and stabilizes
• Open Vercel dashboard → Speed Insights: see real user Core Web Vitals data appearing
• Run Lighthouse in DevTools → Performance tab: LCP element identified in "Largest Contentful Paint element" section

Solution

import { SpeedInsights } from '@vercel/speed-insights/next'
import { Analytics } from '@vercel/analytics/react'
 
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Analytics />
        <SpeedInsights />
      </body>
    </html>
  )
}

import { onCLS, onINP, onLCP } from 'web-vitals'
 
export function registerWebVitals() {
  onLCP((metric) => {
    console.log('LCP:', metric.value, 'ms', 'Target: <2500ms')
    sendToAnalytics(metric)
  })
 
  onINP((metric) => {
    console.log('INP:', metric.value, 'ms', 'Target: <200ms')
    sendToAnalytics(metric)
  })
 
  onCLS((metric) => {
    console.log('CLS:', metric.value, 'Target: <0.1')
    sendToAnalytics(metric)
  })
}
 
function sendToAnalytics(metric: any) {
  const { id, name, value, rating } = metric
 
  // Send to your analytics endpoint
  fetch('/api/analytics/vitals', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      id,
      name,
      value,
      rating,
      url: window.location.pathname,
      timestamp: Date.now(),
    }),
  }).catch((error) => {
    console.error('Failed to send vitals:', error)
  })
}

import { registerWebVitals } from './lib/web-vitals'
 
// Initialize web vitals tracking before React hydration
// This ensures we capture metrics from the earliest possible moment
registerWebVitals()

import { NextResponse } from 'next/server'
 
export async function POST(request: Request) {
  try {
    const vitals = await request.json()
 
    // Log to your analytics system (e.g., database, external service)
    console.log('Core Web Vitals:', vitals)
 
    // Store in database or forward to analytics service
    // await db.vitals.create({ data: vitals })
 
    return NextResponse.json({ success: true })
  } catch (error) {
    return NextResponse.json({ error: 'Failed to record vitals' }, { status: 500 })
  }
}

pnpm add @vercel/speed-insights @vercel/analytics web-vitals

References

• https://nextjs.org/docs/app/building-your-application/optimizing/analytics
• https://nextjs.org/docs/app/api-reference/file-conventions/instrumentation-client
• https://web.dev/vitals/