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

Navigate to the target URL:

navigate_page(url: "<target-url>")
Start a performance trace with reload to capture cold-load metrics:

performance_start_trace(autoStop: true, reload: true)
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:

Metric

Insight Name

What to Look For

LCP

LCPBreakdown

Time to largest contentful paint; breakdown of TTFB, resource load, render delay

CLS

CLSCulprits

Elements causing layout shifts (images without dimensions, injected content, font swaps)

Render Blocking

RenderBlocking

CSS/JS blocking first paint

Document Latency

DocumentLatency

Server response time issues

Network Dependencies

NetworkRequestsDepGraph

Request chains delaying critical resources

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:

Render-blocking resources: JS/CSS in <head> without async/defer/media attributes
Network chains: Resources discovered late because they depend on other resources loading first (e.g., CSS imports, JS-loaded fonts)
Missing preloads: Critical resources (fonts, hero images, key scripts) not preloaded
Caching issues: Missing or weak Cache-Control, ETag, or Last-Modified headers
Large payloads: Uncompressed or oversized JS/CSS bundles
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:

Tool

Config Files

Webpack

webpack.config.js, webpack.*.js

Vite

vite.config.js, vite.config.ts

Rollup

rollup.config.js, rollup.config.mjs

esbuild

esbuild.config.js, build scripts with esbuild

Parcel

.parcelrc, package.json (parcel field)

Next.js

next.config.js, next.config.mjs

Nuxt

nuxt.config.js, nuxt.config.ts

SvelteKit

svelte.config.js

Astro

astro.config.mjs

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:

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