Web Performance Optimization: Core Web Vitals and Beyond

Core Web Vitals Optimization

Improve your website's performance metrics for better user experience and SEO.

Understanding the Metrics

• LCP (Largest Contentful Paint): < 2.5s
• FID (First Input Delay): < 100ms
• CLS (Cumulative Layout Shift): < 0.1
• INP (Interaction to Next Paint): < 200ms

Optimizing LCP

<!-- Preload critical resources -->
<link rel="preload" href="/hero-image.webp" as="image">
<link rel="preload" href="/fonts/inter.woff2" as="font" crossorigin>

<!-- Optimize images -->
<img
    src="hero.webp"
    srcset="hero-400.webp 400w, hero-800.webp 800w"
    sizes="(max-width: 600px) 400px, 800px"
    loading="eager"
    fetchpriority="high"
>

Preventing CLS

/* Always set dimensions */
img, video {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
}

/* Reserve space for dynamic content */
.ad-container {
    min-height: 250px;
}

/* Use transform for animations */
.animate {
    transform: translateX(0);
    /* NOT: left: 0; */
}

Improving INP

// Break up long tasks
function processLargeArray(items) {
    const chunk = items.splice(0, 100);
    chunk.forEach(process);

    if (items.length > 0) {
        requestIdleCallback(() => processLargeArray(items));
    }
}

// Use web workers for heavy computation
const worker = new Worker('heavy-task.js');
worker.postMessage(data);
worker.onmessage = (e) => updateUI(e.data);

Resource Hints

<link rel="dns-prefetch" href="//api.example.com">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="prefetch" href="/next-page.html">

Monitor your Core Web Vitals with Lighthouse and Chrome DevTools.