# Web 性能ベンチマーク (benchmark)

> ブラウザで performance.getEntries() からページ指標を計測し、基準値と比較して Web 性能の劣化を検出します。

- カテゴリ: [パフォーマンス](https://www.myskills.tools/ja/categories/performance/)
- 提供元: コミュニティ · Garry Tan
- リポジトリ: https://github.com/garrytan/gstack/tree/main/benchmark (commit 043feff · v1.0.0)
- SKILL.md: https://github.com/garrytan/gstack/blob/main/benchmark/SKILL.md
- インストールコマンド: `npx skills add garrytan/gstack --skill benchmark`
- ライセンス: MIT
- 対応ツール: Claude Code, Codex, Cursor, Copilot
- 権限: read-repo ✓, write-files ✓, shell ✓, network ✓
- 状態: スキャン済み
- ルールスキャンですべてのリスクを検出できるわけではありません。インストール前にこのスキルの SKILL.md を読み、権限を確認してください。
- ⚠ Aside 経由でログイン済みの実ブラウザを使って対象サイトを開くことがあり、gstack のスクリプトでテレメトリを記録します。

## 基本ルール

推測ではなく、実際の performance.getEntries() のデータで計測します。

## 実行フェーズ

1. **準備とページ選定** — .gstack/benchmark-reports を作成し、--pages の指定か、トップと最大 5 つのナビゲーション先を提案してユーザーに確認します。--diff では変更の影響ページのみ測ります。
2. **指標の収集** — ページごとにブラウザスクリプトを 5 回実行し、TTFB、FCP、LCP、DOM のタイミング、完全読み込み、遅いリソース、JS/CSS サイズを取得して中央値と範囲を記録します。
3. **基準値と比較** — --baseline では baseline.json を保存し、それ以外は閾値で基準値と比較します。ばらつきの範囲内の差は変化なしとします。
4. **リソースと予算** — 最も遅いリソースを挙げてそれぞれに改善策を一つ示し、FCP、LCP、JS、CSS、転送量、リクエスト数の予算を確認して評価します。
5. **傾向とレポート** — --trend で直近 5 回の推移を表示し、Markdown と JSON のレポートを .gstack/benchmark-reports に保存します。

## 権限の説明（SKILL.md より）

| 機能 | 必要か | 説明 |
|---|---|---|
| ファイル書き込み | 一部で必要 | .gstack/benchmark-reports 配下のレポートと基準値のみを書き込み、明示的な依頼がない限りコードは変更しません。 |
| コマンド実行 | 必要 | gstack のスクリプト、git、gh、aside repl または同梱のヘッドレスブラウザのコマンドを実行してデータを集めます。 |
| 外部通信 | 一部で必要 | ユーザーが指定した対象サイトと同一オリジンのページのみにアクセスし、--diff では gh でベースブランチを照会します。 |

## SKILL.md のフロントマター（YAML）

```yaml
---
name: benchmark
preamble-tier: 1
version: 1.0.0
description: Web performance regression detection. (gstack)
triggers:
  - web performance benchmark
  - check page speed
  - detect page performance regression
allowed-tools:
  - Bash
  - Read
  - Write
  - Glob
  - AskUserQuestion
---
```

ホーム: https://www.myskills.tools/ja/ · URL: https://www.myskills.tools/ja/skills/benchmark/