safari 17.2で有効になったfetchPriorityのおさらい
fetchPriorityの対応ブラウザについて
fetchPriorityは従来までChromiumベースのEdgeと、Chromeのみ対応されており、
対応後1年ほど他のブラウザではリリースされていませんでした。
safariの対応
safari 17.2でついにfetchPriorityが対応されました。
まだFirefoxで対応されていないので、モダンブラウザ全てで対応とは行きませんが、
日本では、90%以上のブラウザが対応したことになります。
fetchPriorityのおさらい
next/image でのfetchPriority
一般的なフロントエンドフレームワークにはfetchPriorityが組み込まれています。
ここでは、next.jsの一例を挙げておきます。
next.jsのnext/imageでは、priority={true}をpropsに渡すと、
fetchPriority='high'属性がついたpreloadタグが追加されます。
挙動の確認
上記のサイトを用意しました。
CDNでcloudflareを通しており、ブラウザとはh3通信を行うことができます。
https://priority-test.anpan-playground.com/body-image-tag
参考:
特に設定を入れてない場合、シーケンシャルにリクエストされリソースごとに定義されたデフォルトの優先度で
リソースを取得します。
例えば、image4は画像（最初の 5 つの画像 > 10,000 px2）を満たすため、
初期優先度は中ですが、ビューポート内に存在するので最終優先度は高になってます。
同様に、
image5は初期優先度:中,最終優先度が高。
image6は初期優先度:低,最終優先度が低。
になっています。
image5の優先度をfetchpriorityで強制的に高にすると、ダウンロードの完了までが明らかにimage3,image4よりも早くなっていることがわかります。
参考:
次に画像のように、image1 ~ image4の優先度をfetchPriorityで指定します。
fetchPriorityで指定した画像はビューポート内に存在していても優先度は高になりません。
また、image1 ~ image4の優先度を低にしたことで、image1よりもimage5の方が早くダウンロードが完了しています。
優先度制御はダウンロードの順番を保障するものではありませんので、
優先度が低に設定されていても、image2の方が早くダウンロードは完了しています。
ただそれでもimage5は相対的に一番高い優先度となるため、ネットワーク帯域が逼迫するような状況の際は有効です。
まとめ
fetchPriorityはNext.jsなどのフロントエンドフレームワークでも使われています。
ですが、単に優先度を高にしても優先度制御は相対的なものであるため、使うリソースを見極める必要があります。
また、ブラウザごとにデフォルトの優先度制御が行われており、fetchPriorityを利用するとデフォルトの優先度制御が外れてしまうため注意が必要です。
Discussion