Web Performance Audit

Web Performance Audit

Audit web page performance using Chrome DevTools MCP tools. This skill focuses on Core Web Vitals, network optimization, and high-level accessibility gaps.

FIRST: Verify MCP Tools Available

Run this before starting. Try calling navigate_page or performance_start_trace. If unavailable, STOP—the chrome-devtools MCP server isn't configured.

Ask the user to add this to their MCP config:

"chrome-devtools": {
  "type": "local",
  "command": ["npx", "-y", "chrome-devtools-mcp@latest"]
}

Key Guidelines

• Be assertive: Verify claims by checking network requests, DOM, or codebase—then state findings definitively.
• Verify before recommending: Confirm something is unused before suggesting removal.
• Quantify impact: Use estimated savings from insights. Don't prioritize changes with 0ms impact.
• Skip non-issues: If render-blocking resources have 0ms estimated impact, note but don't recommend action.
• Be specific: Say "compress hero.png (450KB) to WebP" not "optimize images".
• Prioritize ruthlessly: A site with 200ms LCP and 0 CLS is already excellent—say so.

Quick Reference

Workflow

Copy this checklist to track progress:

Audit Progress:
- [ ] Phase 1: Performance trace (navigate + record)
- [ ] Phase 2: Core Web Vitals analysis (includes CLS culprits)
- [ ] Phase 3: Network analysis
- [ ] Phase 4: Accessibility snapshot
- [ ] Phase 5: Codebase analysis (skip if third-party site)

Phase 1: Performance Trace

1. Navigate to the target URL:

   navigate_page(url: "<target-url>")

2. Start a performance trace with reload to capture cold-load metrics:

   performance_start_trace(autoStop: true, reload: true)

3. Wait for trace completion, then retrieve results.

Troubleshooting:

• If trace returns empty or fails, verify the page loaded correctly with navigate_page first
• If insight names don't match, inspect the trace response to list available insights

Phase 2: Core Web Vitals Analysis

Use performance_analyze_insight to extract key metrics.

Note: Insight names may vary across Chrome DevTools versions. If an insight name doesn't work, check the insightSetId from the trace response to discover available insights.

Common insight names:

Example:

performance_analyze_insight(insightSetId: "<id-from-trace>", insightName: "LCPBreakdown")

Key thresholds (good/needs-improvement/poor):

• TTFB: < 800ms / < 1.8s / > 1.8s
• FCP: < 1.8s / < 3s / > 3s
• LCP: < 2.5s / < 4s / > 4s
• INP: < 200ms / < 500ms / > 500ms
• TBT: < 200ms / < 600ms / > 600ms
• CLS: < 0.1 / < 0.25 / > 0.25
• Speed Index: < 3.4s / < 5.8s / > 5.8s

Phase 3: Network Analysis

List all network requests to identify optimization opportunities:

list_network_requests(resourceTypes: ["Script", "Stylesheet", "Document", "Font", "Image"])

Look for:

1. Render-blocking resources: JS/CSS in <head> without async/defer/media attributes
2. Network chains: Resources discovered late because they depend on other resources loading first (e.g., CSS imports, JS-loaded fonts)
3. Missing preloads: Critical resources (fonts, hero images, key scripts) not preloaded
4. Caching issues: Missing or weak Cache-Control, ETag, or Last-Modified headers
5. Large payloads: Uncompressed or oversized JS/CSS bundles
6. Unused preconnects: If flagged, verify by checking if ANY requests went to that origin. If zero requests, it's definitively unused—recommend removal. If requests exist but loaded late, the preconnect may still be valuable.

For detailed request info:

get_network_request(reqid: <id>)