Performance Profiling
Measure, analyze, optimize - in that order.
🔧 Runtime Scripts
Execute these for automated profiling:
Script Purpose Usage
scripts/lighthouse_audit.py
Lighthouse performance audit python scripts/lighthouse_audit.py https://example.com
- Core Web Vitals
Targets
Metric Good Poor Measures
LCP < 2.5s
4.0s Loading
INP < 200ms
500ms Interactivity
CLS < 0.1
0.25 Stability
When to Measure
Stage Tool
Development Local Lighthouse
CI/CD Lighthouse CI
Production RUM (Real User Monitoring)
- Profiling Workflow
The 4-Step Process
- BASELINE → Measure current state
- IDENTIFY → Find the bottleneck
- FIX → Make targeted change
- VALIDATE → Confirm improvement
Profiling Tool Selection
Problem Tool
Page load Lighthouse
Bundle size Bundle analyzer
Runtime DevTools Performance
Memory DevTools Memory
Network DevTools Network
- Bundle Analysis
What to Look For
Issue Indicator
Large dependencies Top of bundle
Duplicate code Multiple chunks
Unused code Low coverage
Missing splits Single large chunk
Optimization Actions
Finding Action
Big library Import specific modules
Duplicate deps Dedupe, update versions
Route in main Code split
Unused exports Tree shake
- Runtime Profiling
Performance Tab Analysis
Pattern Meaning
Long tasks (>50ms) UI blocking
Many small tasks Possible batching opportunity
Layout/paint Rendering bottleneck
Script JavaScript execution
Memory Tab Analysis
Pattern Meaning
Growing heap Possible leak
Large retained Check references
Detached DOM Not cleaned up
- Common Bottlenecks
By Symptom
Symptom Likely Cause
Slow initial load Large JS, render blocking
Slow interactions Heavy event handlers
Jank during scroll Layout thrashing
Growing memory Leaks, retained refs
- Quick Win Priorities
Priority Action Impact
1 Enable compression High
2 Lazy load images High
3 Code split routes High
4 Cache static assets Medium
5 Optimize images Medium
- Anti-Patterns
❌ Don't ✅ Do
Guess at problems Profile first
Micro-optimize Fix biggest issue
Optimize early Optimize when needed
Ignore real users Use RUM data
Remember: The fastest code is code that doesn't run. Remove before optimizing.