（14710期）web-perf – 专业级网页性能审计与优化

专业级网页性能审计与优化 基于 Chrome DevTools MCP 的专业性能审计工具，精准分析 Core Web Vitals 指标，快速定位渲染阻塞与网络瓶颈，输出可落地的优化方案。 使用说明 Web Performance Audit（web-perf）是一款基于 Chrome DevTools MCP 的专业网页性能诊断技能，旨在为开发者和运维人员提供实验室级别的性能审计能力。该技能通过结构化的五阶段工作流程（性能追踪、Core Web Vitals 分析、网络请求审查、可访问性快照和代码库分析），帮助用户系统性地识别并解决网页加载性能瓶颈。 核心用法方面，该技能采用"测量-分析-建议"的闭环模式。首先通过 performancestarttrace 捕获页面冷加载的完整性能轨迹，随后利用 performanceanalyzeinsight 提取 LCP、CLS、TBT 等关键指标，并结合 listnetworkrequests 深入分析渲染阻塞资源、网络依赖链和缓存策略。对于拥有代码库访问权限的场景，还能检测构建工具配置（Webpack/Vite/Rollup）、Tree-shaking 优化、死代码消除和压缩策略，提供从诊断到代码层的完整优化路径。 显著优点体现在其专业性和可操作性上。一是量化分析能力，所有建议都附带具体的时间影响评估（如"压缩 hero.png 可节省 450KB"），避免零收益优化；二是框架感知，能识别 React、Vue、Next.js 等主流技术栈的特定优化点；三是遵循 Google Core Web Vitals 官方阈值标准，确保优化方向与搜索引擎排名因素对齐；四是提供具体的配置代码片段，如 MCP 服务器设置、构建工具优化参数等。 潜在缺点主要包括环境依赖和准入门槛。该技能要求用户预先配置 chrome-devtools-mcp 服务器，对初学者有一定技术门槛；作为 T3 级社区来源，缺乏企业级 SLA 保障；且设计为交互式审计工具，不适合直接集成到 CI/CD 流水线进行自动化测试。此外，部分 Insight 名称可能因 Chrome DevTools 版本差异而变化，需要用户具备一定的故障排查能力。 适合的目标群体包括：前端开发工程师（优化首屏加载和运行时性能）、全栈开发者（诊断后端渲染延迟）、SEO 专员（提升 Core Web Vitals 评分）、以及网站运维人员（监控生产环境性能退化）。特别适合需要深度优化电商、内容站点落地页加载体验的技术团队。 使用风险主要涉及工具链配置和权限边界。用户需确保从 npm 官方源安装 MCP 依赖，避免供应链攻击；审计第三方站点时需遵守 robots.txt 和服务条款；由于性能追踪会重载页面并记录网络活动，在处理包含敏感信息的内部系统时应谨慎操作。此外，该技能仅提供分析建议，实际代码修改仍需人工验证，避免自动化工具误删关键资源。 原始说明 Analyzes web performance using Chrome DevTools MCP. Measures Core Web Vitals (FCP, LCP, TBT, CLS, Speed Index), identifies render-blocking resources, network dependency chains, layout shifts, caching issues, and accessibility gaps. Use when asked to audit, profile, debug, or optimize page load performance, Lighthouse scores, or site speed.