【入門編】linkタグのrel=prefetch – HTML実践ガイド

Webサイトを見ているとき、「あ、このボタンを押すと次はあのページに行くんだな」と、なんとなく直感でわかるときってありますよね。

実はWebブラウザも、人間と同じように「次はここへ行くのかな？」と予測して、裏でこっそり準備を始めることができるんです。そのための魔法の呪文が、HTMLの `` です。

今回は、難しい技術用語は一旦横に置いて、この「先読み（プリフェッチ）」という技術がどんなに心強い味方なのか、お買い物の例え話で紐解いていきましょう。

—

例えば、あなたがカフェに行くと想像してください。

あなたはレジに並びながら、メニュー表を見て「次はアイスコーヒーを頼もうかな」と心の中で決めました。すると、店員さんがあなたの視線を察して、注文を確定する前に、あらかじめ冷蔵庫から氷入りのグラスをそっとカウンターの端に用意してくれたとしたらどうでしょう？

いざあなたが「アイスコーヒーください」と言った瞬間、コーヒーを注ぐだけで完成しますよね。これなら、待ち時間はほとんどありません。

この「注文される前に、裏で静かに準備しておくこと」こそが、`prefetch` の正体です。

—

Webサイトを表示するとき、ブラウザは「必要な画像やページを、言われた瞬間に取りに行く」という律儀な働き方をします。でも、ネットワークが混雑していたり、読み込むデータが重かったりすると、どうしても「読み込み中のぐるぐる」が表示されてしまいますよね。

`prefetch` を使ってあらかじめリソース（ページや画像）を読み込んでおけば、ユーザーが実際にリンクをクリックした瞬間、まるで最初からそこにあったかのように、パッとページが表示されるんです。

「低優先度」という言葉がポイントで、ブラウザが「今、通信が空いているから、暇なうちに準備しとこう！」と気を利かせて動いてくれるので、今のページの表示を邪魔することもありません。控えめで、優秀なアシスタントのような存在なんです。

—

使い方は驚くほどシンプルです。`` タグの中に、一行書き加えるだけ。

これだけで、ユーザーが次に移動しそうなページを先回りしてキャッシュ（一時保存）してくれます。

「どのページに貼ればいいかわからない…」と迷う必要はありません。まずは「ここをクリックする確率は高そうだな」と思う場所に、一つ試してみるだけでOKですよ。

—

「じゃあ、サイト内の全ページにこのコードを仕込めば爆速になるのでは？」と思うかもしれません。でも、ちょっと待ってくださいね。

お店で、まだ注文してもいないのに全部のメニューをテーブルに並べてしまったら、テーブルがパンパンになってしまいますよね。それと同じで、`prefetch` で大量のファイルを読み込ませすぎると、ユーザーの通信量を無駄に消費してしまいます。

あくまで「次に選ばれる可能性が高いもの」に絞って使うのが、スマートな使い方のコツです。

—

`prefetch` は、単なる技術的な設定ではありません。「ユーザーに少しでも待ち時間を感じさせたくない」という、制作者側の優しさそのものなんです。

まずは小さな一歩からで大丈夫です。自分のサイトの中で「ここをクリックしてくれたら嬉しいな」という場所に、この魔法の呪文を添えてみてください。あなたの工夫一つで、Webサイトの体験はぐっと心地よいものに変わるはずですよ！

もしコードを書いていて「本当に読み込んでいるのかな？」と不安になったら、ブラウザの「デベロッパーツール」を開いて「ネットワーク」タブを見てみてください。そこにファイルがこっそり並んでいれば、成功です。

少しずつ、一緒に「心地よいWebサイト」を作っていきましょうね！