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
| Source |
How to retrieve |
Use for |
| web.dev |
https://web.dev/articles/vitals |
Core Web Vitals thresholds, definitions |
| Chrome DevTools docs |
https://developer.chrome.com/docs/devtools/performance |
Tooling APIs, trace analysis |
| Lighthouse scoring |
https://developer.chrome.com/docs/lighthouse/performance/performance-scoring |
Score weights, metric thresholds |
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)
1---2name: web-performance-audit3description: Analyze deployed websites and web apps for performance quality. Measures Core Web Vitals, load metrics, render-blocking resources, network dependency chains, layout shifts, caching issues, and accessibility gaps. Use after deployment or when asked to audit, profile, debug, or optimize page speed and site performance.4---5
6# Web Performance Audit
7
8Your knowledge of web performance metrics, thresholds, and tooling APIs may be outdated. **Prefer retrieval over pre-training** when citing specific numbers or recommendations.
9
10## Retrieval Sources
11
12| Source | How to retrieve | Use for |
13|--------|----------------|---------|
14| web.dev | `https://web.dev/articles/vitals` | Core Web Vitals thresholds, definitions |
15| Chrome DevTools docs | `https://developer.chrome.com/docs/devtools/performance` | Tooling APIs, trace analysis |
16| Lighthouse scoring | `https://developer.chrome.com/docs/lighthouse/performance/performance-scoring` | Score weights, metric thresholds |
17
18## FIRST: Verify MCP Tools Available
19
20**Run this before starting.** Try calling `navigate_page` or `performance_start_trace`. If unavailable, STOP—the chrome-devtools MCP server isn't configured.
21
22Ask the user to add this to their MCP config:
23
24```json
25"chrome-devtools": {
26 "type": "local",
27 "command": ["npx", "-y", "chrome-devtools-mcp@latest"]
28}
29```
30
31## Key Guidelines
32
33- **Be assertive**: Verify claims by checking network requests, DOM, or codebase—then state findings definitively.
34- **Verify before recommending**: Confirm something is unused before suggesting removal.
35- **Quantify impact**: Use estimated savings from insights. Don't prioritize changes with 0ms impact.
36- **Skip non-issues**: If render-blocking resources have 0ms estimated impact, note but don't recommend action.
37- **Be specific**: Say "compress hero.png (450KB) to WebP" not "optimize images".
38- **Prioritize ruthlessly**: A site with 200ms LCP and 0 CLS is already excellent—say so.
39
40## Quick Reference
41
42| Task | Tool Call |
43|------|-----------|
44| Load page | `navigate_page(url: "...")` |
45| Start trace | `performance_start_trace(autoStop: true, reload: true)` |
46| Analyze insight | `performance_analyze_insight(insightSetId: "...", insightName: "...")` |
47| List requests | `list_network_requests(resourceTypes: ["Script", "Stylesheet", ...])` |
48| Request details | `get_network_request(reqid: <id>)` |
49| A11y snapshot | `take_snapshot(verbose: true)` |
50
51## Workflow
52
53Copy this checklist to track progress:
54
55```
56Audit Progress:
57- [ ] Phase 1: Performance trace (navigate + record)
58- [ ] Phase 2: Core Web Vitals analysis (includes CLS culprits)
59- [ ] Phase 3: Network analysis
60- [ ] Phase 4: Accessibility snapshot
61- [ ] Phase 5: Codebase analysis (skip if third-party site)
62```
63
64### Phase 1: Performance Trace
65
661. Navigate to the target URL:
67 ```
68 navigate_page(url: "<target-url>")
69 ```
70
712. Start a performance trace with reload to capture cold-load metrics:
72 ```
73 performance_start_trace(autoStop: true, reload: true)
74 ```
75
763. Wait for trace completion, then retrieve results.
77
78**Troubleshooting:**
79- If trace returns empty or fails, verify the page loaded correctly with `navigate_page` first
80- If insight names don't match, inspect the trace response to list available insights
81
82### Phase 2: Core Web Vitals Analysis
83
84Use `performance_analyze_insight` to extract key metrics.
85
86**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.
87
88Common insight names:
89
90| Metric | Insight Name | What to Look For |
91|--------|--------------|------------------|
92| LCP | `LCPBreakdown` | Time to largest contentful paint; breakdown of TTFB, resource load, render delay |
93| CLS | `CLSCulprits` | Elements causing layout shifts (images without dimensions, injected content, font swaps) |
94| Render Blocking | `RenderBlocking` | CSS/JS blocking first paint |
95| Document Latency | `DocumentLatency` | Server response time issues |
96| Network Dependencies | `NetworkRequestsDepGraph` | Request chains delaying critical resources |
97
98Example:
99```
100performance_analyze_insight(insightSetId: "<id-from-trace>", insightName: "LCPBreakdown")
101```
102
103**Key thresholds (good/needs-improvement/poor):**
104- TTFB: < 800ms / < 1.8s / > 1.8s
105- FCP: < 1.8s / < 3s / > 3s
106- LCP: < 2.5s / < 4s / > 4s
107- INP: < 200ms / < 500ms / > 500ms
108- TBT: < 200ms / < 600ms / > 600ms
109- CLS: < 0.1 / < 0.25 / > 0.25
110- Speed Index: < 3.4s / < 5.8s / > 5.8s
111
112### Phase 3: Network Analysis
113
114List all network requests to identify optimization opportunities:
115```
116list_network_requests(resourceTypes: ["Script", "Stylesheet", "Document", "Font", "Image"])
117```
118
119**Look for:**
120
1211. **Render-blocking resources**: JS/CSS in `<head>` without `async`/`defer`/`media` attributes
1222. **Network chains**: Resources discovered late because they depend on other resources loading first (e.g., CSS imports, JS-loaded fonts)
1233. **Missing preloads**: Critical resources (fonts, hero images, key scripts) not preloaded
1244. **Caching issues**: Missing or weak `Cache-Control`, `ETag`, or `Last-Modified` headers
1255. **Large payloads**: Uncompressed or oversized JS/CSS bundles
1266. **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.
127
128For detailed request info:
129```
130get_network_request(reqid: <id>)
131```
132
133### Phase 4: Accessibility Snapshot
134
135Take an accessibility tree snapshot:
136```
137take_snapshot(verbose: true)
138```
139
140**Flag high-level gaps:**
141- Missing or duplicate ARIA IDs
142- Elements with poor contrast ratios (check against WCAG AA: 4.5:1 for normal text, 3:1 for large text)
143- Focus traps or missing focus indicators
144- Interactive elements without accessible names
145
146## Phase 5: Codebase Analysis
147
148**Skip if auditing a third-party site without codebase access.**
149
150Analyze the codebase to understand where improvements can be made.
151
152### Detect Framework & Bundler
153
154Search for configuration files to identify the stack:
155
156| Tool | Config Files |
157|------|--------------|
158| Webpack | `webpack.config.js`, `webpack.*.js` |
159| Vite | `vite.config.js`, `vite.config.ts` |
160| Rollup | `rollup.config.js`, `rollup.config.mjs` |
161| esbuild | `esbuild.config.js`, build scripts with `esbuild` |
162| Parcel | `.parcelrc`, `package.json` (parcel field) |
163| Next.js | `next.config.js`, `next.config.mjs` |
164| Nuxt | `nuxt.config.js`, `nuxt.config.ts` |
165| SvelteKit | `svelte.config.js` |
166| Astro | `astro.config.mjs` |
167
168Also check `package.json` for framework dependencies and build scripts.
169
170### Tree-Shaking & Dead Code
171
172- **Webpack**: Check for `mode: 'production'`, `sideEffects` in package.json, `usedExports` optimization
173- **Vite/Rollup**: Tree-shaking enabled by default; check for `treeshake` options
174- **Look for**: Barrel files (`index.js` re-exports), large utility libraries imported wholesale (lodash, moment)
175
176### Unused JS/CSS
177
178- Check for CSS-in-JS vs. static CSS extraction
179- Look for PurgeCSS/UnCSS configuration (Tailwind's `content` config)
180- Identify dynamic imports vs. eager loading
181
182### Polyfills
183
184- Check for `@babel/preset-env` targets and `useBuiltIns` setting
185- Look for `core-js` imports (often oversized)
186- Check `browserslist` config for overly broad targeting
187
188### Compression & Minification
189
190- Check for `terser`, `esbuild`, or `swc` minification
191- Look for gzip/brotli compression in build output or server config
192- Check for source maps in production builds (should be external or disabled)
193
194## Output Format
195
196Present findings as:
197
1981. **Core Web Vitals Summary** - Table with metric, value, and rating (good/needs-improvement/poor)
1992. **Top Issues** - Prioritized list of problems with estimated impact (high/medium/low)
2003. **Recommendations** - Specific, actionable fixes with code snippets or config changes
2014. **Codebase Findings** - Framework/bundler detected, optimization opportunities (omit if no codebase access)
infometa