Core Web Vitals Explained

┌──────────────────────────────────────────────────────────────────┐
│                    Core Web Vitals Framework                     │
│                                                                  │
│   ┌─────────────────┐  ┌─────────────────┐  ┌─────────────────┐  │
│   │      LCP        │  │      INP        │  │      CLS        │  │
│   │    Loading      │  │  Interactivity  │  │    Stability    │  │
│   │                 │  │                 │  │                 │  │
│   │ "How fast does  │  │ "How quickly    │  │ "Do elements    │  │
│   │  content appear"│  │  does the page  │  │  jump around?"  │  │
│   │                 │  │  respond?"      │  │                 │  │
│   └────────┬────────┘  └────────┬────────┘  └────────┬────────┘  │
│            │                    │                    │           │
│            ▼                    ▼                    ▼           │
│   ┌─────────────────────────────────────────────────────────────┐│
│   │              Google Search Ranking Factor                   ││
│   │         (Page Experience Signal since May 2021)             ││
│   └─────────────────────────────────────────────────────────────┘│
└──────────────────────────────────────────────────────────────────┘

<!-- Hero image (typical LCP candidate) -->
<img src="hero.jpg" alt="Product showcase">

<!-- Hero section with background -->
<div class="hero" style="background-image: url('hero-bg.jpg')">
  <h1>Welcome to Our Store</h1>
</div>

<!-- Video poster -->
<video poster="video-preview.jpg">
  <source src="video.mp4" type="video/mp4">
</video>

Page Session:
  Click #1: 120ms latency
  Click #2: 80ms latency
  Click #3: 450ms latency ← Highest interaction
  Tap #4: 95ms latency

INP = 450ms (or 99th percentile for high interaction counts)

Impact Fraction × Distance Fraction = Layout Shift Score

Example:
  Element moves down 200px (viewport height: 800px)
  Impact Fraction: 0.25 (element occupied area)
  Distance Fraction: 0.25 (200/800)
  Shift Score: 0.0625

Total CLS = Sum of all unexpected shift scores

<!-- Images without dimensions -->
<img src="product.jpg" alt="Product">  <!-- Bad: causes reflow -->

<!-- Correct: dimensions reserved -->
<img src="product.jpg" alt="Product" width="400" height="300">

<!-- Ad containers without reserved space -->
<div id="ad-slot"></div>  <!-- Bad: ad loads, pushes content -->

<!-- Correct: reserve space -->
<div id="ad-slot" style="min-height: 250px;"></div>

<!-- Dynamic content insertion -->
<div class="content"></div>
<script>
  // Bad: inserts content without warning
  document.querySelector('.content').prepend(banner);
</script>

// PageSpeed Insights API
fetch('https://www.googleapis.com/pagespeedonline/v5/runPagespeed?' +
  'url=https://example.com&category=performance')
  .then(response => response.json())
  .then(data => {
    const lcp = data.lighthouseResult.audits['largest-contentful-paint'];
    const cls = data.lighthouseResult.audits['cumulative-layout-shift'];
    const inp = data.lighthouseResult.audits['interaction-to-next-paint'];
  });

import { onLCP, onINP, onCLS } from 'web-vitals';

onLCP(console.log);  // Logs LCP value
onINP(console.log);  // Logs INP value
onCLS(console.log);  // Logs CLS value

// Send to analytics
function sendToAnalytics(metric) {
  navigator.sendBeacon('analytics-endpoint', JSON.stringify({
    name: metric.name,
    value: metric.value,
    rating: metric.rating,
    id: metric.id
  }));
}

onLCP(sendToAnalytics);
onINP(sendToAnalytics);
onCLS(sendToAnalytics);

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

  <!-- Preload critical CSS -->
  <link rel="preload" as="style" href="critical.css">

  <!-- Preconnect to origins -->
  <link rel="preconnect" href="https://cdn.example.com">
  <link rel="dns-prefetch" href="https://analytics.example.com">
</head>

# Enable HTTP/2 or HTTP/3
listen 443 http2;

# Enable compression
gzip on;
gzip_types text/html text/css application/javascript image/svg+xml;

# Enable caching headers
location ~* \.(jpg|jpeg|png|gif|webp|css|js)$ {
  expires 1y;
  add_header Cache-Control "public, immutable";
}

Without CDN: User ──────────────────> Origin Server (100-300ms RTT)
                                    [geographic distance]

With CDN: User ───> Edge Node (10-50ms) ───> Origin (if needed)
                   [nearest PoP]

// Bad: Long blocking task
function processItems(items) {
  items.forEach(item => {
    // Heavy computation
    item.process();
  });
}

// Good: Chunked processing
async function processItems(items) {
  for (let i = 0; i < items.length; i += 50) {
    const chunk = items.slice(i, i + 50);
    chunk.forEach(item => item.process());
    await new Promise(r => setTimeout(r, 0)); // Yield to main thread
  }
}

// Better: scheduler API
async function processItems(items) {
  for (const item of items) {
    await scheduler.yield(); // Modern browsers
    item.process();
  }
}

// Main thread
const worker = new Worker('compute.js');

button.addEventListener('click', () => {
  worker.postMessage({ data: largeDataset });
  // Main thread stays responsive
});

// compute.js (worker thread)
self.onmessage = (e) => {
  const result = heavyComputation(e.data);
  self.postMessage(result);
};

// Bad: Expensive operation on every keystroke
input.addEventListener('input', (e) => {
  searchDatabase(e.target.value); // Blocks main thread
});

// Good: Debounced handler
const debounce = (fn, delay) => {
  let timeout;
  return (...args) => {
    clearTimeout(timeout);
    timeout = setTimeout(() => fn(...args), delay);
  };
};

input.addEventListener('input', debounce((e) => {
  searchDatabase(e.target.value);
}, 300));

/* Aspect ratio trick */
img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}

/* Or use CSS to reserve space */
.image-container {
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  background: #f0f0f0;
}

@font-face {
  font-family: 'CustomFont';
  src: url('/fonts/custom.woff2') format('woff2');
  font-display: optional; /* Don't swap if loaded too late */
}

/* Or use size-adjust for fallback fonts */
@font-face {
  font-family: 'CustomFont';
  src: url('/fonts/custom.woff2') format('woff2');
  font-display: swap;
  size-adjust: 98%; /* Match fallback font size */
  descent-override: 20%;
}

/* Bad: Causes layout shift */
.element {
  animation: move 0.3s;
}
@keyframes move {
  from { left: 0; }
  to { left: 100px; }
}

/* Good: Uses transform (compositor) */
.element {
  animation: move 0.3s;
}
@keyframes move {
  from { transform: translateX(0); }
  to { transform: translateX(100px); }
}

┌─────────────────────────────────────────────────────────────────┐
│                    Page Experience Signal                       │
│                                                                 │
│  ┌──────────────┐  ┌──────────────┐  ┌──────────────────────┐   │
│  │    Core      │  │   Mobile     │  │    HTTPS &           │   │
│  │   Web        │  │  Friendly    │  │    Safe Browsing     │   │
│  │  Vitals      │  │   Test       │  │                      │   │
│  └──────────────┘  └──────────────┘  └──────────────────────┘   │
│                                                                 │
│  Weight: Major factor for competitive keywords                  │
│  Scope: Mobile search (desktop since 2022)                      │
│  Data source: CrUX (28-day rolling window)                      │
└─────────────────────────────────────────────────────────────────┘

Google Search Console → Experience → Core Web Vitals

Shows:
- URLs failing Core Web Vitals
- Mobile vs Desktop performance
- Historical trends (90 days)
- Issue severity breakdown

# GitHub Actions example
name: Core Web Vitals
on: [push, pull_request]

jobs:
  lighthouse:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - name: Run Lighthouse
        uses: treosh/lighthouse-ci-action@v10
        with:
          urls: |
            https://staging.example.com/
            https://staging.example.com/product
          budgetPath: ./budget.json
          uploadArtifacts: true

{
  "ci": {
    "assert": {
      "assertions": {
        "largest-contentful-paint": ["error", {"maxNumericValue": 2500}],
        "cumulative-layout-shift": ["error", {"maxNumericValue": 0.1}],
        "interaction-to-next-paint": ["error", {"maxNumericValue": 200}]
      }
    }
  }
}