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

Discover available browser and performance tools before starting. Use the capabilities available for the requested audit. If trace tools are unavailable, continue any useful source or network analysis and state which measurements could not be collected.

If the user wants Chrome DevTools MCP setup, consult its installation guide and use the latest package version. Only change MCP configuration when setup is within the user's authorized scope; otherwise ask first. For clients using command and args, an example server entry is: