preload・prefetchとは？先読みでページを速くする仕組み

先読み（リソースヒント）とは

ブラウザは通常、HTMLを読みながら必要なファイルを順番に見つけて取得します。このとき、重要なファイルを早めに取りに行かせたり、次に必要になりそうなファイルを前もって取っておいたりする指示を「リソースヒント」と呼びます。

linkタグのrel属性で種類を指定します。代表的なのがpreloadとprefetchで、どちらも「先読み」ですがブラウザに伝える意味が異なります。

うまく使えば待ち時間を減らせますが、使いすぎると重要なリソースの取得を逆に妨げることもあるため、目的を絞って使うのがコツです。

preloadとは

preloadは「このリソースは今のページで確実に、しかも早めに必要だから優先的に取得して」という指示です。優先度が高く、ブラウザはすぐに取りに行きます。

代表的な用途は、ファーストビューに出るヒーロー画像、重要なWebフォント、初回描画に必要なCSSなどです。HTMLの記述順で発見が遅れるリソースを、早い段階で取得させたいときに効きます。

ただし優先度が高いぶん、本当に重要なものだけに絞らないと、他のリソースの取得を後回しにしてしまい逆効果になります。

実務ではどこで関係する？

preloadは言葉の意味だけ覚えても、HTML共有の判断にはつながりません。実務では「表示に関係する話か」「検索に関係する話か」「アクセス制限に関係する話か」を分けて考えると整理しやすくなります。

preload・prefetchについて迷ったら、相手が安全に開けるか、検索に出してよいか、ブラウザや環境差で壊れないかを順番に確認します。用語理解は、その判断を早くするための道具として使います。手順が決まったら、HTML/ZIPをアップロードして共有URLを発行し、相手に確認してほしい観点と期限を添えて送ります。

• 表示の話: HTML/CSS/JS、パス、ブラウザ互換性を確認する
• 検索の話: noindex、canonical、sitemap、robots.txtの役割を分ける
• 制限の話: URL共有、パスワード、メール認証、会社ドメイン認証を混同しない
• 運用の話: 期限、差し替え、削除、共有メッセージまで決める

prefetchとは

prefetchは「今すぐではないが、次に使うかもしれないから手が空いたら取っておいて」という指示です。優先度は低く、ブラウザが空き時間に取得します。

典型的な用途は、ユーザーが次に遷移しそうなページのリソースを、現在のページの邪魔をしない範囲で先に取っておくことです。次のページが速く開く効果が期待できます。

あくまで「使うかもしれない」程度の予測なので、確実に使うものに使うのはpreload、未来の遷移先に備えるのはprefetch、と覚えると整理しやすくなります。

preloadとprefetchの使い分け手順

どちらを使うかは「いつ・確実に必要か」で決まります。次の手順で判断してみてください。

1. まず、そのリソースが今のページで確実に使われるかを確認する
2. 今のページで確実かつ早めに必要なら、preloadで優先取得させる
3. 次の遷移先など将来必要かもしれない程度なら、prefetchにする
4. preloadは本当に重要なものだけに絞り、付けすぎないようにする
5. 適用後に計測し、対象リソースの取得が早まったかを確認する

確認・共有ページでの先読みの効果

デザインのレビュー用に共有するページでも、ヒーロー画像やフォントをpreloadしておくと、開いた瞬間の見栄えが整いやすくなります。第一印象を良くしたい確認の場面で役立ちます。

一方、確認用の単一ページではprefetchの出番は限られます。次の遷移先がない場合、無理に先読みしても効果は薄いため、preloadを中心に考えるとよいでしょう。

ギガサイト便はCSSやJavaScript、画像を含むZIPをそのまま公開でき、こうした先読み指定を書いたHTMLもそのまま発行URLで確認できます。同じURLで差し替えられるので、先読みの調整前後を比べやすいのも利点です。