Antigravity × Lighthouse CI で Web パフォーマンス劣化を自動検出する — 予算・PR コメント・段階的ブロッキング戦略

// lighthouserc.js — Performance Budget の宣言
// このファイルは Lighthouse CI が読み込み、しきい値超えで非ゼロ終了します
module.exports = {
  ci: {
    collect: {
      // Vercel Preview などのプレビュー URL を環境変数で渡す
      url: [process.env.PREVIEW_URL],
      numberOfRuns: 3, // 3 回走らせて中央値を採用（フレーキネス対策）
      settings: {
        preset: "desktop", // mobile も別ジョブで回すのがおすすめ
        throttlingMethod: "simulate",
      },
    },
    assert: {
      assertions: {
        // 数値は「現状中央値 × 1.05」を初期値にする運用
        "categories:performance": ["error", { minScore: 0.85 }],
        "largest-contentful-paint": ["warn", { maxNumericValue: 2500 }],
        "total-blocking-time": ["error", { maxNumericValue: 300 }],
        "cumulative-layout-shift": ["error", { maxNumericValue: 0.1 }],
        // バンドルサイズの肥大化は CLS や TBT より早く現れる先行指標
        "resource-summary:script:size": ["warn", { maxNumericValue: 350000 }],
      },
    },
    upload: {
      target: "temporary-public-storage", // 結果 URL を PR にコメントできる
    },
  },
};

# .github/workflows/lighthouse-ci.yml
name: Lighthouse CI
 
on:
  pull_request:
    types: [opened, synchronize, reopened]
 
jobs:
  lhci:
    runs-on: ubuntu-latest
    # Preview デプロイの完了を待つ。Vercel の場合は deployment_status イベントを使うのが確実
    if: github.event.pull_request.head.repo.fork == false
    steps:
      - uses: actions/checkout@v4
 
      - name: Wait for Preview Deployment
        id: wait
        uses: patrickedqvist/wait-for-vercel-preview@v1.3.1
        with:
          token: ${{ secrets.GITHUB_TOKEN }}
          max_timeout: 600 # 最大 10 分待つ
          environment: Preview
 
      - uses: actions/setup-node@v4
        with:
          node-version: 20
 
      - name: Run Lighthouse CI
        env:
          PREVIEW_URL: ${{ steps.wait.outputs.url }}
        run: |
          npm install -g @lhci/cli@0.13.x
          lhci autorun || echo "LHCI_FAILED=true" >> $GITHUB_ENV
 
      - name: Upload report
        uses: actions/upload-artifact@v4
        with:
          name: lhci-report
          path: .lighthouseci/
          retention-days: 14
 
      - name: Trigger Antigravity AI Analysis
        if: env.LHCI_FAILED == 'true'
        # Step 5 で詳しく見る AI 解析ジョブを呼び出す
        run: gh workflow run antigravity-perf-analysis.yml -F pr=${{ github.event.number }}
        env:
          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}

#!/usr/bin/env bash
# scripts/lhci-diff.sh — PR と main の Lighthouse JSON を比較して差分テーブルを生成
set -euo pipefail
 
PR_REPORT=".lighthouseci/lhr-pr.json"
MAIN_REPORT=".lighthouseci/lhr-main.json"
 
if [ ! -f "$PR_REPORT" ] || [ ! -f "$MAIN_REPORT" ]; then
  echo "❌ 必要な JSON が揃っていません" >&2
  exit 1
fi
 
# jq で 4 指標を取り出してテーブルにする
node -e '
const pr = require("./.lighthouseci/lhr-pr.json");
const base = require("./.lighthouseci/lhr-main.json");
const k = ["largest-contentful-paint","total-blocking-time","cumulative-layout-shift","speed-index"];
const fmt = n => typeof n === "number" ? n.toFixed(0) : n;
console.log("metric,base,pr,delta");
for (const id of k) {
  const a = base.audits[id].numericValue;
  const b = pr.audits[id].numericValue;
  console.log(`${id},${fmt(a)},${fmt(b)},${fmt(b - a)}`);
}
' > .lighthouseci/diff.csv
 
cat .lighthouseci/diff.csv

// scripts/perf-explain.mjs — AI に劣化原因を仮説立てさせる
// CI から呼び出され、PR コメント用の Markdown を標準出力に書き出します
import fs from "node:fs/promises";
import { runAgent } from "@google/antigravity-agent"; // 仮: Agent SDK を CLI ラッパーで利用
 
const diffCsv = await fs.readFile(".lighthouseci/diff.csv", "utf8");
const changedFiles = await fs.readFile(".changed-files.txt", "utf8");
const pkgDiff = await fs.readFile(".pkg-diff.txt", "utf8").catch(() => "");
 
const prompt = `
あなたは Web Performance のエキスパートです。以下の情報から、PR で何が原因で
パフォーマンスが悪化した可能性が高いかを「仮説」として最大 3 つ示してください。
推測には必ず差分 CSV の数値か、変更ファイル名のどれかを根拠として明記すること。
推測の根拠が薄いものは出力しないでください。
 
# Lighthouse 差分（main → PR）
${diffCsv}
 
# 変更ファイル一覧
${changedFiles}
 
# package.json の差分（依存関係の変化）
${pkgDiff || "(変更なし)"}
 
# 出力形式
- 仮説 1: ...
  - 根拠: ...
  - 次の一手: ...
- 仮説 2: ...
（最大 3 件まで。1 件しか自信がなければ 1 件で構いません）
`;
 
const result = await runAgent({
  model: "gemini-3-pro",
  prompt,
  temperature: 0.2, // 推論はあまりブレさせない
  maxOutputTokens: 1200, // PR コメントとして長すぎないサイズに抑える
});
 
// 失敗時は黙らずに stderr に書く（CI ログに残す）
if (!result.text) {
  console.error("❌ AI 応答が空でした");
  process.exit(1);
}
 
console.log(result.text);

- 仮説 1: ヒーロー画像の差し替えで初回画像が大きくなった可能性
  - 根拠: LCP が +820ms 悪化、変更ファイルに `public/hero.png` が含まれる
  - 次の一手: WebP / AVIF への変換と `loading="eager"` の維持を確認
- 仮説 2: クライアント JS が肥大化した可能性
  - 根拠: TBT が +170ms、`package.json` で `chart.js` が追加されている
  - 次の一手: 動的 import への切り出し、または未使用機能の削除

## ⚠️ Lighthouse Performance Regression Detected
 
| 指標 | main | この PR | 差分 |
|---|---|---|---|
| LCP (ms) | 1820 | 2640 | **+820** |
| TBT (ms) | 140 | 310 | **+170** |
 
### 🔍 AI による原因仮説（2 件）
 
（ここに `perf-explain.mjs` の出力が入る）
 
---
<sub>このコメントは Antigravity AI が自動生成しています。`/perf rerun` で再実行できます。</sub>

// scripts/should-run-ai.mjs — AI 解析を起動すべきかを判定
import { execSync } from "node:child_process";
 
const baseSha = process.env.BASE_SHA;
const prSha = process.env.PR_SHA;
 
const changedFiles = execSync(`git diff --name-only ${baseSha} ${prSha}`)
  .toString()
  .trim()
  .split("\n")
  .filter(Boolean);
 
// しきい値: 変更ファイル数が 3 未満なら AI を呼ばない
if (changedFiles.length < 3) {
  console.log("SKIP_AI=true");
  process.exit(0);
}
 
// しきい値: 静的アセット（画像・font）だけの変更なら呼ぶ価値あり
const onlyAssets = changedFiles.every(f => /\.(png|jpe?g|webp|avif|woff2?)$/.test(f));
if (onlyAssets) {
  console.log("RUN_AI=true REASON=assets-only");
  process.exit(0);
}
 
console.log("RUN_AI=true");

// scripts/sync-budget-from-rum.mjs — RUM の数値で予算を更新する週次ジョブ
import fs from "node:fs/promises";
 
// 直近 7 日間のフィールドデータを取得（API は使用中の RUM に置き換え）
const fieldData = await fetch("https://api.example-rum.com/web-vitals?days=7", {
  headers: { Authorization: `Bearer ${process.env.RUM_TOKEN}` },
}).then(r => r.json());
 
const fieldLcp = fieldData.percentiles.p75.lcp; // CrUX の標準も p75
const fieldTbt = fieldData.percentiles.p75.tbt;
 
// 現状値より 5% だけ厳しい値を提案する
const proposed = {
  lcpBudget: Math.round(fieldLcp * 0.95),
  tbtBudget: Math.round(fieldTbt * 0.95),
};
 
await fs.writeFile("lighthouserc.json", JSON.stringify(proposed, null, 2));
console.log("✅ Proposed new budget:", proposed);