Measuring Core Web Vitals

Core Web Vitals are Google's standardized performance metrics that directly impact search rankings and user experience.

LCP — Largest Contentful Paint

Measures when the largest visible content element renders.

Common LCP issues in Angular:

• Large images without optimization
• Render-blocking JavaScript
• Slow server response times (use SSR)
• Large bundles delaying hydration

INP — Interaction to Next Paint

Measures responsiveness across the whole visit (replaces FID).

Common INP issues in Angular:

• Long change detection cycles
• Expensive event handlers
• Main thread blocked by heavy computation
• Excessive DOM updates

CLS — Cumulative Layout Shift

Measures visual stability (unexpected layout shifts).

Common CLS issues in Angular:

• Images without explicit dimensions
• Dynamically injected content
• Late-loading fonts
• Components that change size after render

Track Core Web Vitals in the field and enforce budgets in CI.

Web Vitals Library

npm install web-vitals

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

export function reportWebVitals(): void {
  onLCP(metric => {
    console.log('LCP:', metric.value);
  });

  onINP(metric => {
    console.log('INP:', metric.value);
  });

  onCLS(metric => {
    console.log('CLS:', metric.value);
  });
}

Route-Level Performance Budgets

{
  "architect": {
    "build": {
      "configurations": {
        "production": {
          "budgets": [
            {
              "type": "initial",
              "maximumWarning": "500kb",
              "maximumError": "1mb"
            },
            {
              "type": "anyComponentStyle",
              "maximumWarning": "2kb",
              "maximumError": "4kb"
            }
          ]
        }
      }
    }
  }
}

Lighthouse CI

npm install @lhci/cli --save-dev

// lighthouserc.json
{
  "ci": {
    "collect": {
      "url": ["http://localhost:8080"]
    },
    "assert": {
      "assertions": {
        "categories:performance": ["error", { "minScore": 0.9 }],
        "categories:accessibility": ["error", { "minScore": 0.9 }]
      }
    }
  }
}

Performance Optimization Checklist

• LCP < 2.5s (optimize images, use SSR, reduce bundle size)
• INP < 200ms (use OnPush, signals, avoid long tasks)
• CLS < 0.1 (set image dimensions, reserve space for dynamic content)
• Lighthouse performance score > 90
• Accessibility score > 90
• Route-level budgets enforced in CI