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

## 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

// 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

# 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.