Technical & DevelopmentIntermediate
web-perf
Performance auditing and Core Web Vitals optimizations.
Developer Setup
Setup & Installation
bash
npx skills add https://github.com/cloudflare/skills --skill web-perfnpx skills add https://github.com/cloudflare/skills --skill web-perfOr paste this URL into your assistant to install:
Overview
What This Skill Does
Analyses Lighthouse audits, render-blocking scripts, layout shifts, caching mechanisms, and performance bottlenecks.
Application
When to use this Skill
- Auditing Core Web Vitals metrics like LCP, INP, and CLS on web pages.
- Measuring supplementary performance stats like FCP, TBT, and Speed Index.
- Identifying render-blocking resources and layout shift bottlenecks.
- Debugging browser caching directives and redundant asset downloads.
- Optimizing Lighthouse auditing outcomes and accessibility compliances.
Documentation
Show Skills.md file
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:
"chrome-devtools": {
"type": "local",
"command": ["npx", "-y", "chrome-devtools-mcp@latest"]
}
Lines 1 - 25 of 196
Recommendations