返回技能市场
开发运维 安全

web-perf

@admin/web-perf

Audit, diagnose, or optimize website loading and interaction performance, Core Web Vitals, and Lighthouse performance scores.

admin 热度 248v0.0.1

Web 性能审计

你对 Web 性能指标、阈值和工具 API 的了解可能已过时。引用具体数字或建议时，优先检索而非依赖预训练。

检索来源

| 来源 | 如何检索 | 用途 | |--------|----------------|---------| | web.dev | https://web.dev/articles/vitals | 核心网页指标阈值、定义 | | Chrome DevTools 文档 | https://developer.chrome.com/docs/devtools/performance | 工具 API、跟踪分析 | | Lighthouse 评分 | https://developer.chrome.com/docs/lighthouse/performance/performance-scoring | 评分权重、指标阈值 |

首先：验证 MCP 工具可用

开始之前，先发现可用的浏览器和性能工具。使用所请求审计可用的功能。如果跟踪工具不可用，继续任何有用的来源或网络分析，并说明无法收集哪些测量结果。

如果用户希望设置 Chrome DevTools MCP，请查阅其安装指南 并使用最新包版本。仅当设置在用户授权范围内时，才更改 MCP 配置；否则先询问。对于使用 command 和 args 的客户端，示例服务器条目如下：

"chrome-devtools": {
  "command": "npx",
  "args": ["-y", "chrome-devtools-mcp@latest"]
}

关键准则

  • 保持果断：通过检查网络请求、DOM 或代码库来验证论断，然后明确陈述发现。
  • 建议前先验证：在建议移除之前，确认某个内容确实未被使用。
  • 量化影响：使用洞察中的估计节省。不要优先处理影响为 0ms 的更改。
  • 跳过非问题：如果渲染阻塞资源的估计影响为 0ms，记录但不建议采取行动。
  • 具体明确：说“将 hero.png（450KB）压缩为 WebP”，而不是“优化图片”。
  • 无情优先级：具有 200ms LCP 和 0 CLS 的网站已经非常出色——直接说明。

快速参考

| 任务 | 工具调用 | |------|-----------| | 加载页面 | navigate_page(url: "...") | | 开始跟踪 | performance_start_trace(autoStop: true, reload: true) | | 分析洞察 | performance_analyze_insight(insightSetId: "...", insightName: "...") | | 列出请求 | list_network_requests(resourceTypes: ["Script", "Stylesheet", ...]) | | 请求详情 | get_network_request(reqid: <id>) | | 无障碍快照 | take_snapshot(verbose: true) |

工作流

复制此检查清单以跟踪进度：

Audit Progress:
- [ ] Phase 1: Performance trace (navigate + record)
- [ ] Phase 2: Core Web Vitals analysis (includes CLS culprits)
- [ ] Phase 3: Network analysis
- [ ] Phase 4: Accessibility snapshot
- [ ] Phase 5: Codebase analysis (skip if third-party site)

阶段 1：性能跟踪

  1. 导航到目标 URL：

    2. `` navigate_page(url: "<target-url>") ``

  1. 启动带重新加载的性能跟踪，以捕获冷加载指标：

    2. `` performance_start_trace(autoStop: true, reload: true) ``

  1. 等待跟踪完成，然后检索结果。

故障排查：

  • 如果跟踪返回空或失败，首先使用 navigate_page 验证页面是否正确加载
  • 如果洞察名称不匹配，检查跟踪响应以列出可用洞察

阶段 2：核心网页指标分析

使用 performance_analyze_insight 提取关键指标。

注意： 洞察名称可能因 Chrome DevTools 版本而异。如果某个洞察名称不起作用，请检查跟踪响应中的 insightSetId 以发现可用洞察。

常见洞察名称：

| 指标 | 洞察名称 | 需要关注的内容 | |--------|--------------|------------------| | LCP | LCPBreakdown | 最大内容绘制时间；TTFB、资源加载、渲染延迟的细分 | | CLS | CLSCulprits | 导致布局偏移的元素（未设置尺寸的图像、注入内容、字体交换） | | 渲染阻塞 | RenderBlocking | 阻塞首次绘制的 CSS/JS | | 文档延迟 | DocumentLatency | 服务器响应时间问题 | | 网络依赖 | NetworkRequestsDepGraph | 延迟关键资源的请求链 |

示例：

performance_analyze_insight(insightSetId: "<id-from-trace>", insightName: "LCPBreakdown")

关键阈值（良好/需要改进/差）：

  • TTFB: < 800ms / < 1.8s / > 1.8s
  • FCP: < 1.8s / < 3s / > 3s
  • LCP: < 2.5s / < 4s / > 4s
  • INP: < 200ms / < 500ms / > 500ms
  • TBT: < 200ms / < 600ms / > 600ms
  • CLS: < 0.1 / < 0.25 / > 0.25
  • 速度指数: < 3.4s / < 5.8s / > 5.8s

阶段 3：网络分析

列出所有网络请求以识别优化机会：

list_network_requests(resourceTypes: ["Script", "Stylesheet", "Document", "Font", "Image"])

需要查找：

  1. 渲染阻塞资源：<head> 中没有 async/defer/media 属性的 JS/CSS
  2. 网络链：由于依赖其他资源先加载而较晚发现的资源（例如 CSS 导入、JS 加载的字体）
  3. 缺少预加载：关键资源（字体、主图、关键脚本）未预加载
  4. 缓存问题：缺少或弱化的 Cache-Control、ETag 或 Last-Modified 头
  5. 大型负载：未压缩或过大的 JS/CSS 包
  6. 未使用的预连接：如果被标记，请检查是否有任何请求发送到该来源。如果零请求，则明确未使用——建议移除。如果存在请求但加载较晚，预连接可能仍然有价值。

获取详细请求信息：

get_network_request(reqid: <id>)

阶段 4：无障碍快照

获取无障碍树快照：

take_snapshot(verbose: true)

标记高层级缺口：

  • 缺少或重复的 ARIA ID
  • 对比度较差的元素（根据 WCAG AA 检查：普通文本 4.5:1，大文本 3:1）
  • 焦点陷阱或缺少焦点指示器
  • 没有无障碍名称的交互元素

阶段 5：代码库分析

如果没有代码库访问权限，且正在审计第三方站点，则跳过。

分析代码库以了解可以改进的地方。

检测框架与打包器

搜索配置文件以识别技术栈：

| 工具 | 配置文件 | |------|--------------| | Webpack | webpack.config.js, webpack.*.js | | Vite | vite.config.js, vite.config.ts | | Rollup | rollup.config.js, rollup.config.mjs | | esbuild | esbuild.config.js, 包含 esbuild 的构建脚本 | | Parcel | .parcelrc, package.json（parcel 字段） | | Next.js | next.config.js, next.config.mjs | | Nuxt | nuxt.config.js, nuxt.config.ts | | SvelteKit | svelte.config.js | | Astro | astro.config.mjs |

同时检查 package.json 中的框架依赖和构建脚本。

摇树与死代码

  • Webpack：检查 mode: 'production'、package.json 中的 sideEffects、usedExports 优化
  • Vite/Rollup：默认启用摇树；检查 treeshake 选项
  • 查找：桶文件（index.js 重新导出）、整体导入的大型工具库（lodash、moment）

未使用的 JS/CSS

  • 检查 CSS-in-JS 与静态 CSS 提取
  • 查找 PurgeCSS/UnCSS 配置（Tailwind 的 content 配置）
  • 识别动态导入与即时加载

Polyfill

  • 检查 @babel/preset-env 目标和 useBuiltIns 设置
  • 查找 core-js 导入（通常过大）
  • 检查 browserslist 配置是否目标范围过宽

压缩与最小化

  • 检查 terser、esbuild 或 swc 最小化
  • 在构建输出或服务器配置中查找 gzip/brotli 压缩
  • 检查生产构建中的 source maps（应为外部文件或禁用）

输出格式

按以下形式呈现发现：

  1. 核心网页指标摘要 - 包含指标、值和评级（良好/需要改进/差）的表格
  2. 主要问题 - 按优先级排列的问题列表，并包含估计影响（高/中/低）
  3. 建议 - 具体、可执行的修复方案，并附带代码片段或配置更改
  4. 代码库发现 - 检测到的框架/打包器、优化机会（如果没有代码库访问权限则省略）
qianwen skills install @admin/web-perf