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.
Prerequisites
Verify the chrome-devtools MCP server is configured. Test by calling navigate_page or performance_start_trace. If unavailable, add to 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. Skip changes with 0ms impact.
- 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.
- AI Assistance panel (Chrome 130+): DevTools includes an AI Assistance panel that can explain console errors, performance insights, and network issues. Use it as a complement to manual analysis, not a replacement.
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.0s / < 4s / > 4s (updated March 2026 — previously 2.5s)
- 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)
Soft Navigations API (SPA Measurement)
For single-page applications, Chrome supports the Soft Navigations API to measure Core Web Vitals across client-side navigations:
- Enable via
PerformanceObserver with { type: 'soft-navigation', buffered: true }
- CrUX reports soft navigation CWV separately from full page loads
- Use the
web-vitals library (v4+) with reportSoftNavs: true for automatic collection
- Soft navigations are detected when a user interaction triggers a URL change and DOM modification
This is critical for SPAs where most user experience happens after the initial load.
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)
1---2name: web-perf3description: Analyzes web performance using Chrome DevTools MCP. Measures Core Web Vitals (FCP, LCP, TBT, CLS, Speed Index), identifies render-blocking resources, network dependency chains, layout shifts, caching issues, and accessibility gaps. Use when asked to audit, profile, debug, or optimize page load performance, Lighthouse scores, or site speed.4---56# Web Performance Audit78Audit web page performance using Chrome DevTools MCP tools. This skill focuses on Core Web Vitals, network optimization, and high-level accessibility gaps.910## Prerequisites1112Verify the chrome-devtools MCP server is configured. Test by calling `navigate_page` or `performance_start_trace`. If unavailable, add to MCP config:1314```json15"chrome-devtools": {16 "type": "local",17 "command": ["npx", "-y", "chrome-devtools-mcp@latest"]18}19```2021## Key Guidelines2223- **Be assertive**: Verify claims by checking network requests, DOM, or codebase — then state findings definitively.24- **Verify before recommending**: Confirm something is unused before suggesting removal.25- **Quantify impact**: Use estimated savings from insights. Skip changes with 0ms impact.26- **Be specific**: Say "compress hero.png (450KB) to WebP" not "optimize images".27- **Prioritize ruthlessly**: A site with 200ms LCP and 0 CLS is already excellent — say so.28- **AI Assistance panel (Chrome 130+)**: DevTools includes an AI Assistance panel that can explain console errors, performance insights, and network issues. Use it as a complement to manual analysis, not a replacement.2930## Quick Reference3132| Task | Tool Call |33|------|-----------|34| Load page | `navigate_page(url: "...")` |35| Start trace | `performance_start_trace(autoStop: true, reload: true)` |36| Analyze insight | `performance_analyze_insight(insightSetId: "...", insightName: "...")` |37| List requests | `list_network_requests(resourceTypes: ["Script", "Stylesheet", ...])` |38| Request details | `get_network_request(reqid: <id>)` |39| A11y snapshot | `take_snapshot(verbose: true)` |4041## Workflow4243Copy this checklist to track progress:4445```46Audit Progress:47- [ ] Phase 1: Performance trace (navigate + record)48- [ ] Phase 2: Core Web Vitals analysis (includes CLS culprits)49- [ ] Phase 3: Network analysis50- [ ] Phase 4: Accessibility snapshot51- [ ] Phase 5: Codebase analysis (skip if third-party site)52```5354### Phase 1: Performance Trace55561. Navigate to the target URL:57 ```58 navigate_page(url: "<target-url>")59 ```60612. Start a performance trace with reload to capture cold-load metrics:62 ```63 performance_start_trace(autoStop: true, reload: true)64 ```65663. Wait for trace completion, then retrieve results.6768**Troubleshooting:**69- If trace returns empty or fails, verify the page loaded correctly with `navigate_page` first70- If insight names don't match, inspect the trace response to list available insights7172### Phase 2: Core Web Vitals Analysis7374Use `performance_analyze_insight` to extract key metrics.7576**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.7778Common insight names:7980| Metric | Insight Name | What to Look For |81|--------|--------------|------------------|82| LCP | `LCPBreakdown` | Time to largest contentful paint; breakdown of TTFB, resource load, render delay |83| CLS | `CLSCulprits` | Elements causing layout shifts (images without dimensions, injected content, font swaps) |84| Render Blocking | `RenderBlocking` | CSS/JS blocking first paint |85| Document Latency | `DocumentLatency` | Server response time issues |86| Network Dependencies | `NetworkRequestsDepGraph` | Request chains delaying critical resources |8788Example:89```90performance_analyze_insight(insightSetId: "<id-from-trace>", insightName: "LCPBreakdown")91```9293**Key thresholds (good/needs-improvement/poor):**94- TTFB: < 800ms / < 1.8s / > 1.8s95- FCP: < 1.8s / < 3s / > 3s96- LCP: < 2.0s / < 4s / > 4s *(updated March 2026 — previously 2.5s)*97- INP: < 200ms / < 500ms / > 500ms98- TBT: < 200ms / < 600ms / > 600ms99- CLS: < 0.1 / < 0.25 / > 0.25100- Speed Index: < 3.4s / < 5.8s / > 5.8s101102### Phase 3: Network Analysis103104List all network requests to identify optimization opportunities:105```106list_network_requests(resourceTypes: ["Script", "Stylesheet", "Document", "Font", "Image"])107```108109**Look for:**1101111. **Render-blocking resources**: JS/CSS in `<head>` without `async`/`defer`/`media` attributes1122. **Network chains**: Resources discovered late because they depend on other resources loading first (e.g., CSS imports, JS-loaded fonts)1133. **Missing preloads**: Critical resources (fonts, hero images, key scripts) not preloaded1144. **Caching issues**: Missing or weak `Cache-Control`, `ETag`, or `Last-Modified` headers1155. **Large payloads**: Uncompressed or oversized JS/CSS bundles1166. **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.117118For detailed request info:119```120get_network_request(reqid: <id>)121```122123### Phase 4: Accessibility Snapshot124125Take an accessibility tree snapshot:126```127take_snapshot(verbose: true)128```129130**Flag high-level gaps:**131- Missing or duplicate ARIA IDs132- Elements with poor contrast ratios (check against WCAG AA: 4.5:1 for normal text, 3:1 for large text)133- Focus traps or missing focus indicators134- Interactive elements without accessible names135136## Phase 5: Codebase Analysis137138**Skip if auditing a third-party site without codebase access.**139140Analyze the codebase to understand where improvements can be made.141142### Detect Framework & Bundler143144Search for configuration files to identify the stack:145146| Tool | Config Files |147|------|--------------|148| Webpack | `webpack.config.js`, `webpack.*.js` |149| Vite | `vite.config.js`, `vite.config.ts` |150| Rollup | `rollup.config.js`, `rollup.config.mjs` |151| esbuild | `esbuild.config.js`, build scripts with `esbuild` |152| Parcel | `.parcelrc`, `package.json` (parcel field) |153| Next.js | `next.config.js`, `next.config.mjs` |154| Nuxt | `nuxt.config.js`, `nuxt.config.ts` |155| SvelteKit | `svelte.config.js` |156| Astro | `astro.config.mjs` |157158Also check `package.json` for framework dependencies and build scripts.159160### Tree-Shaking & Dead Code161162- **Webpack**: Check for `mode: 'production'`, `sideEffects` in package.json, `usedExports` optimization163- **Vite/Rollup**: Tree-shaking enabled by default; check for `treeshake` options164- **Look for**: Barrel files (`index.js` re-exports), large utility libraries imported wholesale (lodash, moment)165166### Unused JS/CSS167168- Check for CSS-in-JS vs. static CSS extraction169- Look for PurgeCSS/UnCSS configuration (Tailwind's `content` config)170- Identify dynamic imports vs. eager loading171172### Polyfills173174- Check for `@babel/preset-env` targets and `useBuiltIns` setting175- Look for `core-js` imports (often oversized)176- Check `browserslist` config for overly broad targeting177178### Compression & Minification179180- Check for `terser`, `esbuild`, or `swc` minification181- Look for gzip/brotli compression in build output or server config182- Check for source maps in production builds (should be external or disabled)183184## Soft Navigations API (SPA Measurement)185186For single-page applications, Chrome supports the Soft Navigations API to measure Core Web Vitals across client-side navigations:187188- Enable via `PerformanceObserver` with `{ type: 'soft-navigation', buffered: true }`189- CrUX reports soft navigation CWV separately from full page loads190- Use the `web-vitals` library (v4+) with `reportSoftNavs: true` for automatic collection191- Soft navigations are detected when a user interaction triggers a URL change and DOM modification192193This is critical for SPAs where most user experience happens after the initial load.194195## Output Format196197Present findings as:1981991. **Core Web Vitals Summary** - Table with metric, value, and rating (good/needs-improvement/poor)2002. **Top Issues** - Prioritized list of problems with estimated impact (high/medium/low)2013. **Recommendations** - Specific, actionable fixes with code snippets or config changes2024. **Codebase Findings** - Framework/bundler detected, optimization opportunities (omit if no codebase access)
lidge-jun