ページを開いたとき、ファーストビューのメイン画像だけがなかなか表示されず、ほかの小さな画像やファイルが先に読み込まれてしまうことがあります。ブラウザが決めた読み込みの順番を調整したいときに使えるのが、fetchpriority属性です。
fetchpriority属性とは
fetchpriority属性は、画像やスクリプトなどのリソースをどのくらい優先して読み込んでほしいかを、ブラウザに伝えるためのHTML属性です。
<img src="hero.jpg" alt="メインビジュアル" fetchpriority="high">ブラウザはページを表示するとき、HTMLやCSS、画像、スクリプトなどのファイルに自動で優先度をつけて、順番に読み込んでいます。
ブラウザはそのページでどの画像がいちばん大事なのかまでは分かりません。なので、こちらが一番最初に表示してほしいファーストビューの画像が後回しにされることもあります。
そこで、fetchpriority属性で先に読み込んでほしいもの、後でいいものを明示することで、優先度を調整できます。
指定できる値
fetchpriority属性に指定できる値は次の3つです。
| 値 | 意味 |
|---|---|
high | 同じ種類のリソースより優先して読み込む |
low | 同じ種類のリソースより後回しにして読み込む |
auto | ブラウザにまかせる(初期値) |
何も指定しない場合や、決められた値以外を書いた場合は auto として扱われます。
high や low は、ブラウザがもともとつけている優先度を基準に、「それより上げてほしい」「それより下げてほしい」と伝えるものです。
fetchpriority属性を使える要素
fetchpriority属性は、次の3つの要素に指定できます。
<img><link>(rel="preload"など)<script>
<img src="hero.jpg" alt="" fetchpriority="high">
<link rel="preload" href="/js/script.js" as="script" fetchpriority="low">
<script src="important.js" async fetchpriority="high"></script>JavaScriptの fetch() でデータを取得するときも、priority というオプションで同じように優先度を指定できます。
fetch('/api/suggested', { priority: 'low' });ブラウザがつけている読み込みの優先度
ブラウザがもともとどんな優先度をつけているかを押さえておくと、どこに指定すればよいかがわかりやすくなります。Chromeの場合、おおまかには次のようになっています。
| 優先度 | 主なリソース |
|---|---|
| 最も高い | HTML本体、<head>内のCSS、フォント |
| 高い | <head>内のスクリプト、画面内に表示される画像(レイアウトが決まった後) |
| 中くらい | ページの最初のほうにある大きな画像(5枚まで) |
| 低い | async・defer付きのスクリプト、通常の画像 |
| 最も低い | 表示条件に合わないCSS(メディアクエリが合わないものなど)、プリフェッチ |
出典：Fetch Priority API でリソースの読み込みを最適化する(web.dev)
ポイントは、画像は最初「低い」か「中くらい」の優先度で読み込みが始まるという点です。ブラウザはページのレイアウトが決まってから、画面内に表示される画像の優先度を引き上げます。ファーストビューのメイン画像であっても、最初のうちはほかのファイルと同じように順番待ちをしていることになります。
fetchpriority=”high”を指定しておくと、レイアウトが決まるのを待たずに、最初から高い優先度で読み込んでもらえます。
実際にどの優先度で読み込まれているかは、Chromeのデベロッパーツールで確認できます。「ネットワーク」タブの列の見出しを右クリックして「優先度」にチェックを入れると、ファイルごとの優先度が表示されます。
fetchpriority属性の使いどころ
ファーストビューのメイン画像の優先度を上げる
いちばん効果が出やすいのが、ファーストビューに表示されるメイン画像(ヒーロー画像やアイキャッチ画像)にhighを指定する使い方です。
ファーストビューで最も大きく表示される画像は、LCP（ページのメインのコンテンツが表示されるまでの時間）の対象になることが多く、この画像の読み込みが速くなるとLCPの改善につながります。web.devでは、Google フライトのトップページでメイン画像に fetchpriority="high" を指定したところ、LCPが2.6秒から1.9秒に短縮された例が紹介されています。
PageSpeed Insightsで診断したときに「LCP リクエストの検出」の項目に「fetchpriority=high を適用する必要があります」と表示されていたら、LCPの対象になっている画像にfetchpriority属性が付いていないという意味です。
カルーセルの2枚目以降の優先度を下げる
スライダーやカルーセルのように、画面内に並んでいるとブラウザはどの画像も同じように扱うので、見えていない画像の読み込みが1枚目の邪魔をしてしまうことがあります。
最初は1枚目しか見えない画像が並んでいる場合は、2枚目以降にlowを指定しておくと、1枚目の画像の読み込みに回線を使いやすくなります。
<ul class="carousel">
<li><img src="slide-1.jpg" alt="" fetchpriority="high"></li>
<li><img src="slide-2.jpg" alt="" fetchpriority="low"></li>
<li><img src="slide-3.jpg" alt="" fetchpriority="low"></li>
</ul>CSSの背景画像はpreloadと組み合わせる
メイン画像をCSSのbackground-imageで表示している場合、HTMLに<img>がないのでfetchpriority属性を付ける場所がありません。また、CSSの背景画像はCSSファイルを読み込んで解析するまでブラウザに見つけてもらえないので、読み込みが始まるのが遅くなりやすいです。
この場合は、<head> 内に <link rel="preload"> を書いてブラウザに早めに画像の存在を知らせ、あわせてfetchpriority属性で優先度を上げます。
<head>
<link rel="preload" href="hero.jpg" as="image" fetchpriority="high">
</head>スクリプトの優先度を調整する
asyncを付けたスクリプトは、ブラウザからは優先度の低いファイルとして扱われます。ボタンの動作など、ページを操作するのに欠かせない処理をasyncで読み込んでいる場合は、highを指定すると早めに読み込んでもらえます。
<script src="main.js" async fetchpriority="high"></script>反対に、すぐには使わない機能のスクリプトをpreloadで先読みしている場合は、lowを指定してほかのファイルの読み込みを邪魔しないようにできます。
<link rel="preload" href="/js/modal.js" as="script" fetchpriority="low">fetch()で取得するデータの優先度を下げる
JavaScriptのfetch()は、初期状態では優先度の高い通信として扱われます。「おすすめ記事」の一覧など、後から表示されれば十分なデータはpriority: 'low'を指定しておくと、ほかの重要な通信を先に済ませてもらえます。
// ログイン情報など、すぐに必要なデータ(初期状態で優先度が高い)
const user = await fetch('/api/user');
// 後から表示すれば十分なデータ
const suggested = await fetch('/api/suggested', { priority: 'low' });loading属性やpreloadとの違い
fetchpriority属性と似た目的で使われるものに、loading属性と<link rel="preload">があります。それぞれ役割が違うので、組み合わせて使います。
| 役割 | |
|---|---|
loading="lazy" | 画面に近づくまで画像の読み込みを始めない |
loading="eager" | 画面の外にあってもすぐに読み込みを始める(初期値) |
<link rel="preload"> | HTMLを読み進める前に、ファイルの存在をブラウザに知らせて早めに読み込ませる |
fetchpriority | 読み込みが始まったファイルの中での優先度を上げ下げする |
loading=”lazy”との使い分け
loading="lazy"は、画面の下のほうにあってすぐには見えない画像の読み込みを遅らせるための属性です。
loading="lazy"は「画面に近づくまで読み込みを始めない」、fetchpriority="low"は「読み込みは始めるが順番を後ろにする」という違いがあります。
気をつけたいのは、ファーストビューのメイン画像にloading="lazy"を付けてしまうことです。遅延読み込みにするとレイアウトが決まるまで読み込みが始まらないので、LCPが遅くなってしまいます。fetchpriority="high"とloading="lazy"を同じ画像に付けるのは、アクセルとブレーキを同時に踏むようなものなので避けましょう。
loading=”eager”との違い
loading属性には、eagerという値もあります。eagerは「画面の外にあっても、すぐに読み込みを始める」という指定で、loading属性を何も書かないときと同じ動きです。
名前から「優先して読み込む」ように見えますが、eagerは読み込みを始めるタイミングを遅らせないというだけで、優先度は上がりません。読み込みの順番を前にしたいときは、fetchpriority="high"を使います。
そのため、ファーストビューのメイン画像にloading="lazy"が付いていなければ、eagerをわざわざ書く必要はありません。テーマやプラグインが自動でloading="lazy"を付けてしまう画像に対して、遅延読み込みを打ち消すためにeagerを指定する、という使い方になります。
preloadとの違い
<link rel="preload">は、HTMLを読み込んだだけでは見つけられないファイル（CSSの背景画像やフォントなど）を、早めに見つけてもらうためのものです。preloadしたファイルは、そのファイルの種類に応じた通常の優先度で読み込まれます。
一方のfetchpriority属性は、ファイルを見つけてもらうタイミングは変えず、優先度だけを上げ下げします。「早く見つけてもらう」のがpreload、「見つけたファイルの順番を調整する」のがfetchpriority属性です。
<img>で表示している画像はブラウザがすぐに見つけられるので、preloadを追加しなくても、fetchpriority=”high”だけで十分なことがほとんどです。
fetchpriority属性を使うときの注意点
まず、fetchpriority属性はブラウザへの「ヒント」であることは知っておきたいポイントです。指定したとおりに読み込まれることが保証されているわけではありません。
ブラウザはほかのファイルの状況なども見ながら、最終的な順番を決めます。
highを付けすぎない
あちこちにhighを付けると、優先度の高いファイル同士で回線を取り合うことになり、結局どれも速くなりません。highはファーストビューのメイン画像など、本当に先に読み込みたい1〜2個にしぼって使いましょう。
効果が出るかどうかは環境によって変わる
fetchpriority属性の効果が出やすいのは、回線が遅く、多くのファイルが同時に読み込まれて回線が混み合っている場面です。画像が少ないページや、通信速度が十分に速い環境では、目に見える差が出ないこともあります。
指定した後は、デベロッパーツールで優先度が変わっているかを確認し、PageSpeed InsightsなどでLCPの数値が改善しているかをチェックしてみましょう。
WordPressでは自動で付与されることもある
WordPress 6.3からは、ファーストビューに表示されそうな画像に、WordPressが自動でfetchpriority="high"を付けるようになりました。対象になるのは、ページの最初のほうにあって、ある程度の大きさ（幅×高さが50,000ピクセル以上。300×200pxなら対象、200×200pxなら対象外）がある画像です。fetchpriority="high"が付いた画像には、loading="lazy"は付かないようになっています。
出典：Image performance enhancements in WordPress 6.3(Make WordPress Core)
ただ、WordPressが判断するのはあくまでHTMLの中での画像の位置や大きさなので、実際にLCPの対象になっている画像とずれることがあります。ページのソースを表示して、どの画像にfetchpriority="high"が付いているかを確認しておきましょう。
テーマのテンプレートで出力しているアイキャッチ画像などに自分で指定する場合は、画像を出力する関数の引数で属性を渡せます。自分で指定した属性は、WordPressの自動付与で上書きされることはありません。
<?php
the_post_thumbnail( 'large', array(
'fetchpriority' => 'high',
) );
?>カテゴリー : HTML-CSS
