こんにちは、ユアサです。
今回は画像の取得優先度を調整できるプロパティfetchpriorityについてまとめていきます。
（linkやscriptなどにも付与できますが、今回は画像における効果についてまとめます）
プロパティについて
fetchpriority属性はHTMLのimg要素に付与できるプロパティで、取得する画像の優先度を指定することができます。ファーストビューなど、ページの初回読み込み時に表示させておきたい画像がある場合には積極的に付与しておきたいプロパティです。
使い方はimg要素にfetchpriority =""という具合に記述することで指定でき、指定できる値はhigh low autoの3種類となっています。文字通りそれぞれhighは高優先度、lowは低優先度、autoが初期値となります。
では次のセクションで実際に使用していきます。
使ってみる
実際に使ってみる前に、まずfetchpriorityを付与する前の状態を把握します。
See the Pen fetchpriority-before by felly (@felly00505) on CodePen.
上記のように画像を3枚並べました。今度は検証ツールからこれらの画像について確認してみます。
少々見づらいですが、赤枠で囲われている行が用意した画像です。並び順は上から取得の優先度が高い順になっています。
今回用意した画像3枚だけで見ると、上から犬、灯台、雪山の画像の順で取得されているのが確認できますね。
ではもう一度ページを読み込み直してみます。
ページを再度読み込み直した後の画像の取得順を見てみます。
今度は上から灯台、雪山、犬の順になりました。このように、ただimg要素で画像を置いただけでは取得される画像の優先度が毎回不安定です。
では今度は犬の画像を優先して取得させてみます。犬の画像が読み込まれるimg要素にfetchpriority ="high"を付与します。
See the Pen fetchpriority-after by felly (@felly00505) on CodePen.
犬の画像だけにfetchpriority ="high"を付与したので、他2枚の画像との優先度を比べてみます。
犬の画像が他2枚よりも優先度が高いです。何度かページを読み込み直しても犬の画像が3枚の中で最も優先度が高くなっていたのでうまく指定できているようです。
ではこの条件にさらにプラスで、灯台の画像の優先度を低くしてみます。 灯台の画像が読み込まれるimg要素にfetchpriority ="low"を付与します。
See the Pen fetchpriority_after1.5 by felly (@felly00505) on CodePen.
今度は灯台の画像にfetchpriority ="low"を付与したので、再度他2枚の画像との優先度を比べてみます。
今まで画像3枚とも優先度が「高」でしたが、今度は灯台の画像だけ明確に「低」に変化しました。これで今回用意した画像の取得優先順を犬＞雪山＞灯台とすることができました。
まとめ
ダイナミックなファーストビューを実装する関係で大きな画像を使用する場合でもfetchpriority ="high"と指定することで、低速でもとりあえずファーストビューを優先して取得させる・・・といったように、SEOの観点でも何気に大切になってくるプロパティの紹介でした。
これ以外にもloading="lazy"などと併用することで同時にページの読み込み速度にも貢献できるようになると思うので、画像を多く使うページではなるべく積極的に指定していきたいですね。
