Why Core Web Vitals Still Matter in 2025

The Lighthouse 100 Myth

Most developers treat Lighthouse scores as a vanity metric. Run the audit, screenshot the green circles, move on. But Core Web Vitals — LCP, INP, and CLS — are ranking signals that directly affect where your pages land in search results.

The difference between a 75 and a 100 isn't academic. It's the difference between page 1 and page 2.

What Actually Moves the Needle

Largest Contentful Paint (LCP)

LCP measures when the largest visible element finishes rendering. The target is under 2.5 seconds, but I aim for under 1 second. The keys:

• Server response time: If your TTFB is over 200ms, fix that first. Edge functions, CDN caching, database query optimization.
• Image optimization: Use next/image with proper sizes attributes. Serve AVIF with WebP fallback.
• Font loading: font-display: swap is table stakes. Subset your fonts. Preload the critical ones.
• Render-blocking resources: Inline critical CSS. Defer non-essential JavaScript.

Interaction to Next Paint (INP)

INP replaced FID in 2024 and it's harder to game. It measures responsiveness across all interactions, not just the first one.

// Bad: blocking the main thread
function handleClick() {
  const result = expensiveCalculation(data) // 200ms blocking
  setState(result)
}

// Better: yield to the browser
async function handleClick() {
  setState({ loading: true })
  await scheduler.yield()
  const result = expensiveCalculation(data)
  setState({ loading: false, result })
}

Cumulative Layout Shift (CLS)

CLS is the easiest to fix and the most neglected. Reserve space for async content:

• Set explicit width and height on images and videos
• Use min-height on containers that load dynamic content
• Avoid injecting content above existing content after load

The Engineering Approach

I don't "optimize for Lighthouse." I engineer systems where performance is a natural outcome of good architecture:

1. Server-render everything possible — HTML arrives ready to display
2. Stream what you can — React Server Components + Suspense boundaries
3. Lazy-load what's below the fold — but never above it
4. Measure in the field — lab scores lie; RUM data doesn't

The sites I build consistently score 95-100 across all Core Web Vitals in production — not just in a Lighthouse audit run on localhost.

Bottom Line

Performance isn't a feature you bolt on. It's an architecture decision you make on day one. If your current site struggles with Core Web Vitals, the fix probably isn't a plugin — it's a rethink of how the page is assembled.

If you're dealing with performance issues that quick fixes haven't solved, let's talk.