Web Performance Audit

Your knowledge of web performance metrics, thresholds, and tooling APIs may be outdated. Prefer retrieval over pre-training when citing specific numbers or recommendations.

Retrieval Sources

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

Phase 4: Accessibility Snapshot

Take an accessibility tree snapshot:

take_snapshot(verbose: true)

Flag high-level gaps:

• Missing or duplicate ARIA IDs
• Elements with poor contrast ratios (check against WCAG AA: 4.5:1 for normal text, 3:1 for large text)
• Focus traps or missing focus indicators
• Interactive elements without accessible names

Phase 5: Codebase Analysis

Skip if auditing a third-party site without codebase access.

Analyze the codebase to understand where improvements can be made.

Detect Framework & Bundler

Search for configuration files to identify the stack:

Also check package.json for framework dependencies and build scripts.

Tree-Shaking & Dead Code

• Webpack: Check for mode: 'production', sideEffects in package.json, usedExports optimization
• Vite/Rollup: Tree-shaking enabled by default; check for treeshake options
• Look for: Barrel files (index.js re-exports), large utility libraries imported wholesale (lodash, moment)

Unused JS/CSS

• Check for CSS-in-JS vs. static CSS extraction
• Look for PurgeCSS/UnCSS configuration (Tailwind's content config)
• Identify dynamic imports vs. eager loading

Polyfills

• Check for @babel/preset-env targets and useBuiltIns setting
• Look for core-js imports (often oversized)
• Check browserslist config for overly broad targeting

Compression & Minification

• Check for terser, esbuild, or swc minification
• Look for gzip/brotli compression in build output or server config
• Check for source maps in production builds (should be external or disabled)

Output Format

Present findings as:

1. Core Web Vitals Summary - Table with metric, value, and rating (good/needs-improvement/poor)
2. Top Issues - Prioritized list of problems with estimated impact (high/medium/low)
3. Recommendations - Specific, actionable fixes with code snippets or config changes
4. Codebase Findings - Framework/bundler detected, optimization opportunities (omit if no codebase access)