こんにちは！Web制作やフロントエンドの世界へようこそ。
私たちが普段何気なく使っているWebブラウザ。アドレスバーにURLを打ち込んで「Enter」を押した瞬間、画面が一瞬でパッと表示されますよね。あのスムーズな体験、実は裏側でブラウザがものすごいスピードで「名推理」と「大忙しの作業」を繰り広げているおかげなんです。
今回は、そんなブラウザの裏側の動きをちょっとだけ先回りして手助けする、「リソースヒント（preload, prefetch, preconnect）」という強力な秘密道具についてお話しします。
「なんだか難しそうな英語の呪文が出てきたな……」なんて身構えなくて大丈夫ですよ！ 身近な例えを交えながら、ゆっくり優しく紐解いていきますね。
—
ブラウザの「お買い物」とリソースヒントの正体
まず、ブラウザがWebページを表示するプロセスを、「大きなお買い物の準備」に例えてみましょう。
あなたが休日に、おうちで盛大なパーティーを開こうとしています。
お部屋の飾り付けをして、ごちそうを並べる必要がありますよね。
1. まず、お部屋の設計図（HTML）をじっくり読んで、「ここにテーブルを置いて、あそこに飾りを付けるぞ」と把握します。
2. 設計図を読み進める中で、「あ、そうだ！ 肝心のケーキを取りに行かなきゃ」「あのお店まで買いに行こう」と気づきます。
3. お店に行ってケーキを買い、戻ってきてようやく並べられます。
お気づきでしょうか？
ブラウザもこれと全く同じことをやっています。HTMLを上から順番に読んでいき、途中で「あっ、このCSSファイルや画像が必要だ！」と気づいてから、慌ててネットワークを通じてダウンロードしに行くんです。
これだと、「気づくのが遅れたせいで、ダウンロード待ちの時間が発生し、画面の表示が遅れてしまう」というプチストレスが生まれます。
そこで登場するのがリソースヒントです。「ねえブラウザさん、これから絶対に必要になるから、今のうちにこっそり準備しておいて！」と、先回りして指示を出すための魔法の言葉なんですよ。
—
1. `preconnect` ＝ お店への「直通電話」をつなげておく
最初にご紹介するのは `preconnect`（プリコネクト）です。
身近な例え：お肉屋さんに電話で注文を入れておく
遠くにあるお肉屋さんでお肉を買うとき、わざわざお店に行ってから「注文いいですか？」と声をかけるよりも、あらかじめ電話をかけて「今からそっちに向かうから、回線を繋いだまま待ってて！」と伝えておいた方が、お店に着いてから秒速でお肉を受け取れますよね。
インターネットの世界でも同じです。
別のドメインにある画像やフォント（例えば Google Fonts など）を取りに行くとき、ブラウザは裏側で以下の手順を踏んでいます。
1. DNSルックアップ：お店の住所（IPアドレス）を調べる
2. TCPハンドシェイク：お店の扉をノックして挨拶する
3. TLSネゴシエーション：安全にやり取りするための合言葉（暗号化）を決める
この一連のやり取り（およそ数万〜数百ミリ秒かかります）を、ページが表示される前にこっそりと終わらせておくのが `preconnect` です。
HTMLでの書き方
「あ、このサイトは後であのサーバーと通信するんだな」とブラウザに教えてあげることで、通信の待ち時間をゴリゴリ削ることができます。
—
2. `preload` ＝ 今すぐ使う主役を「机の上」にスタンバイ
次は `preload`（プリロード）です。これは今回の主役級の機能です。
身近な例え：料理番組の「下ごしらえ済み食材」
料理番組の冒頭で、シェフが「あらかじめ切っておいたニンジンがこちらです！」とパッと取り出しますよね。あれと同じです。
ブラウザがHTMLを読み解く（パースする）とき、普通は「上から順番」に解析していくため、一番最初に読み込むHTMLの中に隠れている「超重要なCSS」や「一番目立つメインビジュアルの画像」を見つけるのが、ほんの少しだけ遅れることがあります。
「この画像は絶対に最初に画面に出るんだから、HTMLの解析が終わるのを待たずに、今すぐ最優先でダウンロードして！」とブラウザの尻を叩くのが `preload` です。
HTMLでの書き方
ここでポイントなのは、`as=”image”` や `as=”style”` のように、「これから何を読み込もうとしているのか」のジャンルをブラウザに教えてあげることです。これがないと、ブラウザが「えっと、優先すべきなのかな？」と迷ってしまうので、セットで覚えておいてくださいね。
—
3. `prefetch` ＝ 「次のお買い物」をこっそりカゴに入れておく
最後は `prefetch`（プリフェッチ）です。これは少し未来を見据えた、できる執事のような機能です。
身近な例え：スーパーのレジ打ちの裏で、次のカゴの準備をしておく
あなたが今、洋服屋さんでシャツを選んでいます。「このシャツを買ったら、次はきっとあのパンツも試着するだろうな」と店員さんが察して、あらかじめ試着室にパンツを用意しておいてくれるような状態です。
`prefetch` は、「現在のページではなく、ユーザーが次に移動しそうなページのリソース」を、暇な時間にこっそりバックグラウンドでダウンロードしておく機能です。
例えば、記事の一覧ページで「次のページ」や「人気の詳細記事」のリンクがある場合に使います。
HTMLでの書き方
ユーザーが実際にそのリンクをクリックした瞬間、すでに手元にデータ（キャッシュ）があるので、「えっ、瞬間移動した！？」と思うほどの爆速で次のページが表示されます。 初めて体験すると、ちょっと感動しますよ。
—
注意してほしい「落とし穴」：優しさの押し付けに気をつけよう
ここまで読んで、「すごい！ じゃあ全部のファイルに `preload` や `prefetch` をつけまくっちゃおう！」と思ったそこのあなた。
ちょっと待ってくださいね！ そこがつまずきやすいポイントなんです。
リソースヒントは、いわば「ブラウザへの過激な先回り命令」です。
もし、今本当に必要なわけでもないのに、あれもこれもと大量の `preload` を仕込んでしまうとどうなるでしょうか？
ブラウザの限られた通信のパワー（帯域）が、どうでもいいファイルのダウンロードで埋め尽くされてしまい、「本当に今すぐ必要なメインのファイル」が後回しにされてしまう本末転倒な現象が起きてしまいます。
- `preconnect`：よく使う外部ドメインに絞って、1〜2個程度に。
- `preload`：画面を開いて一番最初に見える（ファーストビュー）絶対に欠かせない主役にだけ。
- `prefetch`：次にユーザーが移動する確率が極めて高いページにだけ。
お薬と同じで、「適量を正しく使うこと」が一番大切です。
—
まとめ
今回は、Webブラウザの裏側の動きを加速させる「リソースヒント」についてお話ししました。
- `preconnect` ＝ 遠くのお店とあらかじめ電話をつないでおく（通信の準備）
- `preload` ＝ 今すぐ使う主役のアイテムを机の上に最優先でスタンバイ（当面の加速）
- `prefetch` ＝ 次に読むかもしれないページをこっそりカゴに入れておく（未来への先回り）
最初は難しく感じるかもしれませんが、ブラウザという「一生懸命だけどちょっとおっちょこちょいな相棒」に、そっとヒントを教えてあげる気持ちでコードを書いてみてください。
あなたの作ったWebサイトが、今日もどこかでシュッと軽やかに表示されることを、ブラウザと一緒に応援しています！
コメント