webperf について
Chrome DevToolsでウェブパフォーマンスを測定・デバッグするJavaScriptスニペット集です。Core Web Vitals、読み込み、操作、メディア、ネットワーク品質の5分野に56個のスニペットをまとめ、選択と結果解釈の手順も示します。
主な機能
- 01パフォーマンス測定スニペット56個
- 025つのスキル領域をカバー
- 03Chrome DevToolsでの実行ガイド
- 04構造化されたスニペット結果
- 05スニペット実行用CLIの選択肢
活用シーン
- 01性能問題に応じた検査項目の選択
- 02ページ読み込み動作の監査
- 03操作時のジャンク調査
- 04画像とネットワーク性能の確認
MCP 対応
Chrome DevTools MCPのページ遷移およびスクリプト評価ツールを使ってスニペットを実行します。トラッキング型を含む結果の取得方法も説明します。
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/インストール後、Claude Code で/webperfを入力して読み込まれたか確認します。
詳細
WebPerf Snippets Toolkit
Chrome DevTools でウェブパフォーマンスを測定およびデバッグするための、56 個の JavaScript スニペット集です。各スニペットはページ内で実行され、構造化された結果オブジェクトを返します。
クイックリファレンス
| スキル | スニペット | トリガーフレーズ |
|---|---|---|
| webperf-core-web-vitals | 7 | 「LCP をデバッグ」、「LCP が遅い」、「CLS」、「レイアウトシフト」、「INP」、「インタラクションのレイテンシ」、「応答性」 |
| webperf-loading | 34 | 「TTFB」、「サーバーが遅い」、「FCP」、「レンダリングをブロック」、「フォントの読み込み」、「スクリプトの読み込み」、「リソースヒント」、「サービスワーカー」 |
| webperf-interaction | 10 | 「ジャンク」、「スクロールのパフォーマンス」、「長時間タスク」、「アニメーションフレーム」、「INP のデバッグ」 |
| webperf-media | 4 | 「画像の監査」、「遅延読み込み」、「画像の最適化」、「動画の監査」 |
| webperf-resources | 1 | 「ネットワーク品質」、「帯域幅」、「接続タイプ」、「save-data」 |
ワークフロー
- ユーザーの質問に基づいて、関連するスキルを特定します（上記のクイックリファレンスを参照してください）
- スキルの SKILL.md を読み込み、利用できるスニペットとしきい値を確認します
- Chrome DevTools MCP で実行します：
mcp__chrome-devtools__navigate_page→ 対象の URL に移動しますmcp__chrome-devtools__evaluate_script→ スニペットを実行して返されたオブジェクトを読み取ります。これが結果です（スクリプトはコンソールに出力しません）status: "tracking"→ インタラクションの後、別のmcp__chrome-devtools__evaluate_script呼び出しでgetDataFnに指定された関数を呼び出します- Chrome DevTools MCP がない場合は、CLI でスニペットを実行します：
npx webperf-snippets <url> --snippet <Name> --json
- スキルで定義されているしきい値を使って結果を解釈します
- 調査結果に基づいて、実行可能な推奨事項を提示します
コメント
Markdown 対応