web-perf

SKILL.md

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

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: