mcpField
P
performance-audit

performance-audit

github.com/serkan-ozalTesting & quality752 installsUpdated 33w ago
Repository

About performance-audit

A skill for analyzing web page performance, intended for diagnosing load, network, and backend latency issues. It combines Web Vitals, request timing, and screenshots, and can inspect a Node.js process when TTFB or API latency points to the backend.

Key features

  1. 01Analyze Web Vitals metrics
  2. 02Inspect HTTP requests and timing
  3. 03Filter requests by resource type
  4. 04Capture page screenshots
  5. 05Inspect Node.js backend processes

Use cases

  1. 01Diagnose slow page loads
  2. 02Find large or slow network requests
  3. 03Investigate TTFB and API latency
  4. 04Compare performance before and after changes

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/serkan-ozal/browser-devtools-skills --skill performance-audit

After installing, type/performance-auditin Claude Code to confirm it loaded.

Details

From the project README

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
browser-devtools-cli --json o11y get-http-requests --resource-type 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

Performance Thresholds

MetricGoodNeeds WorkPoor
LCP≤2.5s2.5-4s>4s
INP≤200ms200-500ms>500ms
CLS≤0.10.1-0.25>0.25
TTFB≤800ms800-1800ms>1800ms
FCP≤1.8s1.8-3s>3s

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 --type warning

# 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
# Filter by type (one at a time: document, stylesheet, image, script, xhr, fetch, etc.)
browser-devtools-cli --json o11y get-http-requests --resource-type script
browser-devtools-cli --json o11y get-http-requests --resource-type stylesheet
browser-devtools-cli --json o11y get-http-requests --resource-type image
Check Slow Requests
browser-devtools-cli --json o11y get-http-requests
# Look for requests with high timing values

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

# 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

Comments

Markdown supported