web-perf

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

Task	Tool Call
Load page	navigate_page(url: "...")
Start trace	performance_start_trace(autoStop: true, reload: true)
Analyze insight	performance_analyze_insight(insightSetId: "...", insightName: "...")
List requests	list_network_requests(resourceTypes: ["Script", "Stylesheet", ...])
Request details	get_network_request(reqid: <id>)
A11y snapshot	take_snapshot(verbose: true)

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>")