Web Performance Metrics: Core Web Vitals

Core Web Vitals are critical performance metrics. This article covers measuring and optimizing them.

Introduction

Core Web Vitals provide:

User experience metrics
Performance measurement
SEO impact
Optimization guidance
Quality assessment

Understanding Web Vitals helps you:

Measure performance
Improve user experience
Optimize for SEO
Identify issues
Track improvements

Core Web Vitals

Largest Contentful Paint (LCP)

// ✅ Good: Measure LCP
const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    console.log('LCP:', entry.renderTime || entry.loadTime);
  }
});

observer.observe({ entryTypes: ['largest-contentful-paint'] });

// ✅ Good: Optimize LCP
// 1. Optimize images
// 2. Minimize CSS
// 3. Preload critical resources
// 4. Use CDN
// 5. Reduce server response time

// Target: < 2.5 seconds

First Input Delay (FID)

// ✅ Good: Measure FID
const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    console.log('FID:', entry.processingDuration);
  }
});

observer.observe({ entryTypes: ['first-input'] });

// ✅ Good: Optimize FID
// 1. Break up long tasks
// 2. Use web workers
// 3. Defer non-critical code
// 4. Minimize JavaScript

// Target: < 100 milliseconds

Cumulative Layout Shift (CLS)

// ✅ Good: Measure CLS
let clsValue = 0;
const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    if (!entry.hadRecentInput) {
      clsValue += entry.value;
      console.log('CLS:', clsValue);
    }
  }
});

observer.observe({ entryTypes: ['layout-shift'] });

// ✅ Good: Optimize CLS
// 1. Set image dimensions
// 2. Avoid inserting content above existing content
// 3. Use transform animations
// 4. Avoid font-loading issues

// Target: < 0.1

Measuring Performance

Web Vitals Library

// ✅ Good: Use web-vitals library
import { getCLS, getFID, getFCP, getLCP, getTTFB } from 'web-vitals';

getCLS(console.log);  // Cumulative Layout Shift
getFID(console.log);  // First Input Delay
getFCP(console.log);  // First Contentful Paint
getLCP(console.log);  // Largest Contentful Paint
getTTFB(console.log); // Time to First Byte

// ✅ Good: Send metrics to analytics
function sendMetrics() {
  getCLS((metric) => {
    fetch('/api/metrics', {
      method: 'POST',
      body: JSON.stringify(metric)
    });
  });
}

Lighthouse

# ✅ Good: Run Lighthouse
lighthouse https://example.com --view

# ✅ Good: Lighthouse CI
npm install -g @lhci/cli@*
lhci autorun

# ✅ Good: Lighthouse in CI/CD
# .github/workflows/lighthouse.yml
- name: Run Lighthouse
  uses: treosh/lighthouse-ci-action@v9

Best Practices

Optimize images:

<!-- ✅ Good: Responsive images -->
<picture>
  <source srcSet="image.webp" type="image/webp" />
  <img src="image.jpg" alt="description" loading="lazy" />
</picture>

<!-- ❌ Bad: Large images -->
<img src="large-image.jpg" alt="description" />

Minimize JavaScript:

// ✅ Good: Code splitting
const Component = lazy(() => import('./Component'));

// ❌ Bad: Load everything
import * from './components';

Use CDN:

// ✅ Good: CDN for static assets
<script src="https://cdn.example.com/app.js"></script>

// ❌ Bad: Serve from origin
<script src="/app.js"></script>

Summary

Web Performance Metrics are essential. Key takeaways:

Measure Core Web Vitals
Optimize LCP
Improve FID
Reduce CLS
Use Lighthouse
Monitor metrics
Optimize images
Minimize JavaScript

Next Steps

Learn about Frontend Optimization
Explore Backend Optimization
Study Database Optimization
Practice performance measurement
Improve Web Vitals