How to Optimize Website Performance: Core Web Vitals Guide

What Are Core Web Vitals?

Core Web Vitals are Google's metrics for measuring real-world user experience on web pages. They directly impact search rankings.

The Three Metrics

LCP (Largest Contentful Paint) — How fast the main content loads

• Good: < 2.5 seconds
• Needs improvement: 2.5 - 4.0 seconds
• Poor: > 4.0 seconds

INP (Interaction to Next Paint) — How responsive the page is to user input

• Good: < 200 milliseconds
• Needs improvement: 200 - 500 milliseconds
• Poor: > 500 milliseconds

CLS (Cumulative Layout Shift) — How much the page layout shifts during loading

• Good: < 0.1
• Needs improvement: 0.1 - 0.25
• Poor: > 0.25

Optimizing LCP

1. Optimize Images

Images are the #1 cause of slow LCP. Use our image tools:

• Image Compressor — Reduce file size by 60-80%
• Image to WebP — WebP is 25-35% smaller than JPEG
• Image Resizer — Don't serve oversized images

<!-- Responsive images with modern formats -->
<picture>
  <source srcset="hero.avif" type="image/avif" />
  <source srcset="hero.webp" type="image/webp" />
  <img src="hero.jpg" alt="Hero" width="1200" height="600"
       loading="eager" fetchpriority="high" />
</picture>

2. Preload Critical Resources

<link rel="preload" href="/fonts/inter.woff2" as="font" type="font/woff2" crossorigin />
<link rel="preload" href="/hero.webp" as="image" />

3. Optimize Fonts

/* Use font-display: swap to prevent invisible text */
@font-face {
  font-family: "Inter";
  src: url("/fonts/inter.woff2") format("woff2");
  font-display: swap;
}

Optimizing CLS

1. Set Image Dimensions

<!-- Always include width and height -->
<img src="photo.jpg" width="800" height="600" alt="Photo" />

2. Reserve Space for Dynamic Content

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

3. Avoid Inserting Content Above Existing Content

Never inject banners, cookie notices, or other elements that push content down after the page has loaded.

Optimizing INP

1. Minimize JavaScript

• Code-split with dynamic imports
• Defer non-critical scripts
• Use Web Workers for heavy computation

2. Optimize Event Handlers

// ❌ Slow: heavy computation in click handler
button.addEventListener("click", () => {
  // 500ms of processing...
});

// ✅ Fast: defer heavy work
button.addEventListener("click", () => {
  requestAnimationFrame(() => {
    // Processing happens in next frame
  });
});

Measuring Performance

Tools

• Google PageSpeed Insights — Lab + field data
• Chrome DevTools Lighthouse — Local testing
• Google Search Console — Real user data
• Web Vitals Chrome Extension — Real-time metrics

Our Tools

• Website Speed Test — Quick performance check
• Image Compressor — Optimize images
• CSS Minifier — Reduce CSS size
• JavaScript Minifier — Reduce JS size
• Meta Tag Generator — Proper meta tags for SEO

Quick Wins Checklist

• Compress all images to WebP at 80-85% quality
• Add width/height to all images
• Use font-display: swap for web fonts
• Preload LCP image and critical fonts
• Lazy load below-the-fold images
• Minify CSS and JavaScript
• Enable gzip/brotli compression
• Set proper cache headers
• Use a CDN for static assets