SKILL.md
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
1. 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)
2. Profiling Workflow
The 4-Step Process
1. BASELINE → Measure current state
2. IDENTIFY → Find the bottleneck
3. FIX → Make targeted change
4. VALIDATE → Confirm improvementProfiling Tool Selection
Problem
Tool
Page load
Lighthouse
Bundle size
Bundle analyzer
Runtime
DevTools Performance
Memory
DevTools Memory
Network
DevTools Network
3. 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
4. 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
5. 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
6. 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
7. 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.
When to Use
This skill is applicable to execute the workflow or actions described in the overview.
Limitations
- Use this skill only when the task clearly matches the scope described above.
- Do not treat the output as a substitute for environment-specific validation, testing, or expert review.
- Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.