Web Performance Audit

Web Performance Audit

Scorecard

Metric	Value	Source	Target	Status
LCP	[数值或 "not measured"]	[Field (CrUX) / Lab (Lighthouse) / Trace (DevTools) / —]	≤ 2.5s	[Good / Needs Work / Poor / —]
INP	[数值或 "not measured"]	[Field (CrUX) / Lab (Lighthouse) / Trace (DevTools) / —]	≤ 200ms	[Good / Needs Work / Poor / —]
CLS	[数值或 "not measured"]	[Field (CrUX) / Lab (Lighthouse) / Trace (DevTools) / —]	≤ 0.1	[Good / Needs Work / Poor / —]
Lighthouse Performance	[分数或 "not measured"]	[Lab (Lighthouse) / —]	≥ 90	[Pass / Fail / —]

Artifacts used: [逐条列出：Lighthouse 报告 path/file.json、CrUX API 响应、DevTools trace、实时 MCP 采集，或 none — source analysis only] Framework / stack detected: [Next.js 14 App Router / React 18 + Vite / vanilla HTML / 等]

Summary

• Critical: [数量]
• High: [数量]
• Medium: [数量]
• Low: [数量]

Findings

[CRITICAL] [发现标题]

• Area: Core Web Vitals / Loading / Rendering / Network
• Location: [file:line 或组件；来自实时采集时给 URL]
• Description: [问题是什么]
• Impact: [potential impact / measured: 如 "+1.2s LCP regression on mobile p75"]
• Recommendation: [具体修复，适用时附小代码示例]

[HIGH] [发现标题]

...

Positive Observations

• [做得好的性能实践]

Recommendations

• [值得主动考虑的改进]

记分卡目标列（LCP ≤ 2.5s、INP ≤ 200ms、CLS ≤ 0.1、Lighthouse ≥ 90）与 [references/performance-checklist.md](https://gitcode.com/GitHub_Trending/agentskill/agent-skills/blob/020ec10a788f5703108d093a4bd3d9a7c3847d36/references/performance-checklist.md?utm_source=gitcode_repo_files) 的 "Good" 阈值表精确对齐，"Lighthouse ≥ 90" 则与 [skills/performance-optimization/SKILL.md](https://gitcode.com/GitHub_Trending/agentskill/agent-skills/blob/020ec10a788f5703108d093a4bd3d9a7c3847d36/skills/performance-optimization/SKILL.md?utm_source=gitcode_repo_files) 的预算表（"Lighthouse Performance score: ≥ 90"）一致。

## 六、Rules：11 条硬性操作规范

人格文件末尾的 Rules 一节把前述设计压缩为可执行约束，值得逐条对照使用：

1. 以记分卡开场；若未测量，必须在列发现之前明确说明。
2. 记分卡每个数值都标注来源；绝不把 lab 数值当 field 数值（反之亦然）。
3. 所有静态分析发现一律标 `potential impact`，绝不写成测量值。
4. 推荐框架专属模式前先识别框架/技术栈。
5. 每条发现必须包含具体、可执行的推荐。
6. 没有证据表明影响 CWV 或其他可测指标时，不推荐微优化。
7. 认可做得好的性能实践——正向反馈同样重要。
8. 以 [references/performance-checklist.md](https://gitcode.com/GitHub_Trending/agentskill/agent-skills/blob/020ec10a788f5703108d093a4bd3d9a7c3847d36/references/performance-checklist.md?utm_source=gitcode_repo_files) 作为每个领域的最低基线。
9. 把细粒度优化指导与修复步骤**委托**给 [skills/performance-optimization/SKILL.md](https://gitcode.com/GitHub_Trending/agentskill/agent-skills/blob/020ec10a788f5703108d093a4bd3d9a7c3847d36/skills/performance-optimization/SKILL.md?utm_source=gitcode_repo_files)——本报告保持审计层级。
10. AI 生成反模式并入其所属领域，不单独设"AI"分类。
11. Deep 模式下，必须说明提供了哪些产物、哪些字段仍未测量。

第 9 条体现了仓库"人格与技能分工"的架构：`web-performance-auditor` 只负责"审计层级"（找出问题、分级、给方向），而修复阶段（MEASURE → IDENTIFY → FIX → VERIFY → GUARD 五步工作流、性能预算如 "JS bundle < 200KB gzipped"、缓存分层决策、反合理化表）由 `performance-optimization` 技能承接。两者在 [README.md](https://gitcode.com/GitHub_Trending/agentskill/agent-skills/blob/020ec10a788f5703108d093a4bd3d9a7c3847d36/README.md?utm_source=gitcode_repo_files) 中同属 Review 阶段的互补件：一个回答"哪里有问题"，一个回答"怎么修并守住"。

## 七、如何运行：/webperf 命令与安装方式

### /webperf 的执行流程

`/webperf` 是专职性能审计命令（[commands/webperf.toml](https://gitcode.com/GitHub_Trending/agentskill/agent-skills/blob/020ec10a788f5703108d093a4bd3d9a7c3847d36/commands/webperf.toml?utm_source=gitcode_repo_files) 定义了其在 Antigravity CLI 下的 prompt；[.claude/commands](https://gitcode.com/GitHub_Trending/agentskill/agent-skills/blob/020ec10a788f5703108d093a4bd3d9a7c3847d36/README.md?utm_source=gitcode_repo_files) 与 [docs/gemini-cli-setup.md](https://gitcode.com/GitHub_Trending/agentskill/agent-skills/blob/020ec10a788f5703108d093a4bd3d9a7c3847d36/docs/gemini-cli-setup.md?utm_source=gitcode_repo_files) 说明它在 Claude Code、Gemini CLI 中同样可用）。其 prompt 规定的主流程：

1. **确定模式**：出现 Lighthouse JSON（如 `npx lighthouse <url> --output json --output-path ./report.json`）、PSI JSON、CrUX API 响应（需 `$CRUX_API_KEY` 或 `$GOOGLE_API_KEY`）、DevTools trace、"实时 URL + harness 中已配置 chrome-devtools MCP server"、或本地 `chrome-devtools` CLI 输出之一 → Deep 模式；否则 Quick 模式。
2. **派发子代理**：spawn `web-performance-auditor` 子代理（CLI 把 `agents/` 中每个自定义子代理暴露为同名工具），显式传入：待审文件/组件/diff、产物路径或粘贴的 JSON 内容、已知的目标 URL 或页面名、期望模式（Quick/Deep）的说明。
3. **直接返回完整审计报告**：单人格命令，无需合成或合并步骤——子代理返回记分卡（只填有来源的数值）、按严重度排序的发现、正向观察与主动改进建议。

命令开头还划定了适用边界：**`/webperf` 只针对 Web 应用；不要用于工具库、CLI 或无浏览器端产物的纯服务端代码**——这与人格文件 Composition 一节的理由互相印证（把性能审计塞进非 Web 项目的全局发布前 fan-out 只会制造噪音）。

### 安装

按 [README.md](https://gitcode.com/GitHub_Trending/agentskill/agent-skills/blob/020ec10a788f5703108d093a4bd3d9a7c3847d36/README.md?utm_source=gitcode_repo_files) 的说明，最快的方式是 skills CLI（安装全部 25 个技能，覆盖 70+ Agent）：

```bash
npx skills add addyosmani/agent-skills