Core Web Vitals Checker for Next.js
The same real Lighthouse check, with what each metric usually points to in a Next.js app specifically — not generic web-perf advice.
Not on Next.js? Use the general version.
FAQ
My LCP is bad — what's usually the cause in Next.js?
Most often it's an above-the-fold image not using next/image, or one that is but is missing the priority prop — without it, Next.js lazy-loads the image by default, which delays the largest contentful paint. Check the hero/banner image first.
My CLS is bad — what's usually the cause in Next.js?
Web fonts loaded without next/font are the most common culprit — the fallback font renders first, then swaps to the real one and reflows the page. next/font (or next/font/google) eliminates that shift by inlining font metrics at build time. Images without explicit width/height (or fill inside a sized container) are the second most common cause.
My INP is bad — what's usually the cause in Next.js?
Large client-side JavaScript bundles delaying hydration is the usual suspect — check for client components that could be server components instead (App Router), or heavy third-party scripts loaded without next/script's defer/lazyOnload strategies.
My TTFB is bad — what's usually the cause in Next.js?
On serverless hosting, a cold start on the function serving that route is common. If the page doesn't need per-request data, static generation or ISR (revalidate) avoids hitting the function at all for most requests.
Is this a real Lighthouse run or an estimate?
A real run, on Google's own infrastructure, via the PageSpeed Insights API — the same engine behind Chrome DevTools' Lighthouse tab.