playbooks

home / skills / vudovn / antigravity-kit / performance-profiling

performance-profiling skill

/.agent/skills/performance-profiling

This skill helps you measure, analyze, and optimize performance using core web vitals, profiling workflows, and bundle analysis insights.

npx playbooks add skill vudovn/antigravity-kit --skill performance-profiling

Review the files below or copy the command above to add this skill to your agents.

Files (2)
SKILL.md
3.0 KB
---
name: performance-profiling
description: Performance profiling principles. Measurement, analysis, and optimization techniques.
allowed-tools: Read, Glob, Grep, Bash
---

# 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.

Overview

This skill teaches practical performance profiling principles: how to measure, analyze, and optimize web application performance. It emphasizes a disciplined workflow to establish baselines, find bottlenecks, apply targeted fixes, and validate improvements. The guidance covers Core Web Vitals, bundle and runtime profiling, quick wins, and anti-patterns.

How this skill works

The skill explains which tools to use for each problem area (Lighthouse for page load, bundle analyzers for bundle size, DevTools for runtime and memory). It details a four-step workflow: baseline measurement, identification of bottlenecks, targeted fixes, and validation. It also maps symptoms to likely causes and recommends concrete optimization actions and priorities.

When to use it

  • Before making major performance changes—establish a baseline first
  • During development to catch regressions with local Lighthouse and DevTools
  • In CI/CD to enforce performance budgets with Lighthouse CI
  • In production for real user monitoring (RUM) to prioritize real-world issues
  • When investigating specific problems like memory leaks, long tasks, or large bundles

Best practices

  • Measure before you optimize and validate after every fix
  • Choose the right tool for the problem: load, bundle, runtime, memory, or network
  • Attack high-impact issues first (compression, lazy loading, code splitting)
  • Prefer removing work over micro-optimizing it—don’t run unnecessary code
  • Use RUM to prioritize optimizations that affect real users

Example use cases

  • Run Lighthouse locally to establish Core Web Vitals baseline for a new release
  • Use bundle analyzer to locate and split a large dependency that delays first paint
  • Profile runtime with DevTools Performance to identify long tasks and batching opportunities
  • Use DevTools Memory to find and fix a leak causing growing heap and retained objects
  • Integrate Lighthouse CI in the pipeline to prevent regressions in LCP, CLS, or INP

FAQ

What order should I follow when profiling?

Always measure first to get a baseline, identify the main bottleneck, apply a targeted fix, and then validate the improvement.

Which tool catches production issues best?

Real User Monitoring (RUM) captures real-world behavior and should guide prioritization; combine it with synthetic tools like Lighthouse for reproducible tests.