Core Web Vitals Guide | BeforeMerge | BeforeMerge

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.

Rating	Value
Good	<= 2.5s
Needs improvement	2.5s - 4.0s
Poor	> 4.0s

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.

Rating	Value
Good	<= 200ms
Needs improvement	200ms - 500ms
Poor	> 500ms

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.

Rating	Value
Good	<= 0.1
Needs improvement	0.1 - 0.25
Poor	> 0.25

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