Web Perf

概述

web-perf是一款专业级网页性能审计Skill，通过集成Chrome DevTools MCP工具链，为开发者提供系统化的Core Web Vitals检测与优化能力。该Skill由Cloudflare Staff Engineer Matt Silverlock（elithrar）开发，在Web性能领域具备权威背书。

核心用法

Skill采用五阶段审计工作流：

• Phase 1: 启动性能追踪（performance_start_trace）捕获冷加载数据
• Phase 2: 分析Core Web Vitals——FCP、LCP、CLS、TBT、Speed Index及INP
• Phase 3: 网络请求分析，识别渲染阻塞资源、依赖链、缓存问题
• Phase 4: 可访问性快照检测ARIA与对比度问题
• Phase 5: 代码库分析（框架检测、Tree-shaking、Polyfill优化）

关键特性包括量化影响评估（拒绝零收益优化）、具体化建议（如"将hero.png 450KB转为WebP"而非泛泛的"优化图片"），以及严格的验证优先原则。

显著优点

1. 专业方法论：基于Google官方Core Web Vitals标准，提供精确阈值判定（如LCP < 2.5s为良好）
2. MCP工具原生集成：直接调用Chrome DevTools底层能力，比Lighthouse CLI更灵活
3. 优先级 ruthlessly：明确拒绝优化已达标的站点（如200ms LCP + 0 CLS），避免过度工程
4. 框架感知：内置Webpack/Vite/Rollup/Next.js等主流工具链的专项检测逻辑

潜在局限

• 依赖外部Chrome DevTools MCP服务器配置，首次使用门槛较高
• 纯文档型Skill，无内置缓存或历史趋势追踪
• 对第三方站点无法进行代码库分析（Phase 5自动跳过）
• Insight名称随Chrome版本变化，需动态适配

适合人群

前端工程师、性能优化专员、技术SEO顾问，尤其适合已使用MCP生态的开发者团队。

常规风险

• 低风险：MCP工具权限需合理管控，避免意外访问敏感内网页面
• 配置依赖：npx chrome-devtools-mcp@latest需Node.js环境及网络下载
• 数据隐私：审计过程会分析目标页面资源，需确保符合被测站点的ToS

核心功能

该 Skill 是一套完整的网页性能审计工作流，通过 Chrome DevTools MCP 工具链实现自动化性能诊断。主要功能包括：

• Core Web Vitals 测量：FCP、LCP、TBT、CLS、Speed Index 等关键指标的精准采集与阈值判定
• 渲染阻塞分析：识别 CSS/JS 阻塞首屏渲染的资源，量化延迟影响
• 网络依赖链追踪：发现资源加载的瀑布阻塞，定位关键路径优化点
• 布局偏移溯源：CLS 元凶定位，分析图片无尺寸、字体闪变、动态注入等成因
• 缓存策略审计：检查 Cache-Control、ETag 等响应头的配置合理性
• 无障碍快照：快速扫描 ARIA、对比度、焦点管理等高阶可访问性问题

显著优点

1. 量化优先：拒绝模糊建议，所有优化项附带预估时间收益（如"压缩 hero.png 450KB→WebP 预计节省 200ms"）
2. 断言式诊断：先验证再结论，通过实际网络请求、DOM 状态确认问题存在，避免误判
3. ruthless 优先级：200ms LCP + 0 CLS 的网站直接判定"已优秀"，不制造无效工作
4. 框架感知：支持 Webpack/Vite/Rollup/esbuild/Next.js/Nuxt 等主流构建工具的代码级优化建议
5. 可跳过非问题：零影响渲染阻塞资源仅记录不推荐处理，避免过度优化

潜在局限

• 依赖外部 MCP：必须配置 chrome-devtools-mcp，且使用 @latest 动态版本存在供应链不确定性
• 无代码库时受限：Phase 5 代码分析需本地源码访问，纯第三方站点审计无法提供构建层优化建议
• Chrome 版本敏感：Insight 名称可能随 DevTools 版本变化，需人工适配
• T3 来源可信度：个人开发者维护，无组织背书

适合人群

• 前端性能工程师进行生产环境审计
• 开发团队构建性能回归测试流程
• 技术负责人制定性能优化 Roadmap
• 第三方顾问向客户输出可量化的性能报告

常规风险

| 风险类型 | 说明 | 缓释措施 |

|---------|------|---------|

| 供应链风险 | `@latest` 自动拉取最新包 | 建议改为固定版本号 |

| 自动执行风险 | `npx -y` 无需确认即下载执行 | 增加用户显式确认步骤 |

| 数据隐私 | 审计数据本地处理，但需用户知情 | 补充隐私声明说明 |