fetchpriorityによるリソースロードの最適化

背景

プリロードを使用すると、ウェブページ全体の読み込みが完了する前に、主要なコンテンツを読み込むことができるため、ユーザーエクスペリエンスが向上し、待ち時間が短縮されます。ただし、場合によっては、プリロードされたリソースの優先度をさらに分類する必要があります。プリロードだけではリソースの優先順位付けを完全に制御できないため、fetchpriority属性が導入され、それを補完します。

目的

• リソースの取得優先度に影響を与える。
• プリロードされたリソースの読み込み順序を補完する。

優先度とは、ブラウザに対するリソースの相対的な重要度を示します。適切な優先順位付けにより、最適な読み込みが保証され、ウェブユーザーエクスペリエンスが向上します。

リソースの優先度

ブラウザがウェブページの解析を開始し、画像、JavaScript、CSS、その他のリソースをダウンロードするとき、各リソースにダウンロード優先度を表すfetchpriorityフラグを割り当てます。

リソースがダウンロードされる順序は、この優先度フラグによって異なり、これは複数の要因によって決定されます。

• CSS、フォント、スクリプト、画像、およびサードパーティリソースには、異なる優先度が割り当てられます。
• ドキュメント内のリソースの場所または順序が優先度に影響します。
• プリロードリソースヒントは、ブラウザがリソースをより迅速に発見するのに役立ち、ドキュメントの解析が完了する前にリソースをロードできるようにすることで、優先度に影響を与えます。
• スクリプトのasyncまたはdefer属性は、優先度の計算に影響を与えます。

ブラウザは、発見された順にリソースをダウンロードします。DevToolsのNetworkで割り当てられた優先度を確認できます。

ただし、リソースに割り当てられたデフォルトの優先度が、すべてのシナリオで常に最適であるとは限りません。

優先度ヒントを使用するタイミング

技術的なユースケース：

• 優先度のニーズが異なる複数のファーストビュー画像： イメージカルーセルでは、最初に表示される画像のみが最高の優先度を持つ必要があります。
• 最初に低い優先度としてマークされたビューポート内の画像： Chromeがレイアウト完了後に表示されていることを検出すると、自動的に優先度を上げて、読み込みが遅れる可能性があります。優先度ヒントを使用すると、より高い優先度でより早く読み込むことができます。
• asyncまたはdeferでマークされたスクリプト： これらのスクリプトには「低」優先度が割り当てられます。ただし、ユーザーエクスペリエンスにとって重要な特定のスクリプトでは、非同期読み込みを維持しながら、優先度を高める必要がある場合があります。
• CSSとフォント： ブラウザはデフォルトでCSSとフォントに高い優先度を割り当てますが、すべてが同じように重要なわけではありません。優先度ヒントは、重要度の低いリソースの優先度を下げるのに役立ちます。
• fetch()でリソースをフェッチする： ブラウザはデフォルトでfetch()リクエストに高い優先度を割り当てます。場合によっては、すべてのリクエストが高い優先度を持つべきではありません。バックグラウンドAPI呼び出しは低い優先度としてマークでき、インタラクティブAPI呼び出しは高い優先度としてマークできます。
• ネットワーク帯域幅が制限された環境： リソースが利用可能な帯域幅を競合する場合、優先順位付けのメリットが特に重要になります。

fetchpriority属性

fetchpriority属性は、次の3つの値を受け入れます。

• high: リソースが重要であると見なされ、ブラウザによって優先される必要があります。
• low: リソースの重要度が低く、優先度を下げる必要があります。
• auto: ブラウザは、デフォルトのロジックに基づいて優先度を決定します。

使用例：

<!-- このファーストビュー画像は重要ではないため、優先度を下げます -->
<img
  src="/images/in_viewport_but_not_important.svg"
  fetchpriority="low"
  alt="I'm an unimportant image!"
/>

<!-- リソースの早期フェッチを開始したいが、優先度を下げる -->
<link rel="preload" href="/js/script.js" as="script" fetchpriority="low" />

<script>
  fetch('https://example.com/', { priority: 'low' }).then((data) => {
    // 低優先度のフェッチをトリガーする
  });
</script>

<!-- このiframeのサードパーティコンテンツは、低い優先度でロードできます -->
<iframe src="https://example.com" width="600" height="400" fetchpriority="low"></iframe>

LCP画像の優先度を高める

たとえば、Google Flightsのウェブページでは、**Largest Contentful Paint（LCP）**スコアが低い主な原因の1つは、背景画像の読み込みが遅いことです。fetchpriority属性を使用して、読み込み優先度を上げることができます。

<img src="lcp-image.jpg" fetchpriority="high" />

優先度をhighに設定すると、LCPは2.6秒から1.9秒に向上します。

ファーストビュー画像の優先度を下げる

fetchpriority属性を使用して、カルーセル内の非表示画像など、重要度の低いファーストビュー画像の優先度を下げることができます。

<ul class="carousel">
  <img src="img/carousel-1.jpg" fetchpriority="high" />
  <img src="img/carousel-2.jpg" fetchpriority="low" />
  <img src="img/carousel-3.jpg" fetchpriority="low" />
  <img src="img/carousel-4.jpg" fetchpriority="low" />
</ul>

プリロードされたリソースの優先度を下げる

プリロードされたリソースが他の重要なリソースと競合しないようにするために、明示的に優先度を下げることができます。

<!-- 重要でないプリロードされたスクリプトのみに優先度を下げる -->
<link rel="preload" as="script" href="critical-script.js" />
<link rel="preload" href="/js/script.js" as="script" fetchpriority="low" />

<!-- 他のリソースをブロックせずにCSSをプリロードする -->
<link
  rel="preload"
  as="style"
  href="theme.css"
  fetchpriority="low"
  onload="this.rel='stylesheet'"
/>

スクリプトの優先度を調整する

ページに他のリソースをブロックしない重要なインタラクティブスクリプトが含まれている場合は、非同期でロードしながら、高い優先度としてマークできます。

<script src="async_but_important.js" async importance="high"></script>

スクリプトが特定のDOM要素に依存している場合は、asyncとしてマークできません。ただし、ファーストビューのレンダリングに不可欠ではない場合は、優先度を下げることができます。

<script src="blocking_but_unimportant.js" importance="low"></script>

フェッチの優先度を調整する

デフォルトでは、ブラウザは高い優先度でfetch()リクエストを実行します。重要でないデータリクエストの優先度を下げることができます。

// 重要な検証データ（デフォルトでは高い優先度）
let authenticate = await fetch('/user');

// 重要度の低いコンテンツデータ（低い優先度を推奨）
let suggestedContent = await fetch('/content/suggested', { priority: 'low' });

考慮事項

優先度ヒントは、特定のユースケースでパフォーマンスを向上させることができますが、留意すべき点がいくつかあります。

• fetchpriority属性はヒントであり、指示ではありません。 ブラウザは開発者の設定を尊重しようとしますが、内部の優先順位付けロジックに基づいて上書きする場合があります。

• 優先度ヒントとプリロードを混同しないでください。 それらは異なる目的を果たします。

  • プリロードはリソースのフェッチを強制しますが、優先度ヒントは単なる提案です。
  • プリロードは観察および測定が容易です。

• 優先度ヒントは、優先度レベルをより細かく制御することでプリロードを補完します。 LCP画像がページの上部にプリロードされている場合、high優先度ヒントは大きなメリットをもたらさない可能性があります。ただし、プリロードが重要度の低いリソースの後に発生する場合、high優先度ヒントはLCPを改善できます。重要なCSS背景画像の場合は、fetchpriority="high"を使用します。

• CDNはHTTP/2優先順位付けの統一された実装を持っていません。

ブラウザが優先度ヒントを伝えても、CDNが要求された優先順位を尊重しない場合があります。

追加の注記

importance属性

importance優先度ヒントは、2018年にChromeで実験的な機能として最初に導入され、2021年に再検討されました。ウェブ標準プロセスの一環として、その後置き換えられました。

• HTMLでは、属性の名前がfetchpriorityに変更されました。
• JavaScriptでは、priorityオプションに置き換えられました。

---

Leapcellは、バックエンドプロジェクトのホスティングに最適な選択肢です。

Leapcellは、ウェブホスティング、非同期タスク、およびRedis向けの次世代サーバーレスプラットフォームです。

多言語サポート

• Node.js、Python、Go、またはRustで開発します。

無制限のプロジェクトを無料でデプロイ

• 使用量に対してのみ支払い - リクエストなし、料金なし。

比類のないコスト効率

• アイドル料金なしの従量課金制。
• 例：$25で6.94Mリクエストを60msの平均応答時間でサポートします。

合理化された開発者エクスペリエンス

• 簡単なセットアップのための直感的なUI。
• 完全に自動化されたCI/CDパイプラインとGitOps統合。
• 実行可能な洞察のためのリアルタイムメトリックとロギング。

簡単なスケーラビリティと高性能

• 簡単な同時実行を処理するための自動スケーリング。
• 運用上のオーバーヘッドはゼロ - 構築に集中するだけです。

ドキュメントで詳細をご覧ください!

Xでフォローしてください：@LeapcellHQ