web-perf-auditlisted
Install: claude install-skill EVEDensity/web-perf-audit
# Web Performance Audit Skill
基于 web.dev《Learn Performance》知识体系的全自动 Web 性能审计技能包。
多阶段流水线：SCAN → ANALYZE → SCORE → REPORT。
结果落盘为 JSON + Markdown，支持增量对比和 CI 集成。
## Pipeline Overview
```
SCAN ANALYZE SCORE REPORT
───── ───────── ───── ──────
fetch_metrics.py ┌→ analyze_critical_path.py ┐
(Lighthouse/PSI) ├→ check_resource_hints.py ├→ score_and_report.py → audit-report.json
├→ audit_images.py │ report.md
├→ audit_fonts.py │ dashboard.html
└→ audit_js_bundles.js ┘
diff_report.py
(CI/PR 对比)
```
## Prerequisites
在首次使用前，确认以下依赖可用：
```bash
# Node.js 依赖（Lighthouse + Puppeteer）
npm install -g lighthouse
npm install puppeteer # 或在技能目录下 npm install
# Python 依赖（仅标准库 + urllib，无需额外安装）
# Python 3.8+ 即可
```
## Stage 1: SCAN — 抓取页面原始数据
**目标：** 获取 Core Web Vitals 原始指标和 Lighthouse 审计结果。
使用 `scripts/fetch_metrics.py`：
```bash
# 默认使用本地 Lighthouse CLI（推荐，无需 API Key）
python scripts/fetch_metrics.py <URL> --output-dir .web-perf
# 可选：使用 PageSpeed Insights API（获取 CrUX 真实用户数据）
python scripts/fetch_metrics.py <URL> --output-dir .web-perf --psi-key <YOUR_API_KEY>
# 桌面端策略
python scripts/fetch_metrics.py <URL> --output-dir .web-perf --strategy desktop
``