介绍
# Web Performance Audit
使用 Chrome DevTools MCP 工具审计网页性能。此技能重点关注 Core Web Vitals（核心网页指标）、网络优化以及高级无障碍缺陷。
## 首先：验证 MCP 工具是否可用
**在开始之前运行此步骤。** 尝试调用 `navigate_page` 或 `performance_start_trace`。如果不可用，请停止——chrome-devtools MCP 服务器尚未配置。
请用户将以下内容添加到其 MCP 配置中：
```json "chrome-devtools": { "type": "local", "command": ["npx", "-y", "chrome-devtools-mcp@latest"] } ```
## 关键准则
- **保持果断**：通过检查网络请求、DOM 或代码库来验证主张——然后明确陈述发现。 - **推荐前先验证**：在建议删除之前确认某项内容未被使用。 - **量化影响**：使用洞察中的预估节省量。不要优先考虑影响为 0ms 的变更。 - **跳过非问题**：如果阻塞渲染的资源预估影响为 0ms，请记录但不要建议采取行动。 - **具体明确**：请说“将 hero.png (450KB) 压缩为 WebP”，而不是“优化图片”。 - **严格优先级排序**：如果一个站点的 LCP 为 200ms 且 CLS 为 0，那它已经非常出色了——请直接说明。
## 快速参考
| 任务 | 工具调用 | |------|-----------| | 加载页面 | `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： ``` navigate_page(url: "<target-url>") ```
2. 启动带有重新加载的性能跟踪，以捕获冷加载指标： ``` performance_start_trace(autoStop: true, reload: true) ```
3. 等待跟踪完成，然后检索结果。
**故障排除：** - 如果跟踪返回空结果或失败，请首先使用 `navigate_page` 验证页面是否正确加载 - 如果洞察名称不匹配，请检查跟踪响应以列出可用的洞察
### 阶段 2：Core Web Vitals 分析
使用 `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 - Speed Index: < 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` 中的框架依赖和构建脚本。
### Tree-Shaking（摇树优化）与死代码
- **Webpack**：检查 `mode: 'production'`，package.json 中的 `sideEffects`，`usedExports` 优化 - **Vite/Rollup**：默认启用 Tree-shaking；检查 `treeshake` 选项 - **查找内容**：桶文件（`index.js` 重新导出）、整体导入的大型工具库（lodash、moment）
### 未使用的 JS/CSS
- 检查 CSS-in-JS 与静态 CSS 提取 - 查找 PurgeCSS/UnCSS 配置（Tailwind 的 `content` 配置） - 识别动态导入与急切加载
### Polyfills
- 检查 `@babel/preset-env` 目标和 `useBuiltIns` 设置 - 查找 `core-js` 导入（通常过大） - 检查 `browserslist` 配置是否存在目标过于宽泛的问题
### 压缩与混淆
- 检查 `terser`、`esbuild` 或 `swc` 混淆 - 在构建输出或服务器配置中查找 gzip/brotli 压缩 - 检查生产构建中的 source maps（应该外部化或禁用）
## 输出格式
将发现呈现为：
1. **Core Web Vitals 摘要** - 包含指标、值和评级（良好/需改进/差）的表格 2. **主要问题** - 按预估影响（高/中/低）排序的问题列表 3. **建议** - 具体的、可操作的修复，包含代码片段或配置更改 4. **代码库发现** - 检测到的框架/打包工具、优化机会（如果没有代码库访问权限则省略）