---

name: profiling-performance description: Performs browser performance profiling with Lighthouse, Core Web Vitals, and DevTools analysis. Use when auditing page performance, optimizing Core Web Vitals, analyzing bundle sizes, or implementing performance budgets. category: devops triggers:

• performance
• lighthouse
• core web vitals
• bundle size
• profiling

---

Profiling Performance

Quick Start

Copy// Run Lighthouse audit
import lighthouse from 'lighthouse';
import * as chromeLauncher from 'chrome-launcher';

async function audit(url: string) {
  const chrome = await chromeLauncher.launch({ chromeFlags: ['--headless'] });
  const result = await lighthouse(url, { port: chrome.port, onlyCategories: ['performance'] });
  await chrome.kill();
  return result?.lhr;
}

Copy# CLI audit
npx lighthouse https://example.com --output=json --output-path=./report.json

Features

Common Patterns

Core Web Vitals Monitoring

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

function sendToAnalytics(metric: { name: string; value: number; rating: string }) {
  analytics.track('web_vital', metric);
}

onLCP(sendToAnalytics);  // Target: < 2.5s
onFID(sendToAnalytics);  // Target: < 100ms
onCLS(sendToAnalytics);  // Target: < 0.1
onINP(sendToAnalytics);  // Target: < 200ms

Performance Budget Check

Copyconst BUDGET = {
  lcp: 2500, fid: 100, cls: 0.1, tti: 3800, tbt: 200,
  jsSize: 300 * 1024, cssSize: 50 * 1024, totalSize: 1000 * 1024,
};

function checkBudget(metrics: Record<string, number>) {
  const violations = Object.entries(BUDGET)
    .filter(([key, limit]) => metrics[key] > limit)
    .map(([key, limit]) => ({ metric: key, limit, actual: metrics[key] }));
  return { passed: violations.length === 0, violations };
}

CI/CD Integration

Copy# .github/workflows/performance.yml
- name: Lighthouse CI
  uses: treosh/lighthouse-ci-action@v10
  with:
    urls: http://localhost:3000
    budgetPath: ./performance-budget.json
    uploadArtifacts: true

Best Practices