# Web Vitals Quick Reference
## ๐ Quick Start (3 Steps)
```tsx
// 1. Import in app/layout.tsx
import { WebVitalsReporter } from './components/WebVitalsReporter';
// 2. Add to layout
export default function RootLayout({ children }) {
return (
{children}
);
}
// 3. Set environment variable
NEXT_PUBLIC_SENTRY_DSN=your-sentry-dsn
```
## ๐ Metrics Tracked
| Metric | Name | Good | Poor | What It Measures |
|--------|------|------|------|------------------|
| **LCP** | Largest Contentful Paint | โค 2.5s | > 4s | Loading |
| **FID** | First Input Delay | โค 100ms | > 300ms | Interactivity |
| **CLS** | Cumulative Layout Shift | โค 0.1 | > 0.25 | Stability |
| **TTFB** | Time to First Byte | โค 800ms | > 1.8s | Server |
| **FCP** | First Contentful Paint | โค 1.8s | > 3s | Rendering |
| **INP** | Interaction to Next Paint | โค 200ms | > 500ms | Responsiveness |
## ๐ฏ API Reference
### reportWebVitals()
Initializes tracking. Call once in root layout.
```tsx
import { reportWebVitals } from '@/lib/monitoring/web-vitals';
useEffect(() => {
reportWebVitals();
}, []);
```
### getCurrentMetrics()
Gets current metric values programmatically.
```tsx
import { getCurrentMetrics } from '@/lib/monitoring/web-vitals';
const metrics = await getCurrentMetrics();
console.log(metrics);
```
### METRIC_THRESHOLDS
Performance threshold constants.
```tsx
import { METRIC_THRESHOLDS } from '@/lib/monitoring/web-vitals';
if (lcp <= METRIC_THRESHOLDS.LCP.good) {
console.log('Good LCP!');
}
```
## ๐งช Testing
```bash
# Run tests
npm test -- __tests__/lib/monitoring/web-vitals.test.ts
# Run with coverage
npm test -- --coverage __tests__/lib/monitoring/web-vitals.test.ts
# Watch mode
npm test -- --watch __tests__/lib/monitoring/web-vitals.test.ts
```
## ๐ Debugging
### View Metrics in Console (Development)
```
[Web Vitals] {
name: 'LCP',
value: 1234.56,
rating: 'good',
id: 'v3-...'
}
```
### Check Sentry
1. Open Sentry Dashboard
2. Go to **Performance** โ **Web Vitals**
3. View metrics and trends
### Create Debug Panel
```tsx
import { getCurrentMetrics } from '@/lib/monitoring/web-vitals';
export function DebugPanel() {
const [metrics, setMetrics] = useState([]);
useEffect(() => {
getCurrentMetrics().then(setMetrics);
}, []);
return (
{metrics.map(m => (
{m.name}: {m.value}
))}