リソースヒント（preload/prefetch）とは何ですか？

ブラウザにリソースの読み込み優先度を指示するHTML機能。preload・prefetch・preconnectなどでページ表示を高速化する。

リソースヒント（preload/prefetch）のポイントは？

preloadは現在のページで確実に必要なリソースを優先的に読み込む。prefetchは次のページで必要になりそうなリソースを事前に取得する。preconnectは外部ドメインへの接続を事前に確立する。適切に使えばFirst Contentful PaintやLCPを大幅に改善できる

【りそーすひんと】

💡 「次に必要なもの、先に準備しといて！」とブラウザにヒントを出す技術

📌 このページのポイント

リソースヒントによる先読み戦略の比較

ひよこ

preloadとprefetchって何が違うの？

ペンギン先生

preloadは「今のページで絶対に必要だから、最優先で読み込んで！」という指示だよ。対してprefetchは「次のページで使うかもしれないから、暇なときに取っておいて」というお願いだね。緊急度が全然違うんだ

ひよこ

具体的にはどうやって書くの？

ペンギン先生

HTMLのhead内に書くよ。例えばフォントのpreloadなら。prefetchなら。asで種類を指定するのが大事だよ

ひよこ

preconnectっていうのもあるよね？

ペンギン先生

preconnectは「このドメインにあとで接続するから、DNS解決やTLSハンドシェイクを先にやっておいて」という指示だよ。CDNや外部APIのドメインに対して使うと、実際にリクエストを送るときの待ち時間が短くなるんだ

ひよこ

全部つけたら最速になるのかな？

ペンギン先生

逆効果になることもあるよ！preloadを大量に指定すると帯域を食い合って逆に遅くなるんだ。本当にクリティカルなリソースだけをpreloadにして、それ以外はprefetchにするのがコツ。Lighthouseが「preloadすべきリソース」を教えてくれるから、それを参考にするといいね

まとめ：ざっくりこれだけ覚えればOK！

「リソースヒント」って出てきたら「ブラウザに先読み指示を出して表示を速くする技術」と思えればだいたいOK！

📖 おまけ：英語の意味

「Resource Hints」＝リソースのヒント（手がかり）

💬 ブラウザに「このリソースが必要だよ」とHint（ヒント）を与える仕組みだよ