webperf-resources

WebPerf：リソースとネットワーク

Chrome DevTools でウェブパフォーマンスを測定する JavaScript スニペットです。

スクリプトの実行

1. mcp__chrome-devtools__evaluate_script でスクリプトを実行し、返されるオブジェクトを確認します。スクリプトはコンソールに出力しないため、返されるオブジェクトが結果です。内容は script、status、およびメトリクスデータ（value、rating、details、items、issues）で、詳しくは references/schema.md を参照してください。
2. status が "tracking" の場合、スクリプトはページの監視を続けます。操作を行った後、別の mcp__chrome-devtools__evaluate_script 呼び出しで getDataFn に記載された関数（例：getINP()）を呼び出し、返されるオブジェクトを確認します。
3. status が "error" または "unsupported" の場合は、error を確認してください。ページがまだ読み込まれていないか、ブラウザーに必要な API がない可能性があります。

Chrome DevTools MCP を使わない場合は、webperf-snippets CLI で同じスニペットを実行できます。この CLI はヘッドレス Chromium でページを読み込み、同じ結果オブジェクトを出力します。コマンドは npx webperf-snippets <url> --snippet <Name> --json です。<Name> には .js を除いたスクリプト名を指定します。Playwright と Chromium が必要です（npm install --save-dev webperf-snippets playwright を実行し、その後 npx playwright install chromium を実行してください）。トラッキングスニペットで操作を実行するには、--interact-script <file> を指定します。

スクリプト

• scripts/Network-Bandwidth-Connection-Quality.js — ネットワーク帯域幅と接続品質

よくあるワークフロー

ネットワーク品質の評価

ユーザーがネットワークパフォーマンス、接続品質、またはアダプティブ読み込みについて尋ねた場合：

1. Network-Bandwidth-Connection-Quality.js — ネットワーク帯域幅、実効接続タイプ、RTT、ダウンリンク、データセーバーモードを分析します

アダプティブ読み込み戦略

アダプティブ読み込みを実装する場合、またはユーザーが「低速な接続向けに最適化するには」と尋ねた場合：

1. Network-Bandwidth-Connection-Quality.js — 接続品質を検出します
2. webperf-loading スキルと相互参照します：
   • TTFB.js（低速な接続でのサーバー応答を測定）
   • Find-render-blocking-resources.js（読み込みを遅らせるべき大容量リソースを特定）
   • Resource-Hints-Validation.js（低速なネットワーク向けに preconnect を最適化）
3. webperf-media スキルと相互参照します：
   • Image-Element-Audit.js（接続に応じたレスポンシブ画像を実装）
   • Video-Element-Audit.js（接続に応じて動画品質を調整）

Save-Data モードの検出

ユーザーが Save-Data やデータ節約機能について尋ねた場合：

1. Network-Bandwidth-Connection-Quality.js — Save-Data が有効かどうかを確認します
2. Save-Data が有効な場合は、以下を推奨します：
   • 画像品質を下げる
   • 動画の自動再生を無効にする
   • 重要度の低いリソースの読み込みを遅らせる
   • 低解像度のサムネイルを使う

モバイル／低速な接続向けの最適化

ユーザーが「モバイル向けに最適化する」または「低速な接続を使うユーザー」と尋ねた場合：

1. Network-Bandwidth-Connection-Quality.js — 接続タイプを評価します
2. webperf-loading スキルと相互参照します：
   • TTFB.js（低速な接続では重要）
   • Find-render-blocking-resources.js（低速なネットワークでのブロッキングを最小限に抑える）
   • Critical-CSS-Detection.js（クリティカル CSS をインライン化して RTT を短縮）
   • Prefetch-Resource-Validation.js（低速な接続で過剰なプリフェッチを避ける）

判断ツリー

結果に基づいてフォローアップのスニペットを自動実行するには、この判断ツリーを使用します：

Network-Bandwidth-Connection-Quality.js の後

• effectiveType が "slow-2g" または "2g" の場合 → 非常に遅い接続です。以下を推奨します：

  1. webperf-loading:Critical-CSS-Detection.js を実行します（クリティカル CSS をインライン化）
  2. webperf-media:Image-Element-Audit.js を実行します（積極的な遅延読み込みを実装）
  3. webperf-loading:Prefetch-Resource-Validation.js を実行します（帯域幅を節約するため、プリフェッチを削除）
  4. webperf-core-web-vitals:LCP.js を実行します（LCP は遅い接続の影響を大きく受けます）
  5. 最小限のリソース戦略を推奨します

• effectiveType が "3g" の場合 → 中程度の接続です。以下を推奨します：

  1. webperf-loading:Find-render-blocking-resources.js を実行します（ブロッキングを最小限に抑える）
  2. webperf-media:Image-Element-Audit.js を実行します（レスポンシブ画像）
  3. webperf-loading:Resource-Hints-Validation.js を実行します（preconnect を最適化）
  4. webperf-core-web-vitals:INP.js を実行します（高いレイテンシはインタラクションの応答性に影響する可能性があります）
  5. 画質を適応的に調整する画像を実装します

• effectiveType が "4g" 以上の場合 → 良好な接続です。以下を推奨します：

  1. 標準的な最適化手法
  2. ナビゲーション向けの戦略的なプリフェッチを検討します
  3. 高品質メディアを使用できます

• save-data が有効な場合 → ユーザーが明示的にデータを節約しようとしています。以下を推奨します：

  1. 画像品質を大幅に下げます
  2. 動画の自動再生を無効にします
  3. 重要でないリソースの読み込みを遅らせます
  4. プリフェッチ／プリロードのヒントを削除します
  5. 「高画質」切り替えオプションを表示します

• RTT > 300ms の場合 → 高レイテンシです。以下を推奨します：

  1. webperf-loading:TTFB.js を実行します（レイテンシは TTFB に影響します）
  2. webperf-loading:TTFB-Sub-Parts.js を実行します（レイテンシの構成要素を分析）
  3. webperf-loading:Resource-Hints-Validation.js を実行します（RTT が高い場合、preconnect が重要です）
  4. webperf-loading:Service-Worker-Analysis.js を実行します（レイテンシが高い場合、キャッシュが重要です）
  5. オリジンの数を最小限に抑えます
  6. 多重化には HTTP/2 または HTTP/3 を使用します

• downlink < 1 Mbps の場合 → 帯域幅が非常に限られています。以下を推奨します：

  1. webperf-media:Image-Element-Audit.js を実行します（積極的に圧縮）
  2. webperf-media:Video-Element-Audit.js を実行します（自動再生を無効化）
  3. webperf-loading:Prefetch-Resource-Validation.js を実行します（プリフェッチを削除）
  4. 帯域幅を考慮した読み込みを実装します

• downlink > 10 Mbps の場合 → 帯域幅は良好です。以下を検討します：

  • 高品質メディア
  • 戦略的なプリフェッチ
  • 次のページのリソースのプリロード

適応型読み込みの実装ガイド

Network Information API の結果に基づいて、以下の戦略を実装します：

slow-2g / 2g（< 50 Kbps）の場合：（effectiveType: "slow-2g" または "2g"）

• 低解像度画像を配信します（品質：30～40）
• 動画の自動再生を無効にします
• すべてのプリフェッチヒントを削除します
• すべてのクリティカル CSS をインライン化します
• 重要でない JavaScript の読み込みをすべて遅らせます
• システムフォントを使用します（ウェブフォントは使用しません）
• 積極的な遅延読み込みを行います（スクロール時＋バッファー）

3g（50～700 Kbps）の場合：（effectiveType: "3g"）

• 中解像度画像を配信します（品質：60～70）
• 動画の自動再生を無効にします
• プリフェッチは重要なものに限定します
• クリティカル CSS のみインライン化します
• 重要でない JavaScript の読み込みを遅らせます
• 重要なフォントを1～2種類プリロードします
• 標準的な遅延読み込みを行います

4g 以上（> 700 Kbps）の場合：（effectiveType: "4g"）

• 高解像度画像を配信します（品質：80～90）
• 動画の自動再生を許可します（ミュート）
• ナビゲーション向けに戦略的なプリフェッチを行います
• 標準的な CSS と JavaScript の読み込みを行います
• クリティカルフォントをプリロードします
• 標準的な遅延読み込みを行います

save-data モードの場合：（navigator.connection.saveData === true）

• 実際の接続タイプよりも悪いものとして扱い、接続タイプを上書きします
• 「高画質を読み込む」切り替えを表示します
• 自動再生を完全に無効にします
• 画像の数と品質を最小限に抑えます
• プリフェッチとプリロードを行いません（重要なものを除く）

接続タイプ別のパフォーマンス予算

接続品質に応じてパフォーマンス予算を調整します：

slow-2g / 2g：

• ページ全体の容量：< 500KB
• 画像：合計 < 200KB
• JavaScript：合計 < 100KB
• 動画なし

3g：

• ページ全体の容量：< 1.5MB
• 画像：合計 < 800KB
• JavaScript：合計 < 300KB
• 動画：< 3MB（重要な場合のみ）

4g 以上：

• ページ全体の容量：< 3MB
• 画像：合計 < 2MB
• JavaScript：合計 < 1MB
• 動画：< 10MB

ネットワーク情報 API の制限事項

API の制限事項と代替手段に注意してください。

API を利用できない場合：

• Safari は Network Information API をサポートしていません
• 代替手段：接続品質の指標として TTFB を使用します
• 代替手段：デバイスを判別します（モバイルの場合は低速と想定します）
• 代替手段：ユーザーが設定を切り替えられるようにします

API の値は推定値です：

• effectiveType は最近の観測結果に基づいています
• 値はセッション中に変化することがあります
• セッションが長時間続く場合は、定期的に再確認してください

プライバシーに関する考慮事項：

• プライバシー保護のため、一部のブラウザーでは精度が制限されます
• 値が丸められたり、上限が設定されたりする場合があります
• 判断を行う際は、ユーザーのプライバシーを考慮してください

参考資料

• references/snippets.md — 各スクリプトの説明としきい値
• references/schema.md — スクリプトの出力を解釈するための戻り値スキーマ