web-perf
Installation
Summary
Measures Core Web Vitals and identifies render-blocking resources, network chains, layout shifts, and caching issues.
- Analyzes performance traces using Chrome DevTools MCP to extract FCP, LCP, TBT, CLS, Speed Index, and TTFB with detailed breakdowns
- Identifies render-blocking CSS/JS, network dependency chains, missing preloads, and caching header gaps through network request inspection
- Detects layout shift culprits (images without dimensions, injected content, font swaps) and accessibility gaps via DOM snapshots
- Requires chrome-devtools MCP server configured; provides checklist-driven audit workflow across performance, network, and accessibility phases
- Prioritizes findings by estimated impact and skips non-issues; biases toward live documentation over pre-trained thresholds
SKILL.md
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: