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 |
Converted and distributed by TomeVault — claim your Tome and manage your conversions.
tomevault-io