【りそーすひんと】
リソースヒント（preload/prefetch） とは？
最終更新:
💡 今使う？あとで使う？つながる準備？を伝える
ブラウザに、必要なファイルの取得や接続の準備を前もって知らせる仕組み。preload・prefetch・preconnectは用途が異なり、効果は対象や環境によって変わる。
📌 このページのポイント
- preloadは、現在のページで必要なファイルを早めに取得する
- prefetchは、後の画面などで使いそうなファイルを先に取得する
- preconnectは、取得先への接続を先に準備する
- 指定を増やすより、必要な対象を選び、実測で確かめる
ひよこ preloadとprefetchは、どう違うの？
ペンギン先生 ひよこ フォントのpreloadは、どう書くの？
ペンギン先生 ひよこ preloadすれば、スクリプトも動くの？
ペンギン先生 ひよこ preconnectは、ファイルを読むの？
ペンギン先生 ひよこ たくさん指定した方が速そう！
ペンギン先生 不要な先読みは帯域や接続の資源を使い、必要な読み込みと競合することがあるよ。今の表示に重要なファイル、次に使う見込み、取得先を分けて選ぼう。キャッシュの規則も再利用に影響するので、開発者ツールなどで取得の順序や重複、表示時間を実測して判断するといいよ。
まとめ：ざっくりこれだけ覚えればOK！
「リソースヒント」って出てきたら「ブラウザに、ファイルや接続の準備を先にお願いする仕組み」と思えばだいたいOK！
📖 おまけ：英語の意味
「Resource Hints」 ＝ リソースのヒント（手がかり）
💬 ブラウザに「このリソースが必要だよ」とHint（ヒント）を与える仕組みだよ