performance-budgetcommit 4b0ddb9SKILL.md · パフォーマンス
CIでパフォーマンス予算を強制
CIにバンドルサイズと Lighthouse のしきい値を設け、予算超過で失敗させてPRの段階で性能劣化を見つけます。
npx skills add thedaviddias/Front-End-Checklist --skill performance-budgetコマンドを選択しました。手動でコピーしてください。
- 権限
- read-repo
- write-files
- shell
- network
- 対応ツール
- Any SKILL.md agent
- GitHub
- 74.6k
- 提供元
- コミュニティ · David Dias
- 状態
- スキャン済み
- ライセンス
- MIT
- カテゴリ
- パフォーマンス
基本ルール
バンドルサイズの予算と実行時の予算(Lighthouse、Core Web Vitals)を区別し、両方を強制します。
実行フェーズ
フェーズ 01予算の有無を確認
package.json とCI設定からサイズや Lighthouse のしきい値を探します。
フェーズ 02しきい値を決める
最大バンドルサイズ、最低 Lighthouse スコア、最大LCPを決め、緩めに始めて徐々に締めます。
フェーズ 03CIに組み込む
size-limit と Lighthouse CI のアサーションでPRごとに予算を確認し、超過時はビルドを失敗させます。
フェーズ 04リリース後の監視
本番のRUMとアラートを組み込み、CIの外で起きる劣化も捉えます。
権限の説明(SKILL.md より)
| 機能 | 必要か | 説明 |
|---|---|---|
| ファイル書き込み | 必要 | CIワークフロー、package.json、size-limit と Lighthouse CI の設定を変更します。 |
| コマンド実行 | 一部で必要 | size-limit や Lighthouse CI などの予算ツールを導入・実行します。 |
| 外部通信 | 一部で必要 | 開発用依存関係のインストールにのみ使います。 |
SKILL.md のフロントマター(YAML)
---
name: performance-budget
description: "Use when reviewing CI configuration, bundle analysis workflows, or pull requests that add dependencies and assets. Distinguish bundle-size budgets from runtime budgets such as Lighthouse or Core Web Vitals so teams can enforce both."
metadata:
category: testing
priority: medium
difficulty: intermediate
estimatedTime: "25"
source: frontendchecklist.io
url: https://frontendchecklist.io/rules/testing/performance-budget
---関連スキル
ルールスキャンですべてのリスクを検出できるわけではありません。インストール前にこのスキルの SKILL.md を読み、権限を確認してください。