Skip to main content
BitShift
Sign..In
Web DevelopmentSoftware Engineering

Web Performance: Core Web Vitals Optimization Guide

Practical techniques to improve LCP, FID, and CLS scores — the metrics that actually impact your search rankings and user experience.

Mbeah Essilfie

Mbeah Essilfie

June 21, 2026 at 06:03 AM

11 min read 1406 views
Web Performance: Core Web Vitals Optimization Guide

Why Core Web Vitals Matter

Google uses Core Web Vitals as a ranking signal. But more importantly — they correlate directly with user experience and conversion rates.

LCP: Largest Contentful Paint (< 2.5s)

The time until the largest visible element renders.

Common culprits:

  • Unoptimized hero images
  • Render-blocking CSS/JS
  • Slow server response (TTFB)

Fixes:

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

<!-- Use modern formats with fallbacks -->
<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" />
</picture>

// nuxt.config.ts — inline critical CSS
export default defineNuxtConfig({
  experimental: {
    inlineSSRStyles: true,
  },
})

INP: Interaction to Next Paint (< 200ms)

Measures responsiveness to user interactions.

// ❌ Heavy computation blocks the main thread
function handleClick() {
  const result = expensiveCalculation(data) // 300ms
  updateUI(result)
}

// ✅ Break work into chunks
async function handleClick() {
  showLoadingState()
  // Yield to let the browser paint
  await scheduler.yield()
  const result = expensiveCalculation(data)
  updateUI(result)
}
The new scheduler.yield() API (or setTimeout(0) as fallback) lets the browser paint between heavy JS operations, dramatically improving INP.

CLS: Cumulative Layout Shift (< 0.1)

Measures unexpected layout movements.

<!-- ✅ Always set dimensions on images -->
<img src="photo.jpg" width="800" height="600" alt="..." />

<!-- ✅ Reserve space for dynamic content -->
<div class="min-h-[300px]">
  <LazyLoadedChart />
</div>

/* ✅ Prevent font swap layout shift */
@font-face {
  font-family: 'Inter';
  font-display: swap;
  size-adjust: 107%;  /* Match fallback metrics */
}

Quick Wins Checklist

  • Compress images to WebP/AVIF
  • Set explicit width/height on all images and videos
  • Preload LCP resources
  • Defer non-critical JavaScript
  • Use font-display: swap with size-adjust
  • Avoid layout shifts from dynamic content
  • Lazy load below-the-fold images
  • Use a CDN for static assets

Measuring

// Track real user metrics
import { onCLS, onINP, onLCP } from 'web-vitals'

onCLS(console.log)
onINP(console.log)
onLCP(console.log)

Performance isn't a one-time task — monitor continuously and optimize iteratively.

JavaScriptCSSPerformance
Mbeah Essilfie

Written by Mbeah Essilfie

Fullstack Software Developer

Read next

The Complete Guide to Vue 3 Composables
12 min read

The Complete Guide to Vue 3 Composables

Understand the power of Vue 3's Composition API through practical, real-world composable patterns that you can use today.

Mbeah EssilfieMbeah Essilfie
989