Performance Optimizer

What's slow?
│
├── Initial page load
│   ├── LCP high → Optimize critical rendering path
│   ├── Large bundle → Code splitting, tree shaking
│   └── Slow server → Caching, CDN
│
├── Interaction sluggish
│   ├── INP high → Reduce JS blocking
│   ├── Re-renders → Memoization, state optimization
│   └── Layout thrashing → Batch DOM reads/writes
│
├── Visual instability
│   └── CLS high → Reserve space, explicit dimensions
│
└── Memory issues
    ├── Leaks → Clean up listeners, refs
    └── Growth → Profile heap, reduce retention

User: "Lighthouse shows LCP of 4.5s"

[Performance Optimizer - Investigation]

## Step 1: Measure

Run Lighthouse:
- LCP: 4.5s (Poor)
- Largest element: Hero image (2MB)
- Blocking resources: 3 render-blocking CSS

## Step 2: Identify Bottlenecks

1. Hero image:
   - Size: 2MB (uncompressed PNG)
   - Not using srcset
   - Not lazy loaded

2. Render-blocking CSS:
   - 3 separate CSS files
   - Total: 150KB
   - No critical CSS inlined

## Step 3: Fix & Validate

Optimizations:

```typescript
// 1. Optimize hero image
// Before
<img src="/hero.png" alt="Hero" />

// After
<Image
  src="/hero.jpg" // PNG → JPG
  alt="Hero"
  width={1200}
  height={600}
  priority // Preload for LCP
  sizes="(max-width: 768px) 100vw, 1200px"
  quality={85}
/>

// Result: 2MB → 180KB

<!-- 2. Inline critical CSS -->
<style>
  /* Critical above-the-fold styles */
  .hero { /* ... */ }
  .nav { /* ... */ }
</style>

<!-- Defer non-critical CSS -->
<link rel="preload" href="/styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">

### Use Case 2: Sluggish Interactions (High INP)

// ❌ PROBLEM: Heavy computation in click handler
function handleSearch(query: string) {
  // Expensive filter on 10,000 items
  const results = items.filter(item => 
    item.title.toLowerCase().includes(query.toLowerCase()) ||
    item.description.toLowerCase().includes(query.toLowerCase())
  );
  setResults(results);
}

// 1. Debounce input
import { useDeferredValue } from 'react';

const deferredQuery = useDeferredValue(query);

// 2. Memoize expensive computation
const results = useMemo(() => {
  if (!deferredQuery) return [];
  
  return items.filter(item => {
    const searchLower = deferredQuery.toLowerCase();
    return item.title.toLowerCase().includes(searchLower) ||
           item.description.toLowerCase().includes(searchLower);
  });
}, [items, deferredQuery]);

// 3. Virtualize results (if 1000+ items)
import { useVirtualizer } from '@tanstack/react-virtual';

### Use Case 3: Large Bundle Size

npm run build
npx @next/bundle-analyzer

// 1. Replace moment.js with date-fns
// Before
import moment from 'moment'; // 300KB
const formatted = moment(date).format('YYYY-MM-DD');

// After
import { format } from 'date-fns'; // 15KB (tree-shakeable)
const formatted = format(date, 'yyyy-MM-dd');

// 2. Import lodash functions individually
// Before
import _ from 'lodash'; // 150KB
_.debounce(fn, 300);

// After
import debounce from 'lodash/debounce'; // 5KB
debounce(fn, 300);

// 3. Fix duplicate dependencies
// package.json
{
  "resolutions": {
    "react": "18.2.0",
    "react-dom": "18.2.0"
  }
}

## Quick Wins Checklist

### Images
- [ ] Lazy loading enabled
- [ ] Proper format (WebP, AVIF)
- [ ] Correct dimensions
- [ ] Responsive srcset

### JavaScript
- [ ] Code splitting for routes
- [ ] Tree shaking enabled
- [ ] No unused dependencies
- [ ] Async/defer for non-critical

### CSS
- [ ] Critical CSS inlined
- [ ] Unused CSS removed
- [ ] No render-blocking CSS

### Caching
- [ ] Static assets cached
- [ ] Proper cache headers
- [ ] CDN configured

## Review Checklist

- [ ] LCP < 2.5 seconds
- [ ] INP < 200ms
- [ ] CLS < 0.1
- [ ] Main bundle < 200KB
- [ ] No memory leaks
- [ ] Images optimized
- [ ] Fonts preloaded
- [ ] Compression enabled

## Anti-Patterns

| ❌ Don't | ✅ Do |
|----------|-------|
| Optimize without measuring | Profile first |
| Premature optimization | Fix real bottlenecks |
| Over-memoize | Memoize only expensive ops |
| Ignore perceived performance | Prioritize user experience |
| Apply all optimizations | Focus on biggest impact first |

## Best Practices

<CardGroup cols={2}>
  <Card title="Measure First" icon="ruler">
    Always profile before optimizing - data beats assumptions
  </Card>
  <Card title="Biggest Impact" icon="bullseye">
    Fix the largest bottleneck first for maximum improvement
  </Card>
  <Card title="Validate Results" icon="check-double">
    Re-measure after changes to confirm improvement
  </Card>
  <Card title="User-Focused" icon="user">
    Optimize for perceived performance, not just metrics
  </Card>
</CardGroup>

## Automatic Selection Triggers

Performance Optimizer is automatically selected when:
- User mentions "performance", "optimize", "speed", "slow"
- Poor metrics mentioned: "high LCP", "sluggish", "memory"
- User asks about "benchmark", "lighthouse", "bundle size"
- Performance issues clearly described

## Related Agents

<CardGroup cols={2}>
  <Card title="Frontend Specialist" icon="browser" href="/agents/frontend-specialist">
    Implements performance optimizations
  </Card>
  <Card title="Debugger" icon="bug" href="/agents/debugger">
    Helps investigate performance bugs
  </Card>
</CardGroup>