web-perf

🚀 专业级网页性能审计与优化

🥥40总安装量 15评分人数 8
100% 的用户推荐

基于 Chrome DevTools MCP 的专业性能审计工具,精准分析 Core Web Vitals 指标,快速定位渲染阻塞与网络瓶颈,输出可落地的优化方案。

A

基本安全,请在特定环境下使用

  • 来自社区或个人来源,建议先隔离验证
  • ✅ 纯文档型资产,无代码执行风险,所有性能分析操作均通过 MCP 工具代理完成
  • ✅ 无敏感数据收集或上传行为,性能数据仅在用户本地环境处理,不上传至远程服务器
  • ⚠️ 需用户自行配置 chrome-devtools-mcp,建议从 npm 官方源安装以避免供应链风险
  • ⚠️ 来源为 T3 级个人开发者社区,非官方组织维护,企业用户建议进行额外安全审计
  • ✅ 无 eval/exec/system/subprocess 等危险函数调用,无动态代码加载或远程脚本执行

使用说明

Web Performance Audit(web-perf)是一款基于 Chrome DevTools MCP 的专业网页性能诊断技能,旨在为开发者和运维人员提供实验室级别的性能审计能力。该技能通过结构化的五阶段工作流程(性能追踪、Core Web Vitals 分析、网络请求审查、可访问性快照和代码库分析),帮助用户系统性地识别并解决网页加载性能瓶颈。

核心用法方面,该技能采用"测量-分析-建议"的闭环模式。首先通过 performance_start_trace 捕获页面冷加载的完整性能轨迹,随后利用 performance_analyze_insight 提取 LCP、CLS、TBT 等关键指标,并结合 list_network_requests 深入分析渲染阻塞资源、网络依赖链和缓存策略。对于拥有代码库访问权限的场景,还能检测构建工具配置(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 和服务条款;由于性能追踪会重载页面并记录网络活动,在处理包含敏感信息的内部系统时应谨慎操作。此外,该技能仅提供分析建议,实际代码修改仍需人工验证,避免自动化工具误删关键资源。

web-perf 内容

手动下载zip · 3.7 kB
SKILL.mdtext/markdown
请选择文件