Groundhog Day Performance Audit: Stop Seeing the Same Web Vitals Failures
Every year, same story: slow LCP, jittery CLS, sluggish INP. Like Groundhog Day, but for your Lighthouse score. Here's how to break the loop.
Google has been using Core Web Vitals as a ranking signal since 2021. Most sites I audit are still failing at least one of them. Here's what the metrics actually measure and where to start.
The three metrics that matter
LCP (Largest Contentful Paint) — how long until the largest visible element loads. Usually a hero image or a large text block. Google wants this under 2.5 seconds.
CLS (Cumulative Layout Shift) — how much the page shifts around while loading. Ads loading late, images without dimensions, fonts swapping — all cause CLS. Google wants this under 0.1.
INP (Interaction to Next Paint) — how quickly the page responds to user interactions. Replaced FID in March 2024. Google wants this under 200ms.
Where to measure
PageSpeed Insights (pagespeed.web.dev) gives you both lab and field data. The field data (CrUX) is what actually affects your ranking. Vercel's analytics dashboard reports on these if you have Vercel Analytics enabled. Chrome DevTools has a Performance panel for digging into specific issues.
The highest-impact fixes
LCP: Preload your hero image.
<link rel="preload" as="image" href="/hero.webp" />
If your LCP element is a Next.js <Image>, add priority prop. That's often the whole fix.
LCP: Switch hero images to WebP or AVIF. These formats are 30–50% smaller than JPEG/PNG. Next.js <Image> handles this automatically if you let it.
CLS: Set explicit width and height on all images. Without dimensions, the browser doesn't know how much space to reserve, so content shifts when the image loads. Again, Next.js <Image> handles this if you provide width and height props.
CLS: Use font-display: swap or better, preload your fonts. Font swaps cause layout shifts. If you're using Google Fonts, Next.js's next/font module handles optimization automatically.
INP: Move heavy JS off the main thread. Long tasks (anything over 50ms on the main thread) block interaction response. Split large bundles, defer non-critical scripts, and avoid heavy synchronous operations in event handlers.
The low-hanging fruit audit
- Run PageSpeed Insights on your homepage
- Look at the Opportunities and Diagnostics sections — they're ordered by impact
- Fix LCP first (usually an image issue)
- Then CLS (usually missing image dimensions or a late-loading element)
- INP issues are usually JS-related and take more investigation
Most sites can get from failing to passing on all three metrics in a focused afternoon of work. The 80/20 is real here.