Performance

Key Principles

• Build for performance from the start
• Measure user-centric metrics (LCP, FID, CLS)
• Monitor continuously and optimize regularly

Essential Tools

• web-vitals, lighthouse, bundlesize, webpack-bundle-analyzer
• @perfume/react, @sentry/react, datadog-browser-rum

Core Metrics & Targets

Metric	Target
LCP	< 2.5s
FID	< 100ms
CLS	< 0.1
Bundle	< 250KB

How to Monitor

• Use web-vitals to track LCP, FID, CLS in your app
• Run npm run analyze:bundle for bundle size
• Run npm run test:performance for component benchmarks
• Use Lighthouse for audits: npm run audit:lighthouse

Example: Track Web Vitals

import { getLCP, getFID, getCLS } from 'web-vitals';
getLCP(console.log);
getFID(console.log);
getCLS(console.log);

Optimization Tips

• Use code splitting and lazy loading for large components
• Analyze and reduce bundle size
• Monitor render times and memory usage

CI/CD Checks

• Add bundle size and Lighthouse checks in your pipeline

Quick Commands

• npm run analyze:bundle - Bundle analysis
• npm run test:performance - Performance tests
• npm run audit:lighthouse - Lighthouse audit

---

Keep your components fast, small, and user-focused for best results.