Performance Audit Skill

Analyze web page performance using Web Vitals and network timing metrics.

When to Use

This skill activates when:

• User asks about page performance or speed
• User wants to optimize load times
• User mentions slow page, slow API, or poor user experience
• User needs Core Web Vitals metrics
• User asks about backend bottlenecks or TTFB
• User asks about SEO performance factors

Capabilities

Web Vitals Analysis

browser-devtools-cli o11y get-web-vitals
browser-devtools-cli --json o11y get-web-vitals
browser-devtools-cli --json o11y get-web-vitals --wait-ms 3000
browser-devtools-cli --json o11y get-web-vitals --include-debug

Network Performance

browser-devtools-cli --json o11y get-http-requests
browser-devtools-cli --json o11y get-http-requests --resource-type script,stylesheet
browser-devtools-cli --json o11y get-http-requests --status-min 400

Visual Analysis

browser-devtools-cli content take-screenshot --name "above-fold"
browser-devtools-cli content take-screenshot --name "full-page" --full-page

JavaScript Execution Analysis

browser-devtools-cli run js-in-browser --script "performance.getEntriesByType('longtask')"
browser-devtools-cli run js-in-browser --script "performance.getEntriesByType('resource')"

Performance Thresholds

Audit Workflow

SESSION="--session-id perf-audit"

# 1. Navigate to page
browser-devtools-cli $SESSION navigation go-to --url "https://example.com"

# 2. Wait for page to settle
browser-devtools-cli $SESSION sync wait-for-network-idle

# 3. Get Web Vitals
browser-devtools-cli $SESSION --json o11y get-web-vitals --wait-ms 2000

# 4. Analyze network requests
browser-devtools-cli $SESSION --json o11y get-http-requests

# 5. Check for console errors
browser-devtools-cli $SESSION --json o11y get-console-messages --types error,warn

# 6. Take screenshot for reference
browser-devtools-cli $SESSION content take-screenshot --name "performance-audit"

# 7. Cleanup
browser-devtools-cli session delete perf-audit

Detailed Analysis

Check Large Resources

browser-devtools-cli --json o11y get-http-requests --resource-type image,script,stylesheet

Check Slow Requests

browser-devtools-cli --json o11y get-http-requests
# Look for requests with high timing values

Check Render-Blocking Resources

browser-devtools-cli run js-in-browser --script "
  performance.getEntriesByType('resource')
    .filter(r => r.renderBlockingStatus === 'blocking')
    .map(r => ({name: r.name, duration: r.duration}))
"

Check Long Tasks

browser-devtools-cli run js-in-browser --script "
  performance.getEntriesByType('longtask')
    .map(t => ({startTime: t.startTime, duration: t.duration}))
"

Backend Performance (node-devtools-cli)

When TTFB or API latency suggests backend bottlenecks, inspect the Node.js process:

# Connect to API/server process
node-devtools-cli --session-id perf debug connect --pid 12345

# Check memory and CPU
node-devtools-cli --session-id perf run js-in-node --script "process.memoryUsage()"
node-devtools-cli --session-id perf run js-in-node --script "require('os').loadavg()"

# Tracepoint on slow handler to capture call context
node-devtools-cli --session-id perf debug put-tracepoint \
  --url-pattern "routes/heavy.ts" \
  --line-number 30

Common Issues

• Large unoptimized images
• Render-blocking CSS/JS
• Too many HTTP requests
• Slow server response (TTFB)
• Layout shifts from dynamic content
• Uncompressed resources
• Missing caching headers
• Third-party scripts blocking main thread

Best Practices

1. Run multiple times for consistent results
2. Wait for network idle before measuring
3. Use --wait-ms for LCP/CLS to settle
4. Check network requests for slow/large resources
5. Take screenshots at different load stages
6. Test on different network conditions (throttle if needed)
7. Compare before/after for optimization validation