web-perf

网页性能审计

你对网页性能指标、阈值和工具 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`	分数权重、指标阈值

在开始前运行此步骤。 尝试调用 navigate_page 或 performance_start_trace。如果不可用，停止——chrome-devtools MCP 服务器未配置。

请用户将其添加到 MCP 配置中：

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

任务	工具调用
加载页面	`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)`

复制此清单以跟踪进度：

审计进度：
- [ ] 阶段 1：性能跟踪（导航 + 记录）
- [ ] 阶段 2：核心网页指标分析（包括 CLS 罪魁祸首）
- [ ] 阶段 3：网络分析
- [ ] 阶段 4：可访问性快照
- [ ] 阶段 5：代码库分析（如果是第三方网站则跳过）

导航到目标 URL：
```
navigate_page(url: "<target-url>")
```
启动带重新加载的性能跟踪以捕获冷加载指标：
```
performance_start_trace(autoStop: true, reload: true)
```
等待跟踪完成，然后检索结果。

故障排除：

使用 performance_analyze_insight 提取关键指标。

注意： 洞察名称可能因 Chrome DevTools 版本而异。如果某个洞察名称无效，请从跟踪响应中的 insightSetId 发现可用洞察。

常见洞察名称：

示例：

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

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

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

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

查找：

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

获取详细请求信息：

get_network_request(reqid: <id>)

获取可访问性树快照：

take_snapshot(verbose: true)

标记高级别差距：

如果审计的是第三方网站且无法访问代码库，则跳过。

分析代码库以了解可以在哪些方面进行改进。

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

工具	配置文件
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：默认启用 Tree-shaking；检查 treeshake 选项
查找：桶文件（index.js 重新导出）、整体导入的大型工具库（lodash、moment）