# Performance Profiling

> Measure before optimizing; identify bottlenecks with data. Use when optimizing performance, profiling, or working with performance-engineer.

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

---


# Performance Profiling

## Rule: Measure First
Never optimize without profiling. Identify the actual bottleneck before changing code.

## Frontend
- **Lighthouse**: LCP, FID, CLS, TTI
- **Chrome DevTools**: Performance tab, Network throttling
- **Bundle**: `npx vite-bundle-visualizer` or webpack-bundle-analyzer
- **React**: Profiler, why-did-you-render

## Backend
- **Response time**: P50, P95, P99
- **Database**: Slow query log, EXPLAIN
- **Memory**: Heap snapshots, leaks

## Critical Path
- What does the user do first?
- What blocks the initial render?
- What blocks the primary action?

## Before/After
- Record baseline metrics before changes
- Re-measure after each optimization
- Compare before claiming improvement

## Optimization Order
1. Measure and identify bottleneck
2. Fix the biggest impact first
3. Validate with metrics
4. Document the change