1. 基本信息
| 项目 | 内容 | 数据来源 |
|---|---|---|
| 正式名称 | web-perf（合集仓库子目录名） | 目录名 |
| 所属合集仓库 | cloudflare/skills（Cloudflare 官方维护的 Agent Skills 合集） | GitHub API |
| 作者/维护者 | Cloudflare 官方；核心提交者 Matt Silverlock（Cloudflare 工程师）、Ade Oshineye | GitHub Commits API |
| 来源链接 | https://github.com/cloudflare/skills/tree/main/skills/web-perf | — |
| 许可证 | Apache-2.0 | GitHub API 实测 |
| 所属合集仓库整体 Stars | 2,482（属整个合集仓库，不代表本技能自身热度，仅供了解仓库规模） | GitHub API |
| 该技能自身活跃度 | 3 次实质性提交（2026-01-28 首次纳入、2026-03-03、2026-04-01 最近一次修订） | GitHub Commits API（路径限定查询） |
| 最新版本 | 无独立版本号，随仓库整体迭代 | 仓库结构 |
| 安装方式 | 见第十章 | 仓库根 README |
2. 功能介绍与亮点
web-perf 教会 Agent 借助 Chrome DevTools MCP 服务器，对任意网页做一次结构化的性能与可访问性审计，核心能力：
- 实测优先：先验证 MCP 工具是否可用，不可用则明确停止并提示配置方法，不凭过时训练知识下结论
- 五阶段流程：性能追踪→Core Web Vitals 分析（LCP/INP/CLS/FCP/TBT/Speed Index）→网络请求分析（阻塞资源、依赖链、缓存缺失）→可访问性快照（ARIA、对比度、焦点陷阱）→代码库静态分析（框架识别、Tree-Shaking、Polyfill 冗余）
- 阈值表内置：各项指标“良好/待改进/差”三档数值直接给出，审计结果可当场评级
- 强调可验证建议：要求“压缩 hero.png(450KB) 为 WebP”而非“优化图片”，0 毫秒影响的问题不列入待办
- 文档详实：SKILL.md 正文逾八千字符，含检查清单模板与故障排查提示
3. 适用场景
所属分类：工程效率与代码质量。适合已在用 Claude Code 等编程 Agent、需要定位网页加载慢或 Lighthouse 分数低的前端开发者；也适合网站运营者在发布前用它快速核对 Core Web Vitals 与基础可访问性问题。需预先在 MCP 配置中加入 chrome-devtools-mcp（Google 官方开源包）。
4. 跨 Agent 兼容性
- Claude Code：✅ 原生支持——仓库明确“adopt Claude Code plugin structure”，可通过插件市场一键安装
- Codex：⚠️ 需适配——仓库 README 声称支持 Agent Skills 标准通用格式（含 OpenAI Codex 的
~/.codex/skills/目录），但已合入的第三方 Issue（#85）报告了该仓库技能包在 Codex 校验器下的具体兼容性问题（front matter 字段被拒、多技能触发范围重叠） - OpenClaw：❓ 未验证——已抓取材料未提及
- Hermes Agent：❓ 未验证——已抓取材料未提及
5. 推荐理由
多数“性能优化”类技能停留在给建议层面，web-perf 的差异在于它直接驱动 Chrome DevTools 做实测追踪，产出的是真实测得的 LCP 拆解、请求依赖图与可访问性快照，而不是经验判断。对于想让 Agent 在发布前自动跑一遍“体检”的前端团队，这类可执行、有阈值表撑腰的审计流程比纯文字建议更省去人工复核的功夫。
6. 评分
| 维度 | 分数 | 说明 |
|---|---|---|
| 受欢迎程度 | 7 | 合集仓库整体规模不计入个体评分；改看该子目录自身证据——3 次实质提交、Cloudflare 官方工程师署名，且有独立第三方用户（GitHub 账号 lygris）就其安装方式提交过详细技术反馈（Issue #85），但未见多平台层面的大量独立讨论 |
| 可用性 | 9 | SKILL.md 文档完整、含阈值表与故障排查提示；安装仅需在 MCP 配置中加入一段官方开源 JSON 配置，无需付费依赖；最近一次实质修订为 2026-04-01（距今约 3.5 个月），仓库整体近期仍有提交 |
| 安全性 | 7 | 见下方检查清单 |
安全检查清单：
① 无本地 shell 命令执行；实际操作通过 Chrome DevTools MCP 的工具调用（页面导航、追踪、网络请求列表、可访问性快照）完成，范围限定在被审计的目标网页与本地代码库的只读检查
② 会联网请求 web.dev、Chrome 开发者文档、Lighthouse 评分说明等公开资料，用于确保引用的阈值数字为最新版本，无用户私密数据外发
③ 不要求任何 API Key 或账号凭据
④ 未发现恶意或混淆指令；但第三方 Issue #85（截至 2026-07-26 仍开放）指出该技能引导用户添加未锁定版本的 npx -y chrome-devtools-mcp@latest——属已被公开记录的安全设计缺陷，非隐蔽恶意行为
⑤ Cloudflare 官方仓库，核心提交者为具名工程师
⑥ License 为 Apache-2.0，明确
⑦ 该子目录最近一次实质提交距今约 3.5 个月，仓库整体两天前仍有提交，非弃置项目
7. 跟同类 Skills 相比的优势
| 名称 | 定位 | 与本技能的差异 |
|---|---|---|
| performance-optimization（addyosmani/agent-skills） | “测量→定位→修复→验证→防护”全链路性能优化方法论，覆盖前端、后端、数据库，配专属子代理 | 范围更广但偏方法论与反模式代码对照；不直接驱动浏览器做实时追踪，依赖开发者自行接入 Lighthouse/RUM 工具链 |
| vercel-optimize（vercel-labs/agent-skills） | 拉取 Vercel 生产环境真实调用量、冷启动、Core Web Vitals 与账单数据，产出优化建议 | 数据来自已部署到 Vercel 平台的真实生产指标，但仅适用于 Vercel 托管的 Next.js/SvelteKit 项目；本技能不绑定任何托管平台，可审计任意可访问的网页 |
| web-perf（本技能） | 直接驱动 Chrome DevTools MCP 对目标页面做实时性能追踪与可访问性快照 | 平台无关、可对任意网站发起实测；代价是需要额外配置 MCP 服务器，且审计范围限定在前端层面，不覆盖后端与数据库 |
8. 用户评价
第三方用户 lygris 在仓库 Issue #85 中提交了详细的技术评估，指出该技能包在 OpenAI Codex 环境下的多处兼容性问题，并专门点出 web-perf 引导安装未锁定版本 chrome-devtools-mcp 的设计值得改进；该 Issue 截至 2026-07-26 仍未处理。该技能目前在其他第三方平台尚无具名用户评价。
9. 其他补充
web-perf 的可访问性快照只覆盖高层缺口（ARIA、对比度、焦点陷阱），不等同于完整 WCAG 审查；深度可访问性检查建议配合专门技能使用。
10. 安装使用方式
- 插件市场（安装整个 Cloudflare 技能包）：
/plugin marketplace add cloudflare/skills后/plugin install cloudflare@cloudflare - 按需单独安装（推荐）：
npx skills add https://github.com/cloudflare/skills，安装向导中可仅勾选 web-perf - 手动安装：克隆仓库后将
skills/web-perf目录复制到所用 Agent 的 skills 目录（Claude Code 为~/.claude/skills/） - 安装后需在 MCP 配置中加入
chrome-devtools-mcp（技能会在首次调用时自检并提示配置方法），无需重启 Agent，符合触发词的请求会自动加载
11. 注意事项
- 依赖外部 MCP 服务器
chrome-devtools-mcp（npx -y chrome-devtools-mcp@latest），首次使用前需手动完成该项配置；建议自行锁定具体版本号而非使用@latest，以规避供应链层面的不确定性 - 第五阶段代码库静态分析仅在有本地代码访问权限时生效，纯第三方网站审计场景会自动跳过该阶段
- 阈值表基于审计时刻的 Web Vitals 标准，行业阈值本身会随时间调整，建议关注该技能后续更新
- 不覆盖后端接口耗时、数据库查询等非前端层面的性能问题