Your Site Is Slow. Google Knows. Here's How to Fix It.

Google uses Core Web Vitals as a ranking factor. If your site is slow, you're losing positions and customers. We explain each metric and how to improve it.

LCP: Largest Contentful Paint#

Measures how long it takes to load the largest visible element. Usually the hero image or main title.

• ✅ Good: < 2.5 seconds
• ⚠️ Needs improvement: 2.5 - 4 seconds
• ❌ Bad: > 4 seconds

How to Improve LCP#

// Optimize hero image with Next.js
import Image from 'next/image';

export function Hero() {
  return (
    <Image
      src="/hero.webp"
      alt="Hero"
      width={1920}
      height={1080}
      priority // Preload the image
      sizes="100vw"
      quality={85}
    />
  );
}

INP: Interaction to Next Paint#

Measures interaction latency. Replaced FID in March 2024.

How to Improve INP#

• Break up long tasks — Use requestIdleCallback or scheduler.yield()
• Optimize event handlers — Debounce and throttle where applicable
• Reduce JavaScript — Code splitting and lazy loading
• Web Workers — Move heavy calculations off the main thread

CLS: Cumulative Layout Shift#

Measures how much content moves while loading. Those annoying jumps when you try to click and the button moves.

/* Reserve space for images */
.image-container {
  aspect-ratio: 16 / 9;
  width: 100%;
}

/* Reserve space for ads */
.ad-slot {
  min-height: 250px;
}

/* Fonts: use font-display */
@font-face {
  font-family: 'Custom';
  src: url('/font.woff2');
  font-display: swap;
}

Diagnostic Tools#

Don't optimize for Lighthouse score. Optimize for your users' real experience. Numbers are a guide, not the goal.