performance-profiling
A 4-step framework for profiling and optimizing application performance.
Install
mkdir -p .claude/skills/performance-profiling && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/1042" && unzip -o skill.zip -d .claude/skills/performance-profiling && rm skill.zipInstalls to .claude/skills/performance-profiling
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
Performance profiling principles. Measurement, analysis, and optimization techniques.Key capabilities
- →Core Web Vitals measurement
- →Bundle size analysis
- →Runtime performance profiling
- →Memory leak detection
- →Optimization of static assets
How it works
It follows a four-step workflow: baseline measurement, bottleneck identification, targeted fixing, and validation of improvements.
Inputs & outputs
When to use performance-profiling
- →Audit page load time
- →Analyze bundle size
- →Debug memory leaks
- →Improve Core Web Vitals
About this skill
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 improvement
Profiling 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 not to use it
- →Micro-optimization before identifying bottlenecks
- →Guessing performance issues without data
Prerequisites
Limitations
- →Requires RUM data for production accuracy
- →Must profile before optimizing
How it compares
It enforces a data-driven approach to performance rather than relying on intuition or premature optimization.
Compared to similar skills
performance-profiling side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| performance-profiling (this skill) | 6 | 6mo | Review | Intermediate |
| chrome-devtools | 41 | 7mo | Review | Intermediate |
| performance-benchmark | 3 | 4mo | No flags | Intermediate |
| moai-workflow-testing | 1 | 2mo | Review | Intermediate |
Try saying
Example prompts that trigger this skill in your AI assistant.
More by davila7
View all by davila7 →You might also like
chrome-devtools
mrgoonie
Browser automation, debugging, and performance analysis using Puppeteer CLI scripts. Use for automating browsers, taking screenshots, analyzing performance, monitoring network traffic, web scraping, form automation, and JavaScript debugging.
performance-benchmark
dotnet
Generate and run ad hoc performance benchmarks to validate code changes. Use this when asked to benchmark, profile, or validate the performance impact of a code change in dotnet/runtime.
moai-workflow-testing
modu-ai
Comprehensive development workflow specialist combining DDD testing, debugging, performance optimization, code review, PR review, and quality assurance into unified development workflows
perf-theory-tester
ComposioHQ
Use when running controlled perf experiments to validate hypotheses.
validate-render
kzahedi
Validates YARS rendering by exporting first frame as PNG and comparing with reference screenshot
python-testing-patterns
wshobson
Implement comprehensive testing strategies with pytest, fixtures, mocking, and test-driven development. Use when writing Python tests, setting up test suites, or implementing testing best practices.