网页性能审计
用 Chrome DevTools MCP 定位网页加载、核心体验指标和可访问性问题。
技能明确要求先确认 Chrome DevTools MCP 可用，并在不可用时停止，降低了无意继续执行的风险；但未说明页面数据、网络请求、代码库内容如何流向外部服务，也缺少敏感数据处理、用户确认、权限边界和回滚说明，因此扣分。
工作流、工具调用和异常排查步骤较具体，且要求检查真实网络、DOM或代码库；但工具可用性、版本兼容性、空追踪结果和洞察名称变化的处理仍较薄弱，静态评估按上限未超过10分，故扣分。
触发场景和目标用户任务较清楚，覆盖性能审计、调试和优化，并声明无代码库时跳过代码分析；但依赖已配置的 Chrome DevTools MCP，未充分说明不适用范围、输入前提、中文输出支持及中国大陆网络下文档检索可达性，因此扣分。
文档结构清晰，包含检索来源、工具速查、分阶段流程、故障排查和输出格式；仓库提供 Apache-2.0 许可与安装说明，但该技能缺少版本、变更记录、维护责任、更新路径、FAQ和依赖锁定信息，且发布者未被验证，因此扣分。
技能能够指导采集 Core Web Vitals、网络、可访问性和代码库发现，并要求输出带影响等级的具体建议；但本次仅能静态检查，无法验证工具调用、指标提取或最终报告可直接使用，且结果仍需人工审阅，因此按静态上限保守扣分。
列出了 web.dev 和 Chrome 官方文档等可审计来源，并要求检索当前资料；但没有提交测试套件、CI 覆盖、示例运行结果或独立复现证据，关键结论主要依赖运行时工具，故仅给有限分数。
- 核心功能依赖本地 Chrome DevTools MCP；未配置或工具接口不兼容时无法完成审计。
- 技能可能处理目标页面、网络请求和代码库信息，但未定义隐私、敏感数据和外部服务数据流控制。
- 指标阈值、洞察名称和 MCP 工具接口可能随 Chrome/DevTools 版本变化；文档检索服务在中国大陆的可达性未说明。
- 未提供该技能的版本、变更记录、维护责任或可复现实测结果。
这个 Skill 能做什么，适合哪些场景？
这是 cloudflare/skills 仓库中的独立网页性能技能，专注于审计、分析和优化页面加载表现。它通过 Chrome DevTools MCP 测量 LCP、INP、CLS，以及 FCP、TBT 和 Speed Index 等指标。技能还检查渲染阻塞资源、网络依赖链、布局偏移、缓存、压缩和可访问性问题。若能访问代码库，它还会分析框架、打包工具、摇树优化、未使用代码、Polyfill 和生产构建配置。
先通过 navigate_page 加载目标页面，再用 performance_start_trace 记录重新加载后的性能轨迹，并使用 performance_analyze_insight 分析 LCP、CLS、渲染阻塞、文档延迟和网络依赖。它可通过 list_network_requests 和 get_network_request 检查脚本、样式表、文档、字体和图片请求，包括请求链、预加载、缓存头和资源大小；还可用 take_snapshot 获取无障碍树。输出包括核心网页指标摘要、按影响排序的问题、具体修复建议，以及在有代码库访问权限时的代码分析结果。
- 前端开发者需要定位 LCP、INP 或 CLS 不达标的原因时。
- 网站团队希望找出渲染阻塞脚本、样式表或关键资源请求链时。
- 性能工程师需要核查缓存头、预加载、压缩和大型资源时。
- 开发者希望结合框架和打包配置寻找未使用 JavaScript、CSS 或过量 Polyfill 时。
- 质量或无障碍团队需要检查交互元素名称、焦点指示器、ARIA ID 和对比度问题时。
这个 Skill 有哪些优点和局限？
- 覆盖 LCP、INP、CLS 以及 FCP、TBT、Speed Index 等多项指标。
- 能进一步分析渲染阻塞、网络依赖链、布局偏移、缓存和资源大小。
- 要求先验证请求、DOM 或代码，再提出具体优化建议并估算影响。
- 支持在有代码库访问权限时检查框架、打包器和构建优化。
- 明确依赖 Chrome DevTools MCP；未配置时不能开始审计。
- 代码库分析仅适用于拥有代码库访问权限的场景。
- 源材料没有提供测试套件、基准样例或独立的跨平台验证证据。
- 具体指标阈值和建议应优先从外部文档检索，不能完全依赖内置知识。
如何安装这个 Skill？
该技能位于 cloudflare/skills 仓库的 skills/web-perf/ 目录。可使用仓库支持的方式安装整个技能集合，例如执行 npx skills add https://github.com/cloudflare/skills，或克隆仓库后将技能文件夹复制到相应 Agent Skills 目录。使用前还需要配置 Chrome DevTools MCP；源材料给出的配置名称为 chrome-devtools，启动命令为 npx -y chrome-devtools-mcp@latest。源材料未说明单独安装 web-perf 文件夹的命令。
如何使用这个 Skill？
向已加载该技能的代理提出明确的审计请求，例如“审计 https://example.com 的网页性能，分析 Core Web Vitals、网络请求和可访问性问题”。代理应先确认 Chrome DevTools MCP 可用；若不可用，技能要求停止并提示配置该 MCP。第三方网站没有代码库访问权限时，应跳过代码库分析阶段。