advanced 8 min read

Core Web Vitals: LCP, INP & CLS Optimization

Core Web Vitals are Google's three standardized user experience metrics measuring visual loading speed (LCP < 2.5s), interactive responsiveness (INP < 200ms), and visual stability (CLS < 0.1).

Why it matters in interviews

Core Web Vitals directly dictate Google SEO ranking, user conversion rates, and bounce rates. Every Lead Frontend interview includes a deep dive into diagnosing and fixing CWV regressions.

Visual & Interactive Explanation

Core Web Vitals Thresholds & Diagnoses

Interactive Comparison

LCP (Loading)

Largest Contentful Paint

Target: ≤ 2.5s

Target (Good)≤ 2.5 seconds

MeasuresHero image, video poster, large text block

Primary CausesSlow TTFB, unoptimized images, render-blocking CSS

Strengths

•Optimized via <link rel='preload'>
•Next.js Image priority flag

Trade-offs

•Client-rendered SPAs suffer heavy LCP delays

INP (Interactivity)

Interaction to Next Paint

Target: ≤ 200ms

Target (Good)≤ 200 milliseconds

MeasuresWorst interaction latency throughout session

Primary CausesLong tasks (>50ms), heavy React re-renders

Strengths

•Fixed via startTransition()
•Offload CPU work to Web Workers

Trade-offs

•Replaced FID with much stricter full-interaction tracking

CLS (Visual Stability)

Cumulative Layout Shift

Target: ≤ 0.1

Target (Good)≤ 0.1 score

MeasuresUnexpected layout shifts during page lifetime

Primary CausesImages/ads without aspect-ratio, web fonts

Strengths

•Fix with CSS aspect-ratio: 16/9
•font-display: optional

Trade-offs

•Dynamic banners and cookie notices often ruin CLS

Code Examples & Implementation

Optimizing LCP and CLS in Next.js

import Image from 'next/image';

export function HeroBanner() {
  return (
    <div className="relative aspect-[16/9] w-full overflow-hidden">
      {/* 
        1. 'priority' generates <link rel="preload"> in HTML head for instant LCP!
        2. Explicit aspect ratio / fill prevents CLS layout jumps!
        3. WebP/AVIF compression minimizes bytes!
      */}
      <Image
        src="/images/hero.jpg"
        alt="Frontend Interview OS"
        fill
        priority
        sizes="(max-width: 768px) 100vw, 1200px"
        className="object-cover"
      />
    </div>
  );
}

Interview-Ready Answers

Core Web Vitals measure real-world user experience: LCP tracks when the largest visual block renders (<2.5s), INP tracks interaction responsiveness (<200ms), and CLS tracks layout shifts (<0.1).

Official Documentation & Specifications

web.devweb.dev: Core Web Vitals Documentation (LCP, INP, CLS)

web.devweb.dev: Optimize Largest Contentful Paint (LCP)

web.devweb.dev: Optimize Interaction to Next Paint (INP)

Follow-up Questions & Deep Dives

Common Mistakes & Anti-Patterns

Lazy loading the hero image (`loading='lazy'` on LCP element hurts LCP!)
Injecting banner ads or cookie banners dynamically without reserving placeholder space (destroys CLS)
Running CPU-heavy synchronous validation inside click handlers (destroys INP)

Real-World Architectural Scenario

An e-commerce checkout page passes Lighthouse in lab tests, but real users report a poor INP score of 650ms. How do you investigate?

Rate Your Readiness

Rate how comfortably you can explain this in an interview to update your global readiness gauge:

Rate your confidence: