profiling-performance

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

// 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;
}

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

Features

Feature	Description	Guide
Lighthouse Audits	Automated performance scoring	Run in CI/CD, track scores over time
Core Web Vitals	LCP, FID, CLS, INP metrics	Monitor with web-vitals library
Bundle Analysis	JavaScript bundle size inspection	Use webpack-bundle-analyzer or rollup-plugin-visualizer
Network Waterfall	Request timing and blocking analysis	Identify render-blocking resources
Memory Profiling	Heap snapshots and leak detection	Compare snapshots before/after operations
Performance Budgets	Automated regression prevention	Set thresholds in CI pipeline

Common Patterns

Core Web Vitals Monitoring

import { 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

const 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

# .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

Do	Avoid
Test with throttled network and CPU	Testing only on fast connections
Monitor real user metrics (RUM)	Relying solely on synthetic tests
Set and enforce performance budgets	Optimizing without baseline data
Preload LCP images with fetchpriority	Ignoring mobile performance
Lazy load below-fold content	Loading all JS upfront
Use modern image formats (WebP, AVIF)	Ignoring third-party script impact
Profile before and after changes	Skipping cumulative layout shift fixes