Web Performance Core Web Vitals Optimization

Website fails Core Web Vitals (LCP, CLS, INP) causing poor user experience and lower search rankings.

Optimize each Core Web Vital:

LCP (Largest Contentful Paint) - target < 2.5s

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

<!-- Use 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' decoding='async' fetchpriority='high'>
</picture>

/* Inline critical CSS */
/* Avoid render-blocking resources */
/* Font: use font-display: swap */
@font-face {
  font-family: 'MyFont';
  src: url('font.woff2') format('woff2');
  font-display: swap;
}

CLS (Cumulative Layout Shift) - target < 0.1

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

/* Reserve space for dynamic content */
.ad-slot { min-height: 250px; }
.skeleton { min-height: 200px; background: #f0f0f0; }

/* Avoid inserting content above existing content */
/* Use transform animations instead of layout-triggering properties */
.animate { transform: translateY(10px); } /* Good */
.animate { margin-top: 10px; }             /* Bad - causes layout shift */

INP (Interaction to Next Paint) - target < 200ms

// Break up long tasks
function processLargeList(items) {
  const chunk = items.splice(0, 100);
  chunk.forEach(process);
  if (items.length > 0) {
    // Yield to browser between chunks
    requestIdleCallback(() => processLargeList(items));
  }
}

// Use web workers for heavy computation
// Debounce expensive input handlers

Core Web Vitals directly impact SEO ranking (Google uses them as ranking signals) and user experience. A 1-second delay in LCP can reduce conversions by 7%.

Optimizing web performance metrics