browser-profilinglisted
Install: claude install-skill tstapler/dotfiles
# Browser / React Performance Profiling
End-to-end workflow: triage the complaint → capture numeric baseline → isolate the layer (browser vs React vs network) → deep-dive the bottleneck → fix → verify the fix matches the baseline.
## Triage Table — Classify Before You Profile
| Symptom | Likely Layer | Primary Tool |
|---------|-------------|-------------|
| Slow initial page load | Network / bundle | Lighthouse, bundle analyzer, coverage API |
| Slow after clicking / typing | JS / React renders | Performance panel, React `<Profiler>` |
| Scrolling jank / dropped frames | Layout thrashing / paint | FPS meter, Performance panel during scroll |
| Memory grows and never recovers | Memory leak | Memory panel Heap Snapshot + Allocation Timeline |
| App slow only on low-end devices | Long tasks / large bundles | Performance panel with 6× CPU throttle |
---
## Step 1 — Capture a Numeric Baseline
Never skip this. "It feels slow" is not a measurement. Run this Playwright script before touching code; compare after fixes.
```javascript
// scripts/perf-baseline.js — run with: node scripts/perf-baseline.js
const { chromium } = require('playwright');
async function captureBaseline(url, scenarioFn, label = 'baseline') {
const browser = await chromium.launch();
const page = await browser.newPage();
// Inject Web Vitals + Long Task observer
await page.addInitScript(() => {
window.__perfData__ = { longTasks: [], vitals: {} };
new PerformanceObserver(list => {
lis