网站性能审计工具 - 使用Chrome DevTools进行核心Web指标分析与优化

web-perf by cloudflare/skills

2,600 周安装量

693 GitHub Stars

GitHub

安装命令

npx skills add https://github.com/cloudflare/skills --skill web-perf

开发数据分析开发运维

🇨🇳中文介绍

网站性能审计

您对网站性能指标、阈值和工具 API 的了解可能已经过时。在引用具体数字或建议时，优先使用检索而非预训练知识。

检索来源

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

第一步：验证可用的 MCP 工具

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

广告位招租

在这里展示您的产品或服务

触达数万 AI 开发者，精准高效

联系我们

相关 Skills

find-skills 技能搜索工具 - Vercel Labs 开源智能体技能包管理器

705,000 周安装

Vercel React 最佳实践指南 | 58条Next.js性能优化规则与代码重构

245,300 周安装

Vercel Web界面规范检查工具 - 自动检测代码是否符合Web设计指南

196,800 周安装

agent-browser 浏览器自动化工具 - Vercel Labs 命令行网页操作与测试

128,699 周安装

React 组合模式指南：Vercel 组件架构最佳实践，提升代码可维护性

态度明确：通过检查网络请求、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)`

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

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

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

工具	配置文件
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`

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

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

🇺🇸English

Web Performance Audit

Your knowledge of web performance metrics, thresholds, and tooling APIs may be outdated. Prefer retrieval over pre-training when citing specific numbers or recommendations.

Retrieval Sources

Source	How to retrieve	Use for
web.dev	`https://web.dev/articles/vitals`	Core Web Vitals thresholds, definitions
Chrome DevTools docs	`https://developer.chrome.com/docs/devtools/performance`	Tooling APIs, trace analysis
Lighthouse scoring	`https://developer.chrome.com/docs/lighthouse/performance/performance-scoring`	Score weights, metric thresholds

FIRST: Verify MCP Tools Available

Run this before starting. Try calling navigate_page or performance_start_trace. If unavailable, STOP—the chrome-devtools MCP server isn't configured.

Ask the user to add this to their MCP config:

"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.

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

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)

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

Phase 2: Core Web Vitals Analysis

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`

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

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>)

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

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`

Also check package.json for framework dependencies and build scripts.

Tree-Shaking & Dead Code

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)

Unused 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

Polyfills

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

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)

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)

Weekly Installs

1.7K

Repository

cloudflare/skills

GitHub Stars

566

First Seen

Jan 19, 2026

Security Audits

Gen Agent Trust HubPass SocketPass SnykWarn

Installed on

opencode1.4K

codex1.4K

gemini-cli1.4K

github-copilot1.3K

claude-code1.2K

amp1.2K

网站性能审计工具 - 使用Chrome DevTools进行核心Web指标分析与优化

🇨🇳中文介绍

网站性能审计

检索来源

第一步：验证可用的 MCP 工具

相关 Skills

关键准则

快速参考

工作流程

阶段 1：性能跟踪

阶段 2：核心 Web 指标分析

阶段 3：网络分析

阶段 4：无障碍快照

阶段 5：代码库分析

检测框架与打包器

Tree-Shaking 与死代码

未使用的 JS/CSS

Polyfills

压缩与最小化

输出格式

🇺🇸English

Web Performance Audit

Retrieval Sources

FIRST: Verify MCP Tools Available

Key Guidelines

Quick Reference

Workflow

Phase 1: Performance Trace

Phase 2: Core Web Vitals Analysis

Phase 3: Network Analysis

Phase 4: Accessibility Snapshot

Phase 5: Codebase Analysis

Detect Framework & Bundler

Tree-Shaking & Dead Code

Unused JS/CSS

Polyfills

Compression & Minification

Output Format