Understanding Core Web Vitals

What Are Core Web Vitals?

Core Web Vitals are Google's metrics for measuring real-world user experience on websites. They directly impact your SEO rankings and user satisfaction.

The Three Core Metrics

Largest Contentful Paint (LCP)

LCP measures when the largest visible element finishes loading. This is usually:

• Hero images
• Large text blocks
• Video thumbnails

Common LCP Issues

1. Slow server response – TTFB over 600ms
2. Render-blocking resources – CSS/JS blocking paint
3. Slow resource load times – Large images, fonts
4. Client-side rendering – JavaScript-dependent content

Quick LCP Wins

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

<!-- Preconnect to origins -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://cdn.example.com">

Interaction to Next Paint (INP)

INP replaced FID in 2024. It measures ALL interactions, not just the first:

• Clicks
• Key presses
• Taps

Common INP Issues

1. Heavy JavaScript execution – Long tasks blocking main thread
2. Too many event listeners – Inefficient handlers
3. Large DOM size – Slow DOM operations
4. Third-party scripts – Analytics, chat widgets

Quick INP Wins

// Use passive event listeners
document.addEventListener('scroll', handler, { passive: true });

// Debounce expensive operations
function debounce(fn, delay) {
    let timeout;
    return (...args) => {
        clearTimeout(timeout);
        timeout = setTimeout(() => fn(...args), delay);
    };
}

Cumulative Layout Shift (CLS)

CLS measures unexpected layout shifts during page load.

Common CLS Causes

1. Images without dimensions – No width/height
2. Ads and embeds – Dynamic content insertion
3. Web fonts – FOUT/FOIT causing reflow
4. Dynamic content – JavaScript-inserted elements

Quick CLS Wins

<!-- Always set image dimensions -->
<img src="photo.jpg" width="800" height="600" alt="Photo">

<!-- Or use aspect-ratio CSS -->
<style>
.hero-image {
    aspect-ratio: 16 / 9;
    width: 100%;
    height: auto;
}
</style>

Measuring Core Web Vitals

Lab Tools (Development)

Field Tools (Real Users)

Using Lighthouse

# Install CLI
npm install -g lighthouse

# Run audit
lighthouse https://example.com --view

# Mobile + Desktop
lighthouse https://example.com --preset=desktop --view
lighthouse https://example.com --form-factor=mobile --view

WordPress-Specific Performance Issues

Common WordPress performance problems:

Next Steps

In the next lesson, we'll implement caching strategies at multiple levels.