Google made performance a ranking factor, and the industry panicked. Developers started chasing Lighthouse scores like they were high scores in an arcade game. But here is the truth: a perfect 100 means nothing if real users still wait three seconds for your page to become usable. Core Web Vitals are not about scores. They are about user experience.
Optimize for humans, not for Lighthouse.
Largest Contentful Paint (LCP) measures perceived load speed. It tracks when the largest visible element renders — usually a hero image or heading. The target is 2.5 seconds. Most sites fail because they serve unoptimized images or block rendering with massive CSS files.
<!-- Preload your LCP image -->
<link rel="preload" as="image" href="/hero.webp" type="image/webp" fetchpriority="high">

<!-- Use 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" fetchpriority="high">
</picture>
Interaction to Next Paint (INP) replaced First Input Delay in 2024, and it is a far better metric. INP measures responsiveness across the entire page lifecycle, not just the first click. A poor INP score almost always means long-running JavaScript blocking the main thread. The fix is usually not a library — it is architectural discipline.
// Bad: blocking the main thread
function processData(data) {
    const results = data.map(heavyComputation);
    updateUI(results);
}

// Good: yield to the browser
async function processData(data) {
    const results = [];
    const chunkSize = 100;
    
    for (let i = 0; i < data.length; i += chunkSize) {
        const chunk = data.slice(i, i + chunkSize);
        results.push(...chunk.map(heavyComputation));
        
        // Yield control back to the browser
        await new Promise(resolve => requestIdleCallback(resolve));
    }
    
    updateUI(results);
}
Cumulative Layout Shift (CLS) is the silent killer. Users do not complain about CLS — they just leave. A button that moves under your cursor at the exact moment you click is not a bug, it is a betrayal of trust. Reserve space for dynamic content, never inject content above existing elements, and always specify image dimensions.
The real insight is that these three metrics tell a complete story. LCP is about arrival. INP is about interaction. CLS is about stability. Master them and you have mastered the user experience. Everything else is noise.