【実務・中級編】linkタグのrel=prefetch – HTML実践ガイド

「なんとなく」で終わらせない。`rel=”prefetch”` で実現する、ユーザーを待たせないための「先読み」戦略

フロントエンド開発の現場で、LighthouseのスコアやCore Web Vitalsを改善しようとすると、真っ先に「画像やJSの軽量化」に目が行きがちですよね。もちろんそれは正解です。しかし、中級以上のエンジニアが次に習得すべきは、「ユーザーが次に何をするかを予測し、先回りして準備する」という攻めの最適化です。

その強力な武器の一つが、今回解説する `` です。これ、単に「タグを貼れば速くなる魔法の杖」ではありません。ブラウザの裏側で何が起きているのかを理解した上で使いこなすと、UXは劇的に変わります。

—

1. `rel=”prefetch”` の本質を理解する

`rel=”prefetch”` は、ブラウザに対して「このリソースは、おそらく近い将来必要になるから、今のうちに低優先度でダウンロードしておいてね」と指示を出すヒントです。

最大の特徴は、その「低優先度」という点です。ブラウザは現在表示しているページのレンダリングや、ユーザーが今すぐ操作するために必要なリソース（Critical Resources）を最優先します。`prefetch` は、それらの処理がひと段落して、ネットワークが空いたタイミングを見計らってバックグラウンドで取得を行います。

preload との違いを明確にする

よく混同される `rel=”preload”` との決定的な違いは、「今すぐ必要か、将来必要か」です。

`preload`: 「現在のページを表示するのに不可欠（急げ！）」
`prefetch`: 「次のページで使うかもしれない（余裕があれば準備して）」

ここを履き違えると、本来必要なリソースの帯域を圧迫し、逆に初期表示を遅らせるという本末転倒な事態を招きます。

—

2. ブラウザは裏でどう処理しているのか

`prefetch` を指定すると、ブラウザは「暇な時間」を見つけてリクエストを送ります。取得されたリソースは、ブラウザのキャッシュ（HTTP Cache）に保存されます。

重要なのは、「キャッシュの有効期限（Cache-Controlヘッダー）」の影響を直接受けるという点です。もしサーバー側でキャッシュが禁止されていれば、いくら `prefetch` しても意味がありません。また、DNSの解決やTCP接続の確立も並行して行われるため、次にそのページへ遷移した瞬間、ネットワークの往復時間を大幅に短縮できるのです。

—

3. 実践：現場で使えるコードパターン

ただ闇雲にタグを並べるのはNGです。例えば、ユーザーが特定のCTAボタンにホバーしたタイミングで動的に注入する手法は、無駄なリクエストを減らす賢い戦略です。

基本的な書き方（静的実装）

まずは基本、`head` タグ内に記述するパターンです。

応用：JavaScriptによる動的な注入（推奨）

「ユーザーがリンクに触れた瞬間」をトリガーにすることで、帯域を無駄にせず、かつ遷移を爆速にするのがプロのやり方です。

特定のリンクをホバーした際にリソースをprefetchする関数
@param {string} url – 先読みしたいリソースのパス

/
function prefetchResource(url) {
// すでに存在するかチェック（重複リクエストを防ぐ）
if (document.querySelector(`link[href=”${url}”]`)) return;

const link = document.createElement(‘link’);
link.rel = ‘prefetch’;
link.href = url;
document.head.appendChild(link);

console.log(`[Optimization] Prefetching: ${url}`);
}

// リンク要素を取得してイベントを付与
const nextLink = document.querySelector(‘#go-to-next-page’);

// mouseover は頻繁に発火するため、実際には debounce を入れるのがベター
nextLink.addEventListener(‘mouseover’, () => {
prefetchResource(‘/path/to/next-page-bundle.js’);
}, { once: true }); // 一度だけ実行すれば十分

—

4. 現場で「やらかさない」ための注意点

最後に、シニアエンジニアとして一つだけ釘を刺しておきます。`prefetch` は万能ではありません。以下の点に注意してください。

1. 過度な使用は避ける: ページ内のあらゆるリンクに `prefetch` を仕込むと、ユーザーのデータ通信量を無駄に消費します。特にモバイル環境では迷惑になりかねません。
2. 優先順位を考える: 遷移率の高いページや、重い画像・JSに絞って適用してください。
3. サーバー側の設定を確認する: 前述の通り、Cache-Controlヘッダーが `no-store` になっているリソースを `prefetch` しても、ブラウザはキャッシュしてくれません。

まとめ：体験をデザインせよ

`prefetch` を使いこなすということは、単に技術的な設定をするだけでなく、「ユーザーが次にどこに行こうとしているか」を思考することです。

まずは、Google Analyticsなどで遷移率が高い導線を特定し、そこに一つだけ `prefetch` を仕込んでみてください。遷移先の読み込み速度が体感できるほど速くなったとき、きっと「技術でユーザー体験を変える」ことの面白さを実感できるはずです。

現場の泥臭い最適化こそが、プロダクトの品格を決めます。ぜひ、次のリリースで試してみてください。