web-performance-audit

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Web Performance Audit

网页性能审计

Audit web page performance using Chrome DevTools MCP tools. This skill focuses on Core Web Vitals, network optimization, and high-level accessibility gaps.

使用Chrome DevTools MCP工具审计网页性能。本技能聚焦于Core Web Vitals、网络优化以及高优先级可访问性问题。

FIRST: Verify MCP Tools Available

第一步：确认MCP工具可用

Run this before starting. Try calling

navigate_page

performance_start_trace

. If unavailable, STOP—the chrome-devtools MCP server isn't configured.

Ask the user to add this to their MCP config:

json

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

开始前请运行此步骤。尝试调用

navigate_page

或

performance_start_trace

。如果无法调用，请停止操作——chrome-devtools MCP服务器未配置。

请用户将以下内容添加到他们的MCP配置中：

json

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

Key Guidelines

核心准则

Be assertive: Verify claims by checking network requests, DOM, or codebase—then state findings definitively.
Verify before recommending: Confirm something is unused before suggesting removal.
Quantify impact: Use estimated savings from insights. Don't prioritize changes with 0ms impact.
Skip non-issues: If render-blocking resources have 0ms estimated impact, note but don't recommend action.
Be specific: Say "compress hero.png (450KB) to WebP" not "optimize images".
Prioritize ruthlessly: A site with 200ms LCP and 0 CLS is already excellent—say so.

态度明确：通过检查网络请求、DOM或代码库验证结论，然后清晰陈述发现的问题。
先验证再建议：确认某项资源未被使用后，再建议移除。
量化影响：根据分析结果估算优化收益。不要优先处理无耗时影响（0ms）的改动。
忽略非问题项：如果渲染阻塞资源的估算影响为0ms，只需标注但无需建议处理。
表述具体：要说“将hero.png（450KB）压缩为WebP格式”，而非“优化图片”。
严格优先级排序：如果网站的LCP为200ms、CLS为0，说明性能已极佳，直接告知用户即可。

Quick Reference

快速参考

Task	Tool Call
Load page	`navigate_page(url: "...")`
Start trace	`performance_start_trace(autoStop: true, reload: true)`
Analyze insight	`performance_analyze_insight(insightSetId: "...", insightName: "...")`
List requests	`list_network_requests(resourceTypes: ["Script", "Stylesheet", ...])`
Request details	`get_network_request(reqid: <id>)`
A11y snapshot	`take_snapshot(verbose: true)`

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

Workflow

工作流程

Copy this checklist to track progress:

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：性能追踪（导航+记录）
- [ ] 阶段2：Core Web Vitals分析（包含CLS问题根源）
- [ ] 阶段3：网络分析
- [ ] 阶段4：可访问性快照
- [ ] 阶段5：代码库分析（若为第三方网站则跳过）

Phase 1: Performance Trace

阶段1：性能追踪

Navigate to the target URL:
```
navigate_page(url: "<target-url>")
```
Start a performance trace with reload to capture cold-load metrics:
```
performance_start_trace(autoStop: true, reload: true)
```
Wait for trace completion, then retrieve results.

Troubleshooting:

If trace returns empty or fails, verify the page loaded correctly with
```
navigate_page
```
first
If insight names don't match, inspect the trace response to list available insights

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

故障排除：

如果追踪返回空结果或失败，请先使用
```
navigate_page
```
验证页面是否正确加载
如果洞察名称不匹配，请检查追踪响应以查看可用的洞察列表

Phase 2: Core Web Vitals Analysis

阶段2：Core Web Vitals分析

Use

performance_analyze_insight

to extract key metrics.

Note: Insight names may vary across Chrome DevTools versions. If an insight name doesn't work, check the

insightSetId

from the trace response to discover available insights.

Common insight names:

Metric	Insight Name	What to Look For
LCP	`LCPBreakdown`	Time to largest contentful paint; breakdown of TTFB, resource load, render delay
CLS	`CLSCulprits`	Elements causing layout shifts (images without dimensions, injected content, font swaps)
Render Blocking	`RenderBlocking`	CSS/JS blocking first paint
Document Latency	`DocumentLatency`	Server response time issues
Network Dependencies	`NetworkRequestsDepGraph`	Request chains delaying critical resources

Example:

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

Key thresholds (good/needs-improvement/poor):

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

使用

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

Phase 3: Network Analysis

阶段3：网络分析

List all network requests to identify optimization opportunities:

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

Look for:

Render-blocking resources: JS/CSS in
```
<head>
```
without
```
async
```
/
```
defer
```
/
```
media
```
attributes
Network chains: Resources discovered late because they depend on other resources loading first (e.g., CSS imports, JS-loaded fonts)
Missing preloads: Critical resources (fonts, hero images, key scripts) not preloaded
Caching issues: Missing or weak
```
Cache-Control
```
,
```
ETag
```
, or
```
Last-Modified
```
headers
Large payloads: Uncompressed or oversized JS/CSS bundles
Unused preconnects: If flagged, verify by checking if ANY requests went to that origin. If zero requests, it's definitively unused—recommend removal. If requests exist but loaded late, the preconnect may still be valuable.

For detailed request info:

get_network_request(reqid: <id>)

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

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

关注内容：

渲染阻塞资源：
```
<head>
```
中未添加
```
async
```
/
```
defer
```
/
```
media
```
属性的JS/CSS
网络请求链：因依赖其他资源加载而延迟发现的资源（如CSS导入、JS加载的字体）
缺失预加载：未预加载的关键资源（字体、首屏图片、核心脚本）
缓存问题：缺失或弱
```
Cache-Control
```
、
```
ETag
```
或
```
Last-Modified
```
响应头
大体积 payload：未压缩或过大的JS/CSS包
未使用的预连接：如果被标记，验证是否有任何请求发往该源。如果无请求，则确定为未使用——建议移除。如果有请求但加载较晚，预连接可能仍有价值。

查看请求详情：

get_network_request(reqid: <id>)

Phase 4: Accessibility Snapshot

阶段4：可访问性快照

Take an accessibility tree snapshot:

take_snapshot(verbose: true)

Flag high-level gaps:

Missing or duplicate ARIA IDs
Elements with poor contrast ratios (check against WCAG AA: 4.5:1 for normal text, 3:1 for large text)
Focus traps or missing focus indicators
Interactive elements without accessible names

生成可访问性树快照：

take_snapshot(verbose: true)

标记高优先级问题：

缺失或重复的ARIA ID
对比度不足的元素（对照WCAG AA标准：普通文本4.5:1，大文本3:1）
焦点陷阱或缺失焦点指示器
无可访问名称的交互元素

Phase 5: Codebase Analysis

阶段5：代码库分析

Skip if auditing a third-party site without codebase access.

Analyze the codebase to understand where improvements can be made.

如果审计的是无法访问代码库的第三方网站，请跳过此阶段。

分析代码库以确定优化方向。

Detect Framework & Bundler

检测框架与打包工具

Search for configuration files to identify the stack:

Tool	Config Files
Webpack	`webpack.config.js` , `webpack.*.js`
Vite	`vite.config.js` , `vite.config.ts`
Rollup	`rollup.config.js` , `rollup.config.mjs`
esbuild	`esbuild.config.js` , build scripts with `esbuild`
Parcel	`.parcelrc` , `package.json` (parcel field)
Next.js	`next.config.js` , `next.config.mjs`
Nuxt	`nuxt.config.js` , `nuxt.config.ts`
SvelteKit	`svelte.config.js`
Astro	`astro.config.mjs`

Also check

package.json

for framework dependencies and build scripts.

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

工具	配置文件
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 & Dead Code

Tree-Shaking与死代码

Webpack: Check for
```
mode: 'production'
```
,
```
sideEffects
```
in package.json,
```
usedExports
```
optimization
Vite/Rollup: Tree-shaking enabled by default; check for
```
treeshake
```
options
Look for: Barrel files (
```
index.js
```
re-exports), large utility libraries imported wholesale (lodash, moment)

Webpack：检查是否设置

mode: 'production'

、

package.json

中的

sideEffects

、

usedExports

优化项

Vite/Rollup：默认启用Tree-Shaking；检查
```
treeshake
```
配置
关注内容：桶文件（
```
index.js
```
重导出）、整体导入的大型工具库（lodash、moment）

Unused JS/CSS

未使用的JS/CSS

Check for CSS-in-JS vs. static CSS extraction
Look for PurgeCSS/UnCSS configuration (Tailwind's
```
content
```
config)
Identify dynamic imports vs. eager loading

检查是CSS-in-JS还是静态CSS提取
查看PurgeCSS/UnCSS配置（Tailwind的
```
content
```
配置）
区分动态导入与即时加载

Polyfills

Check for
```
@babel/preset-env
```
targets and
```
useBuiltIns
```
setting
Look for
```
core-js
```
imports (often oversized)
Check
```
browserslist
```
config for overly broad targeting

检查
```
@babel/preset-env
```
的targets和
```
useBuiltIns
```
设置
查看
```
core-js
```
导入（通常体积过大）
检查
```
browserslist
```
配置是否过于宽泛

Compression & Minification

压缩与混淆

Check for
```
terser
```
,
```
esbuild
```
, or
```
swc
```
minification
Look for gzip/brotli compression in build output or server config
Check for source maps in production builds (should be external or disabled)

检查是否使用
```
terser
```
、
```
esbuild
```
或
```
swc
```
进行混淆
查看构建输出或服务器配置中的gzip/brotli压缩
检查生产构建中的source maps（应设为外部或禁用）

Output Format

输出格式

Present findings as:

Core Web Vitals Summary - Table with metric, value, and rating (good/needs-improvement/poor)
Top Issues - Prioritized list of problems with estimated impact (high/medium/low)
Recommendations - Specific, actionable fixes with code snippets or config changes
Codebase Findings - Framework/bundler detected, optimization opportunities (omit if no codebase access)

按以下格式呈现结果：

Core Web Vitals摘要 - 包含指标、数值和评级（良好/需改进/较差）的表格
首要问题 - 按优先级排序的问题列表，包含估算影响（高/中/低）
建议方案 - 具体、可执行的修复措施，包含代码片段或配置变更
代码库发现 - 检测到的框架/打包工具、优化机会（若无代码库访问权限则省略）