Web Perf

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