🎯

performance-profiling

🎯Skill

from sebas-aikon-intelligence/antigravity-awesome-skills

What it does

Measures and optimizes web performance through systematic profiling, analyzing metrics like Core Web Vitals, bundle size, runtime, and memory usage.

📦

Part of

sebas-aikon-intelligence/antigravity-awesome-skills(171 items)

performance-profiling

Installation

git cloneClone repository

git clone https://github.com/sickn33/antigravity-awesome-skills.git .agent/skills

git cloneClone repository

git clone https://github.com/sickn33/antigravity-awesome-skills.git .claude/skills

git cloneClone repository

git clone https://github.com/sickn33/antigravity-awesome-skills.git .gemini/skills

git cloneClone repository

git clone https://github.com/sickn33/antigravity-awesome-skills.git .cursor/skills

📖 Extracted from docs: sebas-aikon-intelligence/antigravity-awesome-skills

Need more details? View full documentation on GitHub →

2Installs

AddedFeb 4, 2026

View on GitHub Back to Skills

Skill Details

SKILL.md

Performance profiling principles. Measurement, analysis, and optimization techniques.

Overview

# 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

|--------|------|------|----------|

| 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

```

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 |

---

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.

More from this repository10

🎯

rag-engineer🎯Skill

Skill

🎯

react-ui-patterns🎯Skill

Skill

🎯

i18n-localization🎯Skill

Detects and helps internationalize applications by identifying hardcoded strings, managing translations, and supporting multi-language and RTL language requirements.

🎯

tailwind-patterns🎯Skill

Skill

🎯

react-patterns🎯Skill

Skill

🎯

frontend-patterns🎯Skill

Generates and refactors modern frontend design patterns, architectural best practices, and reusable component structures across various JavaScript/TypeScript frameworks.

🎯

api-documentation-generator🎯Skill

Generates comprehensive, developer-friendly API documentation from code, extracting endpoint details, parameters, examples, and best practices automatically.

🎯

d3-viz🎯Skill

Generates interactive data visualizations using D3.js, enabling rapid creation of complex charts, graphs, and visual data representations directly within Claude Code.

🎯

requesting-code-review🎯Skill

Skill

🎯

core-components🎯Skill

Provides a comprehensive design system library with standardized tokens, components, and styling patterns for consistent and scalable UI development.