Performance Profiling
FreeMeasure, analyze, and optimize your web performance.
Free ยท Opens the source repo
What Performance Profiling does
Performance Profiling is a skill designed for developers and designers who want to enhance the performance of their web applications. It provides a structured approach to measuring, analyzing, and optimizing web performance, specifically focusing on Core Web Vitals, which are critical metrics for user experience. By utilizing the included lighthouse_audit.py script, users can automate performance audits for their websites, helping them to identify areas that require improvement.
The skill outlines a comprehensive profiling workflow consisting of four essential steps: establishing a baseline, identifying bottlenecks, implementing fixes, and validating improvements. This systematic approach ensures that performance enhancements are data-driven and effective. Additionally, it provides guidance on selecting the right tools for various profiling tasks, whether it's analyzing page load times with Lighthouse or examining memory usage through DevTools.
Moreover, the skill delves into bundle analysis, helping users recognize common issues such as large dependencies and duplicate code. It suggests actionable optimization techniques, including code splitting and tree shaking, to streamline application performance. The resource also highlights common bottlenecks and quick win priorities, allowing users to tackle the most impactful performance issues first.
Overall, Performance Profiling serves as a practical resource for those looking to improve their web applications' performance through proven techniques and tools, making it a valuable addition to any developer's toolkit.
When to use it
Use this skill when you need to measure and optimize the performance of your web applications, especially during development and production stages.
When not to use it
This skill may not be suitable for applications where performance is not a critical concern or for users unfamiliar with web performance metrics.
What you can build with it
Automating Performance Audits
Use the `lighthouse_audit.py` script to run automated performance audits on your website, identifying critical areas for improvement.
Improving User Experience
Apply the insights from Core Web Vitals to enhance the loading speed and interactivity of your web applications, leading to a better user experience.
Streamlining Code Bundles
Analyze your code bundles to identify large or duplicate dependencies, and implement optimization techniques to reduce load times.
How to install Performance Profiling
View source1. Install with the skills CLI
npx skills add davila7/claude-code-templates/performance-profiling --agent claude-code2. Or install it manually
Download the skill folder and drop it into ~/.claude/skills/ for all projects, or .claude/skills/ to scope it to one repo. Restart Claude Code so it picks up the new skill.
Anthropic's agentic coding CLI, and the reference implementation of Agent Skills. Drop a skill folder into ~/.claude/skills and Claude Code loads it automatically whenever a task matches the skill's description. Claude Code docs
Inside SKILL.md
Written by davila7Performance 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.
Frequently asked questions about Performance Profiling
Similar skills
Heap Snapshot Analysis
Investigate V8 heap snapshots for memory issues.
VS Code Performance Workflow
Automate performance investigations in VS Code.
Memory Leak Audit
Prevent memory leaks with effective coding patterns.
CPU Profile Analysis
Analyze V8 and Chrome performance profiles for optimization.
Chat Performance Testing
Benchmark and validate chat UI performance in VS Code.
Vercel React Best Practices
Optimize your React and Next.js applications for performance.