Core Web Vitals Guide

Core Web Vitals are Google's metrics for user experience. They directly impact search rankings and user satisfaction.

The Three Metrics

LCP — Largest Contentful Paint

What it measures: How long until the largest visible element renders.

Common causes of poor LCP:

• Slow server response time (TTFB > 800ms)
• Render-blocking CSS/JS
• Unoptimized hero images
• Client-side rendering of above-the-fold content

Fixes:

• Use Server Components (render on server)
• Preload critical resources: <link rel="preload" as="image" href="hero.webp">
• Use next/image with priority for hero images
• Inline critical CSS, defer non-critical
• Use a CDN for static assets

INP — Interaction to Next Paint

What it measures: Responsiveness — delay between user interaction and visual update. Replaced FID in March 2024.

Common causes of poor INP:

• Long JavaScript tasks blocking the main thread
• Heavy re-renders on interaction
• Synchronous operations in event handlers

Fixes:

• Break long tasks with setTimeout or requestIdleCallback
• Use useTransition for non-urgent state updates
• Debounce expensive input handlers
• Move heavy computation to Web Workers
• Use React.memo to prevent unnecessary re-renders

CLS — Cumulative Layout Shift

What it measures: Visual stability — how much the page layout shifts unexpectedly.

Common causes of poor CLS:

• Images without width/height attributes
• Dynamically injected content above existing content
• Web fonts causing text reflow (FOUT)
• Ads or embeds without reserved space

Fixes:

• Always set width and height on images (or use aspect-ratio)
• Use next/image (automatically handles dimensions)
• Use font-display: swap with size-adjusted fallback fonts
• Reserve space for dynamic content with CSS min-height
• Use transform animations instead of layout-triggering properties

Measuring Core Web Vitals

Lab Tools (Development)

• Lighthouse — Chrome DevTools > Lighthouse tab
• Chrome DevTools Performance panel — Record and analyze
• Web Vitals extension — Real-time overlay

Field Data (Real Users)

• Google Search Console — Core Web Vitals report
• CrUX Dashboard — Chrome User Experience Report
• web-vitals library — Collect in your analytics

import { onLCP, onINP, onCLS } from "web-vitals";
 
onLCP(console.log);
onINP(console.log);
onCLS(console.log);

Quick Wins Checklist

• Use next/image for all images
• Set priority on above-the-fold images
• Use Server Components for data-heavy pages
• Enable gzip/brotli compression
• Set font-display: swap on custom fonts
• Avoid layout-triggering CSS properties in animations
• Lazy load below-the-fold content