前言¶
前端性能优化是开发者绕不开的话题。页面慢了，用户会走；Lighthouse 分数掉了，SEO 和转化也会跟着受影响。常见做法是打开 Chrome DevTools、录一条 Performance Trace，再对照 LCP、INP、CLS 等指标逐项排查。流程成熟，但重复劳动不少：导航、录制、读 insight、查网络请求、再对照代码改配置。
Cloudflare 在官方 Agent Skills 仓库里提供了名为 web-perf 的 Skill。它把「用 Chrome DevTools MCP 做网页性能审计」写成固定工作流，让支持 Agent Skills 标准的 AI 编程工具（如 Cursor、Claude Code、OpenAI Codex 等）在对话里按阶段执行审计，而不是只凭模型记忆给笼统建议。
本文基于官方仓库中的 SKILL.md 与 cloudflare/skills README，说明它是什么、怎么装、怎么用。
这是什么¶
web-perf 是 Cloudflare 维护的 Agent Skill，路径在 cloudflare/skills 仓库的 skills/web-perf/。官方一句话定位是：借助 Chrome DevTools MCP 分析网页性能，测量 Core Web Vitals（LCP、INP、CLS）以及 FCP、TBT、Speed Index 等补充指标，并识别渲染阻塞资源、网络依赖链、布局偏移、缓存问题与可访问性缺口。
触发场景很明确：当你让 Agent 审计、分析、调试或优化页面加载性能、Lighthouse 分数或站点速度时，它会按 Skill 里的清单推进。Skill 还强调一点——指标阈值和工具 API 可能过时，优先从现行文档检索，而不是直接用模型预训练知识下结论。检索来源包括 web.dev 的 Vitals 说明、Chrome DevTools 性能文档，以及 Lighthouse 性能评分文档。
核心能力¶
结合官方 SKILL.md，能力可以概括为五块：
-
性能轨迹与 Core Web Vitals
通过navigate_page打开目标页，再用performance_start_trace（建议autoStop: true、reload: true）录冷启动轨迹；随后用performance_analyze_insight解析 LCP 拆解、CLS 元凶、渲染阻塞、文档延迟、网络依赖图等 insight。 -
网络与资源瓶颈
用list_network_requests/get_network_request查 Script、Stylesheet、Document、Font、Image 等请求，关注渲染阻塞、依赖链、缺失 preload、弱缓存头、过大未压缩资源，以及无效的 preconnect。 -
可访问性快照
用take_snapshot(verbose: true)抓无障碍树，标记重复/缺失 ARIA ID、对比度不足、焦点陷阱、交互元素无无障碍名称等高层问题。 -
有代码仓库时的构建侧分析
若不是纯第三方站点审计，还会根据webpack/vite/next等配置识别框架与打包器，检查 tree-shaking、未使用 JS/CSS、polyfill、压缩与生产环境 sourcemap 等优化点。 -
输出与优先级纪律
要求给出指标汇总表、按影响排序的问题列表、可执行的修复建议（尽量带代码或配置片段）。原则包括：用估算收益量化影响、零收益的「问题」可记录但不强推、先核实再建议删除、已经很好的站点要明确说已经很好。
安装与启用¶
web-perf 属于 Cloudflare Skills 集合，安装方式与仓库 README 一致。
用 npx skills 安装（可只装该 Skill）¶
npx skills add https://github.com/cloudflare/skills --skill web-perf
也可以一次性添加整个仓库：
npx skills add https://github.com/cloudflare/skills
Claude Code¶
通过插件市场安装：
/plugin marketplace add cloudflare/skills
/plugin install cloudflare@cloudflare
Cursor¶
可从 Cursor Marketplace 安装，或在 Settings > Rules > Add Rule > Remote Rule (Github) 中填写 cloudflare/skills。
手动复制到各工具 Skills 目录¶
克隆仓库后，把 skills/web-perf 拷到对应目录即可，例如：
| 工具 | Skills 目录 |
|---|---|
| Claude Code | ~/.claude/skills/ |
| Cursor | ~/.cursor/skills/ |
| OpenCode | ~/.config/opencode/skills/ |
| OpenAI Codex | ~/.codex/skills/ |
| Pi | ~/.pi/agent/skills/ |
必配：Chrome DevTools MCP¶
Skill 明确要求：开始前先确认能调用 navigate_page 或 performance_start_trace。若不可用，应停止并提示用户在 MCP 配置中加入：
"chrome-devtools": {
"type": "local",
"command": ["npx", "-y", "chrome-devtools-mcp@latest"]
}
没有这套 MCP，Agent 无法真实录制与解析性能轨迹，Skill 的主流程跑不起来。
典型用法¶
装好 Skill 并配置好 chrome-devtools MCP 后，可以直接对 Agent 说类似需求：
请审计 https://example.com 的页面性能，重点看 Core Web Vitals、
渲染阻塞资源和网络依赖链，按影响给出可落地的优化建议。
按官方工作流，Agent 大致会按下面清单推进：
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)
关键工具调用示例（来自官方 Quick Reference）：
navigate_page(url: "https://example.com")
performance_start_trace(autoStop: true, reload: true)
performance_analyze_insight(insightSetId: "<id-from-trace>", insightName: "LCPBreakdown")
list_network_requests(resourceTypes: ["Script", "Stylesheet", "Document", "Font", "Image"])
take_snapshot(verbose: true)
常用 insight 名称包括：LCPBreakdown、CLSCulprits、RenderBlocking、DocumentLatency、NetworkRequestsDepGraph。官方也提醒：不同 Chrome DevTools 版本下 insight 名称可能变化，若调用失败，应先从 trace 响应里的 insightSetId 查看实际可用列表。
最终输出一般包含四部分：Core Web Vitals 汇总表（指标、数值、good / needs-improvement / poor）、按优先级排列的 Top Issues、具体 Recommendations，以及（有代码权限时）Codebase Findings。
适用场景与注意事项¶
适合这些情况：
- 上线前或回归时，对关键落地页做一轮可复现的性能审计；
- Lighthouse / Core Web Vitals 变差后，需要把「分数掉了」落到具体资源与代码改动；
- 本地有前端仓库，希望 Agent 一边看轨迹，一边对照 Vite、Webpack、Next.js 等构建配置给建议。
使用时注意：
- 依赖真实浏览器与 MCP，不是纯文本推理；MCP 未配置时不应硬编结论。
- 审计第三方站点时跳过代码库分析阶段，只基于页面与网络证据说话。
- 建议要可验证：例如删掉某个 preconnect 前，先确认是否真有请求打到该源；估算节省为 0ms 的「阻塞资源」不必当成高优项。
- 阈值以现行文档为准；Skill 内给出的 TTFB / FCP / LCP / INP / TBT / CLS / Speed Index 区间是参考，写作或汇报前应按 web.dev / Lighthouse 文档再核一次。
小结¶
web-perf 把「打开 DevTools → 录轨迹 → 读 insight → 查网络 →（可选）看构建配置」固化成 Agent 可执行的 Skill，适合把前端性能审计嵌进日常对话式开发流。它的价值不在于发明新指标，而在于强制走真实测量、按影响排序，并尽量落到具体文件与配置。
官方地址：https://github.com/cloudflare/skills/tree/main/skills/web-perf
仓库总览与安装说明：https://github.com/cloudflare/skills
skills.sh 安装页：https://www.skills.sh/cloudflare/skills/web-perf
