バックグラウンド フェッチの優先度を下げる

ウェブ機能: Fetch priority Fetch

ページが複数のネットワーク リクエストを同時に実行すると、同じ帯域幅をめぐって競合が発生することがよくあります。分析、ロギング、バックグラウンド同期などの重要でないデータの優先度を下げて、ユーザーが開始したデータ取得や重要なデータ取得をより迅速に完了できるようにする必要があります。

導入方法

  1. バックグラウンド リクエストを特定する: どの fetch() 呼び出しが、直近のユーザー エクスペリエンスに影響しない、重要でないデータに対するものかを特定します。
  2. フェッチの優先度を適用する: fetch() 初期化オブジェクトに priority: 'low' オプションを追加します。

コード例

// Use high priority (default) for critical UI updates
const criticalData = await fetch('/api/data');

// Explicitly deprioritize background analytics
fetch('/api/analytics', {
  method: 'POST',
  body: JSON.stringify(eventData),
  // Lower the priority to prevent network contention
  priority: 'low'
});

ベスト プラクティス

  • 推奨事項: 現在のビューに必要のない分析、ビーコン、テレメトリー データには priority: 'low' を使用します。
  • 推奨: priority: 'low' を使用して、ユーザーが後で必要とする可能性のあるデータを「プリフェッチ」し、今必要なデータの処理が遅くならないようにします。
  • ユーザー エクスペリエンスに不可欠なフェッチには priority: 'low' を使用しないでください。
  • フェッチ オプション オブジェクトで、非推奨の importance キーを使用しないでください。正しいキーは priority です。

フォールバック戦略

Fetch API の priority オプションは、プログレッシブ エンハンスメントです。このオプションをサポートしていないブラウザは、このオプションを無視して、デフォルトの優先度でリクエストを処理します。基本的な使用方法では、明示的な機能検出やフォールバック ロジックは必要ありません。