# clawvard.school 首屏性能体检 / First-paint audit

> 真实跑出 / Real run · `chrome-devtools-mcp` (Chrome 148, headless) +
> `lighthouse@13.3.0` · `https://clawvard.school/` · 桌面预设 / desktop preset
> (1350×940, throttlingMethod=`simulate`) · 2026-06-05 00:19:52 UTC.

## TL;DR

**中文**：性能分 **59 / 100**（待改进区间）。可访问性 95、最佳实践 100、SEO 100
全部健康。瓶颈集中在首屏渲染：**LCP 4.4 s**、FCP 4.4 s、Speed Index 4.6 s；
但 TBT 0 ms、CLS 0.023 都很好——主线程没堵、布局也稳，慢的是字节到达和首
块绘制。LCP 元素就是首屏 `<h1>` "Make every AI agent better."（44 730 px²，
在 Lighthouse 模拟下 4.4 s 才落地；puppeteer 无限速下 584 ms）。

**English**: Performance **59 / 100** (needs improvement). Accessibility 95,
Best Practices 100, SEO 100 are all healthy. The bottleneck is concentrated
on first paint: **LCP 4.4 s**, FCP 4.4 s, Speed Index 4.6 s — yet TBT is 0 ms
and CLS is 0.023, so neither the main thread nor layout is to blame; bytes
take too long to arrive and the first frame is delayed. The LCP element is
the hero `<h1>` "Make every AI agent better." (44 730 px²); it lands at
4.4 s under the simulated network and at 584 ms in an unthrottled run.

## 三条最高 ROI 优化 / Top-3 highest-ROI fixes

### 1. 把 Google Tag Manager 推迟到 LCP 之后 / Defer Google Tag Manager past LCP
- **数字 / Numbers** — `https://www.googletagmanager.com/gtag/js?id=G-S3BGETN47S`
  是首屏体积最大的单个资源：**158.7 KB** 传输、单线程 331 ms 下载（top 1
  by transfer size、top 6 by duration in `network.json`）。它不参与渲染。
- **怎么改 / Fix** — 用 `<script async src="…/gtag/js" data-gtm-defer>`，并把
  `dataLayer` 初始化推到 `requestIdleCallback` / `load` 事件之后；或换成
  Tag Manager 的 server-side container，让首屏完全不发这一字节。预估
  LCP 直降 200–400 ms（依赖网络）。

### 2. 三张 Supabase 博客封面：懒加载 + AVIF / Lazy-load the three Supabase blog covers
- **数字 / Numbers** — 三张 `pfpbsicvkwttqxbtjayf.supabase.co/.../blog-covers/17…`
  各 60.8 / 57.9 / 56.4 KB（合计 **~175 KB**），单图最长 806 ms，是 top-1
  by duration。从首屏 viewport 完全看不到——是“最新文章”区块。
- **怎么改 / Fix** — `<img loading="lazy" decoding="async">` + `width`/`height`
  +显式 `srcset`，把这三张排除出 LCP 关键路径；同时让 Supabase 输出 AVIF
  或 WebP 而不是 JPEG（同等画质再省 30–50%）。LCP 不直接降，但
  Speed Index 与移动慢网下的 LCP 会受益。

### 3. 字体：subset 后 `rel=preload` 关键脸 / Subset and preload the critical font face
- **数字 / Numbers** — 4 个字体文件共 **~118 KB**（Inter 47.1 KB + 18.6 KB、
  JetBrains Mono 30.7 KB、Space Grotesk 21.8 KB）。`<h1>` 文本就是 LCP
  元素，但首屏字体仍走标准 `@font-face` 链路。
- **怎么改 / Fix** — 把首屏用到的 Inter Variable 子集（拉丁基本 + 标点）
  内联或 `<link rel="preload" as="font" type="font/woff2" crossorigin>`；
  JetBrains Mono / Space Grotesk 改 `font-display: optional` 或延后下发。
  CLS 已经稳，因此可以激进推迟次要字面族。预估 LCP 再降 150–300 ms。

## 旁证 / Supporting numbers

- `metrics.json` — Lighthouse 五项核心 web vitals 全量。
- `network.json` — 82 个真实请求、470.9 KB 总传输、Top-50 落盘；按
  `transferSizeBytes` 与 `durationMs` 双排序，验证每一条建议引用的数字。
- `trace-screenshot.png` — Chrome 148 无头浏览器在 1366×768 viewport 抓的
  首屏，绿框高亮就是 PerformanceObserver 报告出的 LCP 元素 `<h1>`。
- `lcp.json` — 上述绿框的真实坐标与元素元数据
  （`box={x:107,y:156,w:498,h:104}`、`size=44730 px²`、`text="Make every
  AI agent better."`），便于 QA 核对截图和文字描述对得上。
- `report.html` — Lighthouse 13.3.0 原生 HTML 报告：四个分数环 + 完整诊断
  + opportunities，可在 iframe 里点开看任何一项 detail。

## 复跑 / How to reproduce

零 key、零 token-relay、零商业 LLM。详见
[`public/skills/agent-perf-audit/SKILL.md`](./SKILL.md) §"Task 1 — 首屏体检"。

```bash
# 1) 跑 Lighthouse（HTML + JSON）
npx -y lighthouse@latest https://clawvard.school/ \
  --output html --output json --output-path ./out/report \
  --chrome-flags="--headless=new --no-sandbox --disable-gpu" \
  --preset=desktop --quiet

# 2) 通过 chrome-devtools-mcp 抓 trace 截图 + 全量请求（见 SKILL.md）
#    或本地用 puppeteer-core 跑 SKILL.md §Appendix A 的脚本。
```