web-perf

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)

复制以下清单跟踪进度：

审计进度：
- [ ] 第一阶段：性能追踪（导航+记录）
- [ ] 第二阶段：Core Web Vitals分析（包含CLS问题根源）
- [ ] 第三阶段：网络分析
- [ ] 第四阶段：可访问性快照
- [ ] 第五阶段：代码库分析（第三方网站可跳过）

Phase 1: Performance Trace

第一阶段：性能追踪

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
```
验证页面是否正确加载
如果洞察名称不匹配，请检查追踪响应中的
```
insightSetId
```
以查看可用的洞察选项

Phase 2: Core Web Vitals Analysis

第二阶段：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

第三阶段：网络分析

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
```
响应头
大体积负载：未压缩或过大的JS/CSS包
未使用的预连接：如果被标记，请验证是否有任何请求发往该源。如果没有请求，说明确实未使用——建议移除。如果有请求但加载较晚，预连接可能仍有价值。

查看请求详情：

get_network_request(reqid: <id>)

Phase 4: Accessibility Snapshot

第四阶段：可访问性快照

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

第五阶段：代码库分析

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

垫片（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
```
的目标配置和
```
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压缩设置
检查生产构建中的源映射（应为外部或禁用状态）

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