Chrome DevTools 驱动的专业级性能审计

基于Chrome DevTools MCP的网页性能审计Skill，由Cloudflare工程师维护，专精Core Web Vitals分析与优化建议

基本信息

• 技能名称?Web Perf
• 中文名称?Chrome DevTools 驱动的专业级性能审计
• 作者?elithrar
• 分类?专业技能
• 版本?1.0.0
• 标签?web-performance, core-web-vitals, chrome-devtools, lighthouse, mcp, frontend-optimization, accessibility-audit

使用方法

使用说明
概述
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. 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