Core Web Vitals Optimization: A Technical Deep Dive

Introduction

Core Web Vitals are Google's metrics for measuring user experience. They directly impact search rankings and, more importantly, user satisfaction. After optimizing dozens of production sites, I've developed systematic approaches to each metric.

Understanding the Metrics

Largest Contentful Paint (LCP)

LCP measures how long it takes for the largest content element to become visible. Target: under 2.5 seconds.

// Identify LCP element
new PerformanceObserver((list) => {
  const entries = list.getEntries();
  const lastEntry = entries[entries.length - 1];
  console.log('LCP element:', lastEntry.element);
  console.log('LCP time:', lastEntry.startTime);
}).observe({ type: 'largest-contentful-paint', buffered: true });

First Input Delay (FID) / Interaction to Next Paint (INP)

FID measures responsiveness to first interaction. INP (replacing FID in 2024) measures all interactions. Target: under 100ms.

Cumulative Layout Shift (CLS)

CLS measures visual stability. Target: under 0.1.

LCP Optimization Techniques

1. Optimize Critical Resources

<!-- Preload LCP image -->
<link rel="preload" as="image" href="/hero-image.webp" fetchpriority="high">

<!-- Preconnect to critical origins -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://cdn.example.com" crossorigin>

<!-- DNS prefetch for less critical resources -->
<link rel="dns-prefetch" href="https://analytics.example.com">

2. Responsive Images with Modern Formats

function HeroImage() {
  return (
    <picture>
      {/* AVIF for best compression */}
      <source
        type="image/avif"
        srcSet="
          /hero-400.avif 400w,
          /hero-800.avif 800w,
          /hero-1200.avif 1200w,
          /hero-1600.avif 1600w
        "
        sizes="100vw"
      />
      {/* WebP fallback */}
      <source
        type="image/webp"
        srcSet="
          /hero-400.webp 400w,
          /hero-800.webp 800w,
          /hero-1200.webp 1200w,
          /hero-1600.webp 1600w
        "
        sizes="100vw"
      />
      {/* JPEG fallback for old browsers */}
      <img
        src="/hero-800.jpg"
        srcSet="
          /hero-400.jpg 400w,
          /hero-800.jpg 800w,
          /hero-1200.jpg 1200w,
          /hero-1600.jpg 1600w
        "
        sizes="100vw"
        alt="Hero image"
        width={1600}
        height={900}
        loading="eager"
        fetchpriority="high"
        decoding="async"
      />
    </picture>
  );
}

3. Font Loading Optimization

<!-- Preload critical fonts -->
<link
  rel="preload"
  href="/fonts/inter-var.woff2"
  as="font"
  type="font/woff2"
  crossorigin
>

<style>
  /* Use font-display: swap for text visibility */
  @font-face {
    font-family: 'Inter';
    src: url('/fonts/inter-var.woff2') format('woff2');
    font-display: swap;
    font-weight: 100 900;
  }

  /* Size-adjust to prevent layout shift */
  @font-face {
    font-family: 'Inter-fallback';
    src: local('Arial');
    size-adjust: 107%;
    ascent-override: 90%;
    descent-override: 22%;
    line-gap-override: 0%;
  }

  body {
    font-family: 'Inter', 'Inter-fallback', sans-serif;
  }
</style>

4. Server-Side Rendering for LCP

// Critical content should be in initial HTML
// Not loaded via JavaScript after page load

// ❌ Bad: LCP content loaded client-side
function HeroSection() {
  const [data, setData] = useState(null);
  useEffect(() => {
    fetch('/api/hero').then(r => r.json()).then(setData);
  }, []);
  
  if (!data) return <Skeleton />;
  return <Hero data={data} />;
}

// ✅ Good: LCP content in initial HTML (SSR/SSG)
// Or inline critical data
function HeroSection() {
  // Data embedded in HTML or pre-rendered
  const data = window.__INITIAL_DATA__.hero;
  return <Hero data={data} />;
}

CLS Optimization Techniques

1. Reserve Space for Dynamic Content

// Always specify dimensions for images
function ProductImage({ product }: { product: Product }) {
  return (
    <div className="aspect-[4/3] relative bg-gray-100">
      <img
        src={product.image}
        alt={product.name}
        width={400}
        height={300}
        className="absolute inset-0 w-full h-full object-cover"
        loading="lazy"
      />
    </div>
  );
}

// Reserve space for ads
function AdSlot() {
  return (
    <div 
      className="min-h-[250px] bg-gray-50"
      style={{ containIntrinsicSize: '300px 250px' }}
    >
      {/* Ad content loads here */}
    </div>
  );
}

2. Prevent Font-Induced Layout Shift

/* Use CSS containment */
.text-container {
  contain: layout style;
}

/* Match fallback font metrics */
@font-face {
  font-family: 'Custom Font';
  src: url('/font.woff2') format('woff2');
  font-display: swap;
  /* Adjust these to match your fallback font */
  ascent-override: 90%;
  descent-override: 20%;
  line-gap-override: 0%;
}

3. Stable Dynamic Content

// ❌ Bad: Content shifts when loaded
function ProductList() {
  const { products, isLoading } = useProducts();
  
  if (isLoading) return null; // Empty then content = shift
  
  return <Grid>{products.map(p => <Product key={p.id} product={p} />)}</Grid>;
}

// ✅ Good: Skeleton maintains layout
function ProductList() {
  const { products, isLoading } = useProducts();
  
  if (isLoading) {
    return (
      <Grid>
        {Array.from({ length: 12 }).map((_, i) => (
          <ProductSkeleton key={i} />
        ))}
      </Grid>
    );
  }
  
  return <Grid>{products.map(p => <Product key={p.id} product={p} />)}</Grid>;
}

function ProductSkeleton() {
  return (
    <div className="animate-pulse">
      <div className="aspect-[4/3] bg-gray-200 rounded" />
      <div className="h-4 bg-gray-200 rounded mt-2 w-3/4" />
      <div className="h-4 bg-gray-200 rounded mt-1 w-1/2" />
    </div>
  );
}

INP/FID Optimization

1. Break Up Long Tasks

// ❌ Bad: Long synchronous task blocks main thread
function processLargeDataset(data: DataItem[]) {
  return data.map(item => expensiveTransform(item));
}

// ✅ Good: Yield to main thread periodically
async function processLargeDataset(data: DataItem[]) {
  const results: TransformedItem[] = [];
  const CHUNK_SIZE = 100;
  
  for (let i = 0; i < data.length; i += CHUNK_SIZE) {
    const chunk = data.slice(i, i + CHUNK_SIZE);
    results.push(...chunk.map(expensiveTransform));
    
    // Yield to main thread
    await new Promise(resolve => setTimeout(resolve, 0));
  }
  
  return results;
}

// ✅ Better: Use scheduler API when available
async function processWithScheduler(data: DataItem[]) {
  if ('scheduler' in window) {
    return scheduler.postTask(
      () => data.map(expensiveTransform),
      { priority: 'background' }
    );
  }
  return processLargeDataset(data);
}

2. Optimize Event Handlers

// ❌ Bad: Heavy computation in click handler
function SearchButton({ onSearch }: { onSearch: (query: string) => void }) {
  const handleClick = () => {
    const results = performExpensiveSearch(); // Blocks for 200ms
    onSearch(results);
  };
  
  return <button onClick={handleClick}>Search</button>;
}

// ✅ Good: Defer heavy work, show immediate feedback
function SearchButton({ onSearch }: { onSearch: (query: string) => void }) {
  const [isSearching, setIsSearching] = useState(false);
  
  const handleClick = async () => {
    setIsSearching(true); // Immediate visual feedback
    
    // Defer heavy work
    await new Promise(resolve => setTimeout(resolve, 0));
    const results = performExpensiveSearch();
    
    setIsSearching(false);
    onSearch(results);
  };
  
  return (
    <button onClick={handleClick} disabled={isSearching}>
      {isSearching ? 'Searching...' : 'Search'}
    </button>
  );
}

3. Use Web Workers for Heavy Computation

// worker.ts
self.onmessage = (event: MessageEvent<DataItem[]>) => {
  const results = event.data.map(expensiveTransform);
  self.postMessage(results);
};

// main.ts
const worker = new Worker(new URL('./worker.ts', import.meta.url));

function processInWorker(data: DataItem[]): Promise<TransformedItem[]> {
  return new Promise((resolve) => {
    worker.onmessage = (event) => resolve(event.data);
    worker.postMessage(data);
  });
}

Measuring and Monitoring

// Real User Monitoring (RUM)
function reportWebVitals() {
  if ('web-vital' in window) return;
  
  import('web-vitals').then(({ onLCP, onFID, onCLS, onINP, onTTFB }) => {
    const sendToAnalytics = (metric: Metric) => {
      // Send to your analytics service
      fetch('/api/analytics/vitals', {
        method: 'POST',
        body: JSON.stringify({
          name: metric.name,
          value: metric.value,
          rating: metric.rating,
          delta: metric.delta,
          id: metric.id,
          navigationType: metric.navigationType,
          url: window.location.href,
          timestamp: Date.now(),
        }),
        keepalive: true,
      });
    };

    onLCP(sendToAnalytics);
    onFID(sendToAnalytics);
    onCLS(sendToAnalytics);
    onINP(sendToAnalytics);
    onTTFB(sendToAnalytics);
  });
}

Conclusion

Core Web Vitals optimization requires:

1. LCP: Optimize critical rendering path, preload resources, use modern image formats
2. CLS: Reserve space for dynamic content, optimize font loading
3. INP/FID: Break up long tasks, optimize event handlers, use Web Workers
4. Monitoring: Implement RUM to track real-world performance

Focus on the 75th percentile of your users—that's what Google measures for rankings.