Performance Profiling

1---
2name: performance-profiling
3description: Performance profiling principles. Measurement, analysis, and optimization techniques.
4allowed-tools: Read, Glob, Grep, Bash
5---
6 
7# Performance Profiling
8 
9> Measure, analyze, optimize - in that order.
10 
11## 🔧 Runtime Scripts
12 
13**Execute these for automated profiling:**
14 
15| Script | Purpose | Usage |
16|--------|---------|-------|
17| `scripts/lighthouse_audit.py` | Lighthouse performance audit | `python scripts/lighthouse_audit.py https://example.com` |
18 
19---
20 
21## 1. Core Web Vitals
22 
23### Targets
24 
25| Metric | Good | Poor | Measures |
26|--------|------|------|----------|
27| **LCP** | < 2.5s | > 4.0s | Loading |
28| **INP** | < 200ms | > 500ms | Interactivity |
29| **CLS** | < 0.1 | > 0.25 | Stability |
30 
31### When to Measure
32 
33| Stage | Tool |
34|-------|------|
35| Development | Local Lighthouse |
36| CI/CD | Lighthouse CI |
37| Production | RUM (Real User Monitoring) |
38 
39---
40 
41## 2. Profiling Workflow
42 
43### The 4-Step Process
44 
45```
461. BASELINE → Measure current state
472. IDENTIFY → Find the bottleneck
483. FIX → Make targeted change
494. VALIDATE → Confirm improvement
50```
51 
52### Profiling Tool Selection
53 
54| Problem | Tool |
55|---------|------|
56| Page load | Lighthouse |
57| Bundle size | Bundle analyzer |
58| Runtime | DevTools Performance |
59| Memory | DevTools Memory |
60| Network | DevTools Network |
61 
62---
63 
64## 3. Bundle Analysis
65 
66### What to Look For
67 
68| Issue | Indicator |
69|-------|-----------|
70| Large dependencies | Top of bundle |
71| Duplicate code | Multiple chunks |
72| Unused code | Low coverage |
73| Missing splits | Single large chunk |
74 
75### Optimization Actions
76 
77| Finding | Action |
78|---------|--------|
79| Big library | Import specific modules |
80| Duplicate deps | Dedupe, update versions |
81| Route in main | Code split |
82| Unused exports | Tree shake |
83 
84---
85 
86## 4. Runtime Profiling
87 
88### Performance Tab Analysis
89 
90| Pattern | Meaning |
91|---------|---------|
92| Long tasks (>50ms) | UI blocking |
93| Many small tasks | Possible batching opportunity |
94| Layout/paint | Rendering bottleneck |
95| Script | JavaScript execution |
96 
97### Memory Tab Analysis
98 
99| Pattern | Meaning |
100|---------|---------|
101| Growing heap | Possible leak |
102| Large retained | Check references |
103| Detached DOM | Not cleaned up |
104 
105---
106 
107## 5. Common Bottlenecks
108 
109### By Symptom
110 
111| Symptom | Likely Cause |
112|---------|--------------|
113| Slow initial load | Large JS, render blocking |
114| Slow interactions | Heavy event handlers |
115| Jank during scroll | Layout thrashing |
116| Growing memory | Leaks, retained refs |
117 
118---
119 
120## 6. Quick Win Priorities
121 
122| Priority | Action | Impact |
123|----------|--------|--------|
124| 1 | Enable compression | High |
125| 2 | Lazy load images | High |
126| 3 | Code split routes | High |
127| 4 | Cache static assets | Medium |
128| 5 | Optimize images | Medium |
129 
130---
131 
132## 7. Anti-Patterns
133 
134| ❌ Don't | ✅ Do |
135|----------|-------|
136| Guess at problems | Profile first |
137| Micro-optimize | Fix biggest issue |
138| Optimize early | Optimize when needed |
139| Ignore real users | Use RUM data |
140 
141---
142 
143> **Remember:** The fastest code is code that doesn't run. Remove before optimizing.
144