スクリプトの優先度を最適化する

ウェブ機能: フェッチの優先度

ブラウザは、スクリプトがドキュメント内のどこに表示されるか、async や defer などの属性があるかどうかに基づいて、スクリプトにデフォルトの優先度を割り当てます。fetchpriority を使用すると、デベロッパーは重要なスクリプトを最初に読み込み、重要でないスクリプトは邪魔にならないように明示的に制御できます。

導入方法

  1. 重要なスクリプトを特定する: ページのコア機能や最初のユーザー操作に不可欠なスクリプトを特定します。
  2. 重要な非同期スクリプトを優先する: async または defer で読み込まれる重要なスクリプトに fetchpriority="high" 属性を追加して、検出フェーズで優先されるようにします。
  3. 重要でないスクリプトの優先度を下げる: すぐに必要でないスクリプト（アナリティクス、広告、スクロールしなければ見えない位置のウィジェットなど）には fetchpriority="low" を追加し、async、defer、module 属性を付与して、ブロッキングを回避します。
  4. パーサーをブロックするスクリプトを順序付ける: 本文の末尾にあるパーサーをブロックするスクリプトで fetchpriority="low" を使用して、より重要なリソースと帯域幅を競合しないようにします。

コード例

<!-- Elevate the priority of the critical app logic -->
<script src="/js/app.js" async fetchpriority="high"></script>

<!-- Deprioritize non-essential tracking scripts -->
<script src="/js/tracker.js" async fetchpriority="low"></script>

<!-- Deprioritize late-body scripts to favor critical images or CSS -->
<script src="/js/legacy-widgets.js" fetchpriority="low"></script>

ベスト プラクティス

  • 必須: ネットワークの競合を回避し、優先度の向上を希薄化しないように、fetchpriority="high" は最大 1 ～ 2 個の重要なスクリプトにのみ使用してください。
  • 推奨: fetchpriority="high" は、Interaction to Next Paint（INP）にとって重要であることがわかっている async スクリプトにのみ使用します。
  • fetchpriority="low" を使用して、最初のユーザー エクスペリエンスに必要のないスクリプトの優先度を下げる。
  • すべてのスクリプトタグで fetchpriority を使用しないでください。これは、ブラウザのデフォルトのヒューリスティックが最適でないことがわかっている場合に、それを変更するためにのみ使用してください。
  • 非推奨の importance 属性は使用しないでください。これは fetchpriority に置き換えられました。

フォールバック戦略

fetchpriority 属性はプログレッシブ エンハンスメントです。この属性をサポートしていないブラウザは、属性を無視し、内部のスケジューリング ロジックをエラーなしで使用します。基本的な使用方法では、明示的な機能検出やフォールバック ロジックは必要ありません。