web-perf by cloudflare/skills
npx skills add https://github.com/cloudflare/skills --skill web-perf您对网站性能指标、阈值和工具 API 的了解可能已经过时。在引用具体数字或建议时,优先使用检索而非预训练知识。
| 来源 | 如何检索 | 用途 |
|---|---|---|
| web.dev | https://web.dev/articles/vitals | 核心 Web 指标阈值、定义 |
| Chrome DevTools 文档 | https://developer.chrome.com/docs/devtools/performance | 工具 API、跟踪分析 |
| Lighthouse 评分 | https://developer.chrome.com/docs/lighthouse/performance/performance-scoring | 评分权重、指标阈值 |
在开始前运行此步骤。 尝试调用 或 。如果不可用,请停止——chrome-devtools MCP 服务器未配置。
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
navigate_pageperformance_start_trace请用户将此添加到他们的 MCP 配置中:
"chrome-devtools": {
"type": "local",
"command": ["npx", "-y", "chrome-devtools-mcp@latest"]
}
| 任务 | 工具调用 |
|---|---|
| 加载页面 | navigate_page(url: "...") |
| 开始跟踪 | performance_start_trace(autoStop: true, reload: true) |
| 分析洞察 | performance_analyze_insight(insightSetId: "...", insightName: "...") |
| 列出请求 | list_network_requests(resourceTypes: ["Script", "Stylesheet", ...]) |
| 请求详情 | get_network_request(reqid: <id>) |
| 无障碍快照 | take_snapshot(verbose: true) |
复制此清单以跟踪进度:
审计进度:
- [ ] 阶段 1:性能跟踪(导航 + 记录)
- [ ] 阶段 2:核心 Web 指标分析(包括 CLS 问题元素)
- [ ] 阶段 3:网络分析
- [ ] 阶段 4:无障碍快照
- [ ] 阶段 5:代码库分析(如果是第三方网站则跳过)
导航到目标 URL:
navigate_page(url: "<目标-url>")
开始性能跟踪并重新加载以捕获冷加载指标:
performance_start_trace(autoStop: true, reload: true)
等待跟踪完成,然后检索结果。
故障排除:
navigate_page 验证页面是否正确加载使用 performance_analyze_insight 提取关键指标。
注意: 洞察名称可能因 Chrome DevTools 版本而异。如果某个洞察名称不起作用,请检查跟踪响应中的 insightSetId 以发现可用的洞察。
常见洞察名称:
| 指标 | 洞察名称 | 关注点 |
|---|---|---|
| LCP | LCPBreakdown | 最大内容绘制时间;TTFB、资源加载、渲染延迟的细分 |
| CLS | CLSCulprits | 导致布局偏移的元素(无尺寸的图像、注入的内容、字体交换) |
| 渲染阻塞 | RenderBlocking | 阻塞首次绘制的 CSS/JS |
| 文档延迟 | DocumentLatency | 服务器响应时间问题 |
| 网络依赖 | NetworkRequestsDepGraph | 延迟关键资源的请求链 |
示例:
performance_analyze_insight(insightSetId: "<来自跟踪的id>", insightName: "LCPBreakdown")
关键阈值(良好/需要改进/差):
列出所有网络请求以识别优化机会:
list_network_requests(resourceTypes: ["Script", "Stylesheet", "Document", "Font", "Image"])
查找:
<head> 中没有 async/defer/media 属性的 JS/CSSCache-Control、ETag 或 Last-Modified 头获取详细请求信息:
get_network_request(reqid: <id>)
获取无障碍树快照:
take_snapshot(verbose: true)
标记高级别问题:
如果审计没有代码库访问权限的第三方网站,请跳过此步骤。
分析代码库以了解可以在何处进行改进。
搜索配置文件以识别技术栈:
| 工具 | 配置文件 |
|---|---|
| Webpack | webpack.config.js, webpack.*.js |
| Vite | vite.config.js, vite.config.ts |
| Rollup | rollup.config.js, rollup.config.mjs |
| esbuild | esbuild.config.js, 包含 esbuild 的构建脚本 |
| Parcel | .parcelrc, package.json (parcel 字段) |
| Next.js | next.config.js, next.config.mjs |
| Nuxt | nuxt.config.js, nuxt.config.ts |
| SvelteKit | svelte.config.js |
| Astro | astro.config.mjs |
同时检查 package.json 中的框架依赖项和构建脚本。
mode: 'production'、package.json 中的 sideEffects、usedExports 优化treeshake 选项index.js 重新导出)、整体导入的大型工具库(lodash、moment)content 配置)@babel/preset-env 目标和 useBuiltIns 设置core-js 导入(通常体积过大)browserslist 配置是否目标过于宽泛terser、esbuild 或 swc 最小化按以下方式呈现发现:
每周安装量
1.7K
仓库
GitHub 星标数
566
首次出现
2026 年 1 月 19 日
安全审计
安装于
opencode1.4K
codex1.4K
gemini-cli1.4K
github-copilot1.3K
claude-code1.2K
amp1.2K
Your knowledge of web performance metrics, thresholds, and tooling APIs may be outdated. Prefer retrieval over pre-training when citing specific numbers or recommendations.
| 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 |
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"]
}
| Task | Tool Call |
|---|---|
| Load page | navigate_page(url: "...") |
| Start trace | performance_start_trace(autoStop: true, reload: true) |
| Analyze insight | performance_analyze_insight(insightSetId: "...", insightName: "...") |
| List requests | list_network_requests(resourceTypes: ["Script", "Stylesheet", ...]) |
| Request details | get_network_request(reqid: <id>) |
| A11y snapshot |
Copy this checklist to track progress:
Audit Progress:
- [ ] Phase 1: Performance trace (navigate + record)
- [ ] Phase 2: Core Web Vitals analysis (includes CLS culprits)
- [ ] Phase 3: Network analysis
- [ ] Phase 4: Accessibility snapshot
- [ ] Phase 5: Codebase analysis (skip if third-party site)
Navigate to the target URL:
navigate_page(url: "<target-url>")
Start a performance trace with reload to capture cold-load metrics:
performance_start_trace(autoStop: true, reload: true)
Wait for trace completion, then retrieve results.
Troubleshooting:
navigate_page firstUse performance_analyze_insight to extract key metrics.
Note: Insight names may vary across Chrome DevTools versions. If an insight name doesn't work, check the insightSetId from the trace response to discover available insights.
Common insight names:
| Metric | Insight Name | What to Look For |
|---|---|---|
| LCP | LCPBreakdown | Time to largest contentful paint; breakdown of TTFB, resource load, render delay |
| CLS | CLSCulprits | Elements causing layout shifts (images without dimensions, injected content, font swaps) |
| Render Blocking | RenderBlocking | CSS/JS blocking first paint |
| Document Latency | DocumentLatency | Server response time issues |
| Network Dependencies | NetworkRequestsDepGraph |
Example:
performance_analyze_insight(insightSetId: "<id-from-trace>", insightName: "LCPBreakdown")
Key thresholds (good/needs-improvement/poor):
List all network requests to identify optimization opportunities:
list_network_requests(resourceTypes: ["Script", "Stylesheet", "Document", "Font", "Image"])
Look for:
<head> without async/defer/media attributesCache-Control, ETag, or Last-Modified headersFor detailed request info:
get_network_request(reqid: <id>)
Take an accessibility tree snapshot:
take_snapshot(verbose: true)
Flag high-level gaps:
Skip if auditing a third-party site without codebase access.
Analyze the codebase to understand where improvements can be made.
Search for configuration files to identify the stack:
| Tool | Config Files |
|---|---|
| Webpack | webpack.config.js, webpack.*.js |
| Vite | vite.config.js, vite.config.ts |
| Rollup | rollup.config.js, rollup.config.mjs |
| esbuild | esbuild.config.js, build scripts with esbuild |
Also check package.json for framework dependencies and build scripts.
mode: 'production', sideEffects in package.json, usedExports optimizationtreeshake optionsindex.js re-exports), large utility libraries imported wholesale (lodash, moment)content config)@babel/preset-env targets and useBuiltIns settingcore-js imports (often oversized)browserslist config for overly broad targetingterser, esbuild, or swc minificationPresent findings as:
Weekly Installs
1.7K
Repository
GitHub Stars
566
First Seen
Jan 19, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykWarn
Installed on
opencode1.4K
codex1.4K
gemini-cli1.4K
github-copilot1.3K
claude-code1.2K
amp1.2K
99,500 周安装
take_snapshot(verbose: true)| Request chains delaying critical resources |
| Parcel | .parcelrc, package.json (parcel field) |
| Next.js | next.config.js, next.config.mjs |
| Nuxt | nuxt.config.js, nuxt.config.ts |
| SvelteKit | svelte.config.js |
| Astro | astro.config.mjs |