webperf-media

WebPerf：メディアパフォーマンス

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

スクリプトの実行

1. mcp__chrome-devtools__evaluate_script でスクリプトを実行し、返されたオブジェクトを読み取ります。スクリプトはコンソールに出力しないため、返されたオブジェクトが結果です。references/schema.md の説明にあるように、script、status、およびメトリクスデータ（value、rating、details、items、issues）が含まれます。
2. status が "tracking" の場合、スクリプトはページの監視を続けます。操作の後、getDataFn で指定された関数（例：getINP()）を、別の mcp__chrome-devtools__evaluate_script 呼び出しで実行し、返されたオブジェクトを読み取ります。
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/Image-Element-Audit.js — 画像要素の監査
• scripts/Oversized-Images.js — 画像のサイズ超過
• scripts/SVG-Embedded-Bitmap-Analysis.js — SVG に埋め込まれたビットマップの分析
• scripts/Video-Element-Audit.js — 動画要素の監査

よくあるワークフロー

メディアの包括的な監査

ユーザーがメディアの最適化、または「画像と動画を監査して」と依頼した場合：

1. Image-Element-Audit.js - すべての画像を分析します（形式、遅延読み込み、サイズ設定、fetchpriority）
2. Video-Element-Audit.js - すべての動画を分析します（ポスター、プリロード、形式、自動再生）
3. SVG-Embedded-Bitmap-Analysis.js - SVG に埋め込まれた非効率なビットマップ画像を検出します

画像の最適化ワークフロー

ユーザーが「画像を最適化して」または「画像のパフォーマンスを確認して」と依頼した場合：

1. Image-Element-Audit.js - 画像の包括的な監査
2. webperf-loading スキルと照合します：
   • Find-Above-The-Fold-Lazy-Loaded-Images.js（誤って遅延読み込みされている画像）
   • Find-non-Lazy-Loaded-Images-outside-of-the-viewport.js（遅延読み込みが設定されていない画像）
   • Find-Images-With-Lazy-and-Fetchpriority.js（矛盾する属性）
   • Priority-Hints-Audit.js（LCP 画像には fetchpriority="high" を設定する必要があります）

画像サイズ超過の監査

ユーザーが、必要以上に大きい画像、無駄なバイト数、ぼやけた画像、または srcset／sizes の問題について尋ねた場合：

1. Oversized-Images.js - 各画像ファイルと描画されるピクセル数を比較します（サイズ超過とサイズ不足）
2. Image-Element-Audit.js - 指摘された画像の形式、遅延読み込み、srcset の使用状況を確認します
3. webperf-core-web-vitals スキルと照合します：
   • LCP.js（サイズ超過の画像が LCP 要素かどうかを確認します）

動画パフォーマンスの監査

ユーザーが「動画を最適化して」または「動画のパフォーマンスを確認して」と依頼した場合：

1. Video-Element-Audit.js - 動画の包括的な監査
2. webperf-core-web-vitals スキルと照合します：
   • LCP-Video-Candidate.js（動画／ポスターが LCP かどうかを確認します）
3. webperf-loading スキルと照合します：
   • Priority-Hints-Audit.js（動画ポスターの優先度）
   • Resource-Hints-Validation.js（動画のプリロード）

LCP 画像の調査

LCP が画像であり、最適化が必要な場合：

1. webperf-core-web-vitals スキルと照合します：
   • LCP.js（LCP を測定します）
   • LCP-Image-Entropy.js（画像の複雑さを分析します）
2. Image-Element-Audit.js - 形式、寸法、遅延読み込みを確認します
3. webperf-loading スキルと照合します：
   • Find-Above-The-Fold-Lazy-Loaded-Images.js（遅延読み込みにしてはいけません）
   • Priority-Hints-Audit.js（fetchpriority="high" を設定する必要があります）
   • Resource-Hints-Validation.js（プリロードを検討します）

画像によるレイアウトシフト

寸法が指定されていない画像がCLSの原因である場合：

1. Image-Element-Audit.js - width/height 属性が不足していないか確認します
2. webperf-core-web-vitals スキルと相互参照します：
   • CLS.js（CLS全体を測定します）
3. webperf-interaction スキルと相互参照します：
   • Layout-Shift-Loading-and-Interaction.js（シフトが発生するタイミングを確認します）

SVG最適化監査

ユーザーがSVGのパフォーマンスについて尋ねた場合、またはファイルサイズが大きい場合：

1. SVG-Embedded-Bitmap-Analysis.js - ベクターSVGに埋め込まれたラスター画像を検出します
2. ビットマップが埋め込まれていないSVGにはSVGOによる最適化を推奨します
3. ビットマップを適切な形式の別個の画像ファイルに抽出することを推奨します

判断ツリー

この判断ツリーを使用して、結果に応じたフォローアップ用スニペットを自動的に実行します：

Image-Element-Audit.js の実行後

• 画像に width/height 属性がない場合 → レイアウトシフトのリスクがあるため、次を実行します：

  1. webperf-core-web-vitals:CLS.js（CLSへの影響を測定します）
  2. webperf-interaction:Layout-Shift-Loading-and-Interaction.js（シフトのタイミングを確認します）
  3. すべての画像に明示的な寸法を追加することを推奨します

• 画像の形式が不適切な場合（グラフィックにJPEG、写真にPNG） → 次を推奨します：

  • 最新の形式：WebP、AVIF
  • コンテンツの種類に適した形式
  • 形式に応じた圧縮設定

• 画像が表示サイズより大幅に大きい場合 → 次を推奨します：

  • srcset を使用したレスポンシブ画像
  • 画像CDNでの適切なサイズ指定
  • ビューポートごとに複数のサイズを指定した srcset

• ファーストビューの画像が遅延読み込みされている場合 → 次を実行します：

  1. webperf-loading:Find-Above-The-Fold-Lazy-Loaded-Images.js（確認）
  2. webperf-core-web-vitals:LCP.js（LCPへの影響を測定します）
  3. ファーストビューの画像から loading="lazy" を削除することを推奨します

• LCP画像に fetchpriority="high" が指定されていない場合 → 次を実行します：

  1. webperf-core-web-vitals:LCP.js（現在のLCPを測定します）
  2. webperf-loading:Priority-Hints-Audit.js（優先度を全面的に監査します）
  3. LCP画像に fetchpriority="high" を追加することを推奨します

• ファーストビューより下の画像が遅延読み込みされていない場合 → 次を実行します：

  1. webperf-loading:Find-non-Lazy-Loaded-Images-outside-of-the-viewport.js（確認）
  2. 画面外の画像に loading="lazy" を追加することを推奨します

• 画像に loading="lazy" と fetchpriority="high" の両方が指定されている場合 → 次を実行します：

  1. webperf-loading:Find-Images-With-Lazy-and-Fetchpriority.js（矛盾を確認します）
  2. 競合する属性のどちらかを削除することを推奨します

• 画像が重要なリソースと競合している場合 → 次を実行します：

  1. webperf-loading:Find-render-blocking-resources.js（リソースの優先度の競合）
  2. webperf-loading:TTFB-Resources.js（速度の遅い画像CDNを特定します）

• 画像にaltテキストがない場合 → アクセシビリティ上の問題です。説明的なaltテキストの追加を推奨します

Oversized-Images.js の実行後

• サイズの大きすぎる画像が見つかった場合 → 次を推奨します：

  • 複数の幅を指定した srcset と、正確な sizes 属性
  • ビルド時または画像CDNでのサイズ変更
  • 同じ画像の形式と遅延読み込みを確認するため、Image-Element-Audit.js を実行します

• サイズの大きすぎる画像がLCP要素である場合 → webperf-core-web-vitals:LCP.js と LCP-Subparts.js を実行します（ファイルサイズが大きいとリソースの読み込み時間が長くなります）

• サイズが小さすぎる（ぼやけた）画像が見つかった場合 → 必要なピクセル数を満たすソースと、高密度画面向けの 2x 候補を推奨します

• スキップされた画像が遅延読み込みされている場合 → ページの末尾までスクロールしてから、スニペットを再度実行します

Video-Element-Audit.js の実行後

• 動画が LCP 候補の場合 → 次を実行します。

  1. webperf-core-web-vitals:LCP-Video-Candidate.js（確認）
  2. webperf-core-web-vitals:LCP.js（LCP の測定）
  3. webperf-core-web-vitals:LCP-Subparts.js（タイミングの内訳を確認）
  4. 動画のポスター画像を最適化するか、画像への置き換えを検討します

• 動画にポスターがない場合 → 次を推奨します。

  • 体感パフォーマンスを向上させるため、ポスター画像を追加する
  • 最初のフレームまたはカスタムサムネイルを使用する
  • 画像と同じ方法でポスターを最適化する

• 動画で preload="auto" が使われている場合 → 帯域幅への影響を考慮し、次を評価します。

  • 動画はファーストビューにありますか？その場合は preload="auto" を維持します
  • 動画はファーストビューより下にありますか？その場合は preload="metadata" または "none" に変更します
  • 自動再生を意図していますか？その意図に preload が合っていることを確認します

• ミュートされていない自動再生動画の場合 → ブラウザーによってブロックされるため、次を推奨します。

  • muted 属性を追加する
  • または autoplay を削除する

• 動画に複数の形式がない場合 → 次を推奨します。

  • Chrome/Firefox 向けに WebM を使用する
  • Safari 向けのフォールバックとして MP4 を使用する
  • 効率の良い順にソースを並べる（WebM を先頭にする）

• 動画ファイルが大きい場合（>5MB） → 次を推奨します。

  • 圧縮／トランスコード
  • アダプティブビットレートストリーミング（HLS、DASH）
  • 読み込み方法の最適化

SVG-Embedded-Bitmap-Analysis.js の実行後

• SVG 内にビットマップ画像が見つかった場合 → 次を推奨します。

  1. ビットマップを個別のファイルに抽出する
  2. 抽出した画像には WebP/AVIF 形式を使用する
  3. SVG から 要素で画像を参照する
  4. または可能であれば、純粋なベクター形式に変換する

• 埋め込みビットマップが大きい場合（>100KB） → 重大な非効率です。

  • SVG の解析オーバーヘッドと大きなビットマップが重なり、どちらの欠点も生じます
  • 速やかに抽出を推奨します

• SVG 内に小さなビットマップが複数ある場合 → 次を検討します。

  • 小さなアイコンには CSS スプライトを使用する
  • 再利用可能なグラフィックには SVG シンボルを使用する
  • 個別の最適化済み画像に抽出する

パフォーマンス予算のしきい値

次のしきい値に基づいて推奨事項を提示します。

画像ファイルのサイズ：

• 警告：個々の画像が 500KB 超 → 形式と圧縮を確認します
• 重大：個々の画像が 1MB 超 → 早急な最適化が必要です
• 画像の合計：初回読み込み時に 5MB 超 → 遅延読み込みを導入します

画像形式：

• グラフィック／アイコンに JPEG を使用 → PNG または SVG を推奨します
• 写真に PNG を使用 → JPEG、WebP、または AVIF を推奨します
• アニメーションに GIF を使用 → 動画（MP4/WebM）またはアニメーション WebP を推奨します
• 最新の形式（WebP/AVIF）を使用していない → 切り替えを推奨します

画像の寸法：

• 元のサイズが表示サイズの 2 倍超 → レスポンシブ画像を推奨します
• 元のサイズが表示サイズ未満 → 拡大するとぼやけるため、より大きなソース画像を用意します

動画ファイルのサイズ：

• 警告：動画が 10MB 超 → 圧縮またはストリーミングを検討します
• 重大：動画が 50MB 超 → 早急な最適化またはストリーミングが必要です

遅延読み込み：

• ファーストビューの画像を遅延読み込みしている → LCP に重大な影響があるため、直ちに修正します
• ファーストビューより下の画像を遅延読み込みしていない → 帯域幅の無駄になるため、遅延読み込みを導入します
• 10 枚を超える画像を先行読み込みしている → 過剰なため、遅延読み込みを導入します

優先度ヒント：

• LCP 画像に fetchpriority="high" がない → LCP を 10～30% 改善するため、追加します
• LCP 以外の画像に fetchpriority="high" が設定されている → ブラウザーのヒントを無駄にするため、削除します
• 遅延読み込みと fetchpriority="high" が競合している → 矛盾を解消します

参考資料

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