web-perf
Analyzes web performance using Chrome DevTools MCP. Measures Core Web Vitals (LCP, INP, CLS) and supplementary metrics (FCP, TBT, 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. Biases towards retrieval from current documentation over pre-trained knowledge.
Profile →npx skills add cloudflare/skills --skill web-perf --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# 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: ```json "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 suggest
- Retrieval Sources
- FIRST: Verify MCP Tools Available
- Key Guidelines
- Quick Reference
- Workflow
- Phase 1: Performance Trace
- Phase 2: Core Web Vitals Analysis
- Phase 3: Network Analysis
- Phase 4: Accessibility Snapshot
- Phase 5: Codebase Analysis
- Detect Framework & Bundler
- Tree-Shaking & Dead Code
- Unused JS/CSS
- Polyfills
What does the web-perf skill do?
Analyzes web performance using Chrome DevTools MCP. Measures Core Web Vitals (LCP, INP, CLS) and supplementary metrics (FCP, TBT, 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. Biases towards retrieval from current documentation over pre-trained knowledge.
How do I install it?
Run `npx skills add cloudflare/skills --skill web-perf --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From cloudflare/skills, a repository with 2,539 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.