benchmark-perf

Bobby Performance Skill

Measures page load times, resource sizes, and detects regressions. Establishes baselines and compares before/after on every run.

Before Starting

1. Check learnings — Read .claude/skills/bobby-performance/learnings.md + .claude/skills/bobby-performance/learnings.local.md
2. Read .bobby/benchmarks/baseline.json if it exists
3. Health check — Verify dev environment:

Benchmarking Process

Step 1: Identify Pages to Benchmark

Benchmark these pages (in order of priority):

1. Homepage / landing page
2. Main dashboard or primary user view
3. Any pages affected by recently shipped tickets
4. Pages listed in .bobbyrc.yml under watchdog_pages (if configured)

Step 2: Measure Each Page

For each page, measure via browser automation:

Page Load Metrics:

• Time to First Byte (TTFB) — performance.timing.responseStart - performance.timing.requestStart
• First Contentful Paint (FCP) — performance.getEntriesByName('first-contentful-paint')[0].startTime
• DOM Content Loaded — performance.timing.domContentLoadedEventEnd - performance.timing.navigationStart
• Full Page Load — performance.timing.loadEventEnd - performance.timing.navigationStart

Resource Metrics:

• Total transfer size — sum of performance.getEntriesByType('resource').map(r => r.transferSize)
• Number of requests — performance.getEntriesByType('resource').length
• Largest resource — identify the biggest JS/CSS/image file

Interaction Metrics (if applicable):

• Time to Interactive — can the user click/type within 3 seconds?
• Layout shift — does the page jump around during load?

Step 3: Record Results

Save results to .bobby/benchmarks/run-{YYYYMMDD-HHmmss}.json:

{
  "timestamp": "ISO date",
  "branch": "current git branch",
  "pages": [
    {
      "url": "/dashboard",
      "ttfb_ms": 120,
      "fcp_ms": 450,
      "dom_loaded_ms": 800,
      "full_load_ms": 1200,
      "total_transfer_kb": 850,
      "request_count": 42,
      "largest_resource": { "url": "/js/bundle.js", "size_kb": 320 }
    }
  ]
}