Diagnosing and Fixing Core Web Vitals Issues on a Next.js + Vercel Stack

Core Web Vitals problems almost never have one cause. A slow LCP might be an unoptimized hero image, a blocking font, or a slow data fetch upstream of the render — and the fix is different for each.

My process starts with real user data, not a single lab score: Vercel's own analytics and field data narrow down which pages and which metric are actually the problem before I touch any code. From there it's usually image optimization, font loading strategy, and moving data fetching earlier in the render, roughly in that order of impact.

This post walks through that diagnostic process end to end, with the specific Next.js and Vercel tools I reach for at each step.