
Performance Profiling
- 1 installs
- Updated April 11, 2026
- ahmed2020se/dotfiles
performance-profiling is a Claude Code skill that guides web performance measurement, analysis, and optimization against Core Web Vitals targets.
About
performance-profiling is a Claude Code skill that guides web performance work in a measure-then-optimize order. It sets Core Web Vitals targets for LCP, INP, and CLS, maps each performance problem to the right tool, and lays out a 4-step baseline-identify-fix-validate process. It covers bundle analysis, runtime and memory profiling, common bottlenecks, and a prioritized list of quick wins, with a bundled Lighthouse audit script.
- Measure-analyze-optimize workflow with a 4-step profiling process
- Core Web Vitals targets (LCP, INP, CLS) and tool selection per problem type
- Bundle, runtime, and memory analysis with prioritized quick wins
Performance Profiling by the numbers
- 1 all-time installs (skills.sh)
- Ranked #489 of 596 Debugging skills by installs in the Skillselion catalog
- Data as of Jul 7, 2026 (Skillselion catalog sync)
performance-profiling capabilities & compatibility
- Capabilities
- performance profiling · core web vitals audit · bundle analysis · memory profiling
- Use cases
- debugging · testing
- Pricing
- Free
What performance-profiling says it does
Measure, analyze, optimize - in that order.
The fastest code is code that doesn't run. Remove before optimizing.
npx skills add https://github.com/ahmed2020se/dotfiles --skill performance-profilingAdd your badge
Show developers this skill is listed on Skillselion. Paste this into your README.
| Installs | 1 |
|---|---|
| Last updated | April 11, 2026 |
| Repository | ahmed2020se/dotfiles ↗ |
What it does
Profile a web app's load, runtime, and memory performance, then apply prioritized, measured optimizations against Core Web Vitals targets.
Who is it for?
Diagnosing slow page loads, janky interactions, or growing memory in a web app and applying measured fixes.
Skip if: Guessing at problems or micro-optimizing before profiling; the skill insists on measuring first.
When should I use this skill?
A page loads slowly, interactions are janky, memory is growing, or Core Web Vitals need improvement.
What you get
A profiled baseline, an identified bottleneck, and a validated, prioritized performance fix.
- A performance baseline
- An identified bottleneck
- A validated optimization
By the numbers
- 4-step profiling process
- Core Web Vitals: LCP < 2.5s, INP < 200ms, CLS < 0.1
Files
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.
#!/usr/bin/env python3
"""
Skill: performance-profiling
Script: lighthouse_audit.py
Purpose: Run Lighthouse performance audit on a URL
Usage: python lighthouse_audit.py https://example.com
Output: JSON with performance scores
Note: Requires lighthouse CLI (npm install -g lighthouse)
"""
import subprocess
import json
import sys
import os
import tempfile
def run_lighthouse(url: str) -> dict:
"""Run Lighthouse audit on URL."""
try:
with tempfile.NamedTemporaryFile(suffix='.json', delete=False) as f:
output_path = f.name
result = subprocess.run(
[
"lighthouse",
url,
"--output=json",
f"--output-path={output_path}",
"--chrome-flags=--headless",
"--only-categories=performance,accessibility,best-practices,seo"
],
capture_output=True,
text=True,
timeout=120
)
if os.path.exists(output_path):
with open(output_path, 'r') as f:
report = json.load(f)
os.unlink(output_path)
categories = report.get("categories", {})
return {
"url": url,
"scores": {
"performance": int(categories.get("performance", {}).get("score", 0) * 100),
"accessibility": int(categories.get("accessibility", {}).get("score", 0) * 100),
"best_practices": int(categories.get("best-practices", {}).get("score", 0) * 100),
"seo": int(categories.get("seo", {}).get("score", 0) * 100)
},
"summary": get_summary(categories)
}
else:
return {"error": "Lighthouse failed to generate report", "stderr": result.stderr[:500]}
except subprocess.TimeoutExpired:
return {"error": "Lighthouse audit timed out"}
except FileNotFoundError:
return {"error": "Lighthouse CLI not found. Install with: npm install -g lighthouse"}
def get_summary(categories: dict) -> str:
"""Generate summary based on scores."""
perf = categories.get("performance", {}).get("score", 0) * 100
if perf >= 90:
return "[OK] Excellent performance"
elif perf >= 50:
return "[!] Needs improvement"
else:
return "[X] Poor performance"
if __name__ == "__main__":
if len(sys.argv) < 2:
print(json.dumps({"error": "Usage: python lighthouse_audit.py <url>"}))
sys.exit(1)
result = run_lighthouse(sys.argv[1])
print(json.dumps(result, indent=2))
Related skills
FAQ
What order does performance-profiling recommend?
Measure, analyze, then optimize; it runs a baseline-identify-fix-validate loop rather than guessing at problems.
Which Core Web Vitals does it target?
LCP under 2.5s, INP under 200ms, and CLS under 0.1.