The BitPixel Guide to Web Performance: Core Web Vitals in 2025

Why Performance Is Non-Negotiable in 2025

Google made it official: Core Web Vitals are a ranking signal. But beyond SEO, performance is a direct driver of conversion rate. Amazon famously found that every 100ms of latency costs 1% in revenue. For a $1M ARR business, that's $10,000 per 100ms.

Performance isn't a nice-to-have. It's a product requirement.

The Three Metrics That Matter

LCP — Largest Contentful Paint

What it is: The time until the largest visible element (usually a hero image or headline) is rendered.

Good score: Under 2.5 seconds

The most common culprit: Unoptimized hero images.

The fix:

// ❌ Bad: regular img tag, no optimization
<img src="/hero.jpg" alt="Hero" />

// ✅ Good: Next.js Image with priority flag
import Image from "next/image";

<Image
  src="/hero.jpg"
  alt="Hero"
  width={1200}
  height={630}
  priority // preloads the image — critical for above-the-fold content
  placeholder="blur"
  blurDataURL="data:image/jpeg;base64,..."
/>

INP — Interaction to Next Paint

What it is: How quickly the page responds to user interactions (clicks, taps, key presses). This replaced FID in March 2024.

Good score: Under 200 milliseconds

The most common culprit: Heavy JavaScript blocking the main thread.

The fix: Defer non-critical JS, use React.lazy() for heavy components, and break up long tasks.

// Lazy load heavy components
const HeavyChart = React.lazy(() => import("./HeavyChart"));

function Dashboard() {
  return (
    <Suspense fallback={<ChartSkeleton />}>
      <HeavyChart />
    </Suspense>
  );
}

CLS — Cumulative Layout Shift

What it is: How much the layout jumps around unexpectedly while the page loads.

Good score: Under 0.1

The most common culprits:

Images without explicit width and height attributes
Dynamically injected content above existing content
Web fonts causing FOUT (Flash of Unstyled Text)

The fix:

// Always set width and height on images
<Image
  src="/product.jpg"
  width={400}
  height={300} // Reserves space, prevents layout shift
  alt="Product"
/>

// Use next/font to prevent FOUT
import { GeistSans } from "geist/font/sans";
// Fonts are preloaded and swapped atomically

A Quick Performance Audit Checklist

Use this before every launch:

All images use next/image with explicit dimensions
Hero images have priority prop
Fonts loaded via next/font
No render-blocking resources in <head>
Third-party scripts use next/script with strategy="lazyOnload"
Lighthouse score > 90 on mobile
Core Web Vitals passing in PageSpeed Insights

Tools We Use

Tool	What It's For
Lighthouse (Chrome DevTools)	Overall performance audit
PageSpeed Insights	Real-world CWV data
WebPageTest	Detailed waterfall analysis
Vercel Analytics	Production CWV monitoring
Bundle Analyzer	JavaScript bundle breakdown

The Bottom Line

Performance optimization sounds complex, but 80% of wins come from three things:

Use next/image correctly for every image
Use next/font for all fonts
Don't load JavaScript you don't need

Start there. Then measure. Then optimize.

Questions about your site's performance? We do performance audits as part of our onboarding for new clients.