performance

Performance Debugging

Diagnose and resolve performance issues including slow renders, large bundle sizes, N+1 database queries, memory leaks, and general sluggishness.

Arguments

Parse $ARGUMENTS:

• If --url <url> flag provided, navigate to that URL for profiling
• Remaining text describes the performance symptom
• If empty, prompt for details

Phase 1: Problem Identification

Infer the symptom class (slow load / sluggish interactions / bundle size / memory / slow API / general), the scope (page, component, whole app, dev-only), and the timeline (recent regression vs always slow) from $ARGUMENTS and the initial profiling. Ask a clarifying question only when the answer genuinely changes the investigation path — a recent regression points at git log, "gets slower over time" points at leaks.

Phase 2: Initial Profiling

2.1 Browser Performance Check

If URL provided, navigate and profile:

mcp__plugin_playwright_playwright__browser_navigate: { url: "[url]" }
mcp__plugin_playwright_playwright__browser_snapshot: {}
mcp__plugin_playwright_playwright__browser_console_messages: { level: "warning" }
mcp__plugin_playwright_playwright__browser_network_requests: { includeStatic: true }

2.2 Check for Console Warnings

Look for performance-related warnings:

• React rendering warnings
• Memory warnings
• Long task warnings
• Deprecated API warnings

2.3 Network Timing Analysis

Analyze network requests for:

• Large payloads: Responses > 100KB
• Slow requests: Requests > 1s
• Waterfall issues: Requests blocking each other
• Duplicate requests: Same endpoint called multiple times

2.4 Basic Performance Metrics

mcp__plugin_playwright_playwright__browser_evaluate: {
  function: "() => { const timing = performance.timing; return { loadTime: timing.loadEventEnd - timing.navigationStart, domReady: timing.domContentLoadedEventEnd - timing.navigationStart, firstPaint: performance.getEntriesByType('paint')[0]?.startTime || 'N/A' }; }"
}