# Performance Benchmarker

> Hace todo más rápido. Usa este skill para profiling, optimización de performance, Core Web Vitals, identificar bottlenecks, y asegurar que la app sea rápida en todo dispositivo y red.

- Skill: `leandroomargarcia/performance-benchmarker` (Agent Skill)
- Install (CLI): `npx skillmds@latest add leandroomargarcia/performance-benchmarker`
- Raw SKILL.md: https://api.skillmd.com/api/skills/leandroomargarcia/performance-benchmarker/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Productivity
- Author: leandroomargarcia (https://skillmd.com/u/leandroomargarcia)
- Updated: 2026-09-22
- Page: https://skillmd.com/skills/leandroomargarcia/performance-benchmarker

---


# Performance Benchmarker

Especialista en identificar y eliminar bottlenecks de performance. Hace aplicaciones más rápidas a través de medición rigurosa y optimización sistemática.

## Cuándo Usar Este Skill

- Profiling de aplicaciones lentas
- Optimizar Core Web Vitals
- Benchmark antes/después de cambios
- Identificar memory leaks
- Optimizar bundle size
- Performance budgets

## Core Web Vitals Targets

```
LCP (Largest Contentful Paint):
- Good: <2.5s
- Needs improvement: 2.5-4s
- Poor: >4s

FID (First Input Delay):
- Good: <100ms
- Needs improvement: 100-300ms
- Poor: >300ms

CLS (Cumulative Layout Shift):
- Good: <0.1
- Needs improvement: 0.1-0.25
- Poor: >0.25

TTFB (Time to First Byte):
- Good: <200ms
- Needs improvement: 200-500ms
- Poor: >500ms
```

## Performance Budget

```
JAVASCRIPT:
- Initial bundle: <200KB (gzipped)
- Per-route chunk: <50KB
- Total JS: <500KB

IMAGES:
- Hero images: <200KB
- Thumbnails: <20KB
- Icons: SVG preferred

FONTS:
- Total: <100KB
- Subset if possible

THIRD-PARTY:
- Analytics: <30KB
- Total third-party: <100KB

TIME BUDGETS:
- Time to Interactive: <3s
- First Contentful Paint: <1.5s
```

## Profiling Workflow

```
1. MEASURE BASELINE
   - Current metrics documented
   - Reproducible test conditions
   - Multiple runs for consistency

2. IDENTIFY BOTTLENECKS
   - Profile CPU/memory
   - Network waterfall
   - Render timeline
   - Database queries

3. PRIORITIZE
   - Impact vs effort
   - User-facing impact
   - Frequency of path

4. OPTIMIZE
   - One change at a time
   - Measure after each change
   - Document improvement

5. VERIFY
   - Compare to baseline
   - Test on slow devices
   - Test on slow networks
```

## Browser DevTools Profiling

```
NETWORK TAB:
- Waterfall analysis
- Slow resources
- Render-blocking
- Caching issues

PERFORMANCE TAB:
- Long tasks (>50ms)
- Layout thrashing
- Paint costs
- JavaScript execution

MEMORY TAB:
- Heap snapshots
- Memory growth
- Detached DOM nodes
- Closure leaks

LIGHTHOUSE:
- Overall score
- Opportunities
- Diagnostics
- Core Web Vitals
```

## Common Optimizations

```
JAVASCRIPT:
☐ Code splitting by route
☐ Tree shaking unused code
☐ Defer non-critical scripts
☐ Minify and compress
☐ Avoid render-blocking JS
☐ Use Web Workers for heavy computation

CSS:
☐ Critical CSS inlined
☐ Non-critical deferred
☐ Remove unused styles
☐ Minimize specificity
☐ Use CSS containment

IMAGES:
☐ Modern formats (WebP, AVIF)
☐ Responsive images (srcset)
☐ Lazy loading
☐ Proper sizing
☐ CDN delivery

FONTS:
☐ font-display: swap
☐ Preload critical fonts
☐ Subset characters
☐ WOFF2 format

CACHING:
☐ Cache-Control headers
☐ Service worker
☐ CDN caching
☐ Browser caching
```

## Backend Performance

```
DATABASE:
- Query optimization
- Index analysis
- Connection pooling
- Query caching
- N+1 detection

API:
- Response compression
- Pagination
- Field selection
- Batch endpoints
- Async processing

CACHING:
- Redis/Memcached
- Cache invalidation
- Cache warming
- TTL strategy
```

## Benchmark Report Template

```markdown
## Performance Benchmark: [Feature/Page]

**Date:** [date]
**Environment:** [production/staging]
**Device:** [specs]
**Network:** [connection type]

### Summary
| Metric | Before | After | Change |
|--------|--------|-------|--------|
| LCP | Xs | Ys | -Z% |
| FID | Xms | Yms | -Z% |
| CLS | X | Y | -Z% |
| Bundle size | XKB | YKB | -Z% |

### Detailed Metrics
- First Contentful Paint: X
- Time to Interactive: X
- Total Blocking Time: X
- Speed Index: X

### Optimizations Applied
1. [Optimization]: [Impact]
2. [Optimization]: [Impact]

### Remaining Opportunities
1. [Opportunity]: [Expected impact]
2. [Opportunity]: [Expected impact]

### Recommendations
- [Next step 1]
- [Next step 2]
```

## React Performance Tips

```tsx
// 1. Memoize expensive components
const ExpensiveComponent = memo(({ data }) => {
  return <div>{/* render */}</div>;
});

// 2. useMemo for expensive calculations
const sortedData = useMemo(() => {
  return data.sort((a, b) => a.value - b.value);
}, [data]);

// 3. useCallback for stable references
const handleClick = useCallback(() => {
  doSomething(id);
}, [id]);

// 4. Virtualize long lists
<VirtualList
  height={400}
  itemCount={10000}
  itemSize={50}
>
  {({ index, style }) => (
    <div style={style}>{items[index]}</div>
  )}
</VirtualList>

// 5. Lazy load routes
const Settings = lazy(() => import('./Settings'));
```

## Performance Testing Tools

```
BROWSER:
- Chrome DevTools
- Lighthouse
- WebPageTest

SYNTHETIC:
- Lighthouse CI
- SpeedCurve
- Calibre

REAL USER:
- Web Vitals library
- Sentry Performance
- New Relic Browser

BUNDLE:
- webpack-bundle-analyzer
- source-map-explorer
- bundlephobia

BACKEND:
- clinic.js (Node)
- py-spy (Python)
- pprof (Go)
```

## CI/CD Integration

```yaml
# GitHub Actions example
- name: Lighthouse CI
  run: |
    npm install -g @lhci/cli
    lhci autorun
  env:
    LHCI_GITHUB_APP_TOKEN: ${{ secrets.LHCI_TOKEN }}

# Performance budget check
- name: Check bundle size
  run: |
    npm run build
    npx bundlesize
```

## Mejores Prácticas

1. **Measure first** - Don't optimize without data
2. **Set budgets** - Make performance a requirement
3. **Test on slow devices** - Fast MacBook ≠ real world
4. **Monitor in production** - Real user metrics matter
5. **Automate checks** - CI should catch regressions
6. **Prioritize by impact** - 80/20 rule applies

## Filosofía

> "Performance is a feature. Users won't wait, competitors won't either. Fast beats slow, always."

El objetivo es hacer cada interacción tan rápida que los usuarios no noten que están esperando.