#はじめに
「このリソースは後で必要になる」「このサーバーに接続する予定がある」——ブラウザにこれらの情報を事前に伝えることで、読み込みを高速化できます。
リソースヒントは、ブラウザに対する「ヒント」です。必要なリソースを先読みしたり、接続を事前に確立したりすることで、ユーザーが実際にリソースを必要としたときの待ち時間を削減できます。
この記事を読むと、以下のことができるようになります：
- 各リソースヒントの違いを理解できる
- 適切な場面で適切なヒントを使用できる
- 過度な使用による問題を避けられる
#リソースヒントの種類
| ヒント | 用途 | 優先度 |
|---|---|---|
preload | 現在のページで必ず使うリソースを先読み | 高 |
prefetch | 次のページで使うかもしれないリソースを先読み | 低 |
preconnect | 外部サーバーへの接続を事前に確立 | 中 |
dns-prefetch | 外部サーバーのDNS解決を事前に実行 | 低 |
#preload
現在のページで確実に必要なリソースを、できるだけ早く読み込みます。
<link rel="preload" href="/fonts/main.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="/hero.webp" as="image">
<link rel="preload" href="/critical.css" as="style">#as属性
リソースの種類を指定します。ブラウザが適切な優先度を設定できます。
| 値 | 用途 |
|---|---|
script | JavaScript |
style | CSS |
font | フォント |
image | 画像 |
fetch | fetch/XHRリクエスト |
#使用場面
- LCP画像: ヒーロー画像など最初に表示される大きな画像
- クリティカルフォント: ファーストビューで使用するWebフォント
- 重要なスクリプト: 遅延読み込みされるが早く必要なJS
#例: LCP画像のpreload
<head>
<!-- LCP画像を早期に読み込み -->
<link rel="preload" as="image" href="/hero.webp" type="image/webp">
</head>
<body>
<!-- 画像がHTMLに登場する前に読み込み開始 -->
<img src="/hero.webp" alt="ヒーロー画像">
</body>#注意点
- preloadしたリソースを3秒以内に使用しないと、コンソールに警告が出ます
- 過度なpreloadは逆効果（帯域の競合）
#prefetch
次のページで使う可能性があるリソースを、アイドル時間に先読みします。
<link rel="prefetch" href="/next-page.html">
<link rel="prefetch" href="/next-page-data.json">#preloadとの違い
| preload | prefetch | |
|---|---|---|
| 対象 | 現在のページ | 次のページ |
| 優先度 | 高 | 低（アイドル時） |
| 必須度 | 必ず使う | 使うかもしれない |
#使用場面
- ページネーションの次のページ
- ユーザーが次にクリックしそうなリンクのリソース
- モーダルで使用する画像
#例: 次のページを先読み
<!-- ユーザーが「次へ」をクリックする可能性が高い -->
<link rel="prefetch" href="/articles/page-2">#注意点
- ユーザーが実際に使わない可能性がある（帯域の無駄）
- モバイルユーザーはデータ通信量を気にする
- データセーバーモードでは無視されることがある
#preconnect
外部サーバーへの接続（DNS、TCP、TLS）を事前に確立します。
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://cdn.example.com" crossorigin>#接続に必要な時間
DNS解決: ~50ms
TCP接続: ~50ms
TLS ハンドシェイク: ~100ms
合計: ~200ms（これを事前に済ませる）#使用場面
- Google Fonts など外部フォント
- CDNからの画像・アセット取得
- サードパーティAPI
#例: Google Fonts
<head>
<!-- フォントのオリジンに事前接続 -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<!-- フォントの読み込み -->
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
</head>#注意点
- 10秒以内に接続を使用しないと、接続が切れる
- 接続数が多すぎるとCPU/メモリを消費
- 実際に使用するオリジンにのみ使用（3〜4個まで）
#dns-prefetch
外部サーバーのDNS解決のみを事前に実行します。
<link rel="dns-prefetch" href="https://analytics.example.com">#preconnectとの違い
| dns-prefetch | preconnect | |
|---|---|---|
| DNS解決 | ✅ | ✅ |
| TCP接続 | ❌ | ✅ |
| TLS ハンドシェイク | ❌ | ✅ |
| コスト | 低い | 中程度 |
#使用場面
- 確実に使うわけではないが、使う可能性があるオリジン
- preconnectでは過剰な場合
- 多くの外部オリジンがある場合
#例: アナリティクス
<link rel="dns-prefetch" href="https://www.google-analytics.com">#preconnectとの併用
古いブラウザへのフォールバックとして、両方指定することがあります。
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="dns-prefetch" href="https://fonts.gstatic.com">#modulepreload
ES Moduleを先読みし、パースまで行います。
<link rel="modulepreload" href="/app.js">通常のpreloadと異なり、JavaScriptモジュールとしてパースされ、依存関係も解決されます。
#使い分けガイド
リソースは現在のページで必ず使う？
│
├── Yes → preload
│ └── 外部オリジン？ → preconnect も追加
│
└── No → リソースは次のページで使うかも？
│
├── Yes → prefetch
│
└── No → 外部オリジンへの接続がある？
│
├── Yes、確実に使う → preconnect
│
└── Yes、使うかも → dns-prefetch#DevToolsでの確認
#Networkタブ
- リソースをクリック
- 「Initiator」列でpreloadが使われているか確認
#Performanceタブ
- パフォーマンス記録を取得
- 「Timings」セクションで接続時間を確認
#Console
preloadしたリソースが使用されないと警告が表示されます：
The resource ... was preloaded using link preload but not used within a few seconds.#ベストプラクティス
#1. 重要なリソースに限定
<!-- ✅ LCP画像をpreload -->
<link rel="preload" as="image" href="/hero.webp">
<!-- ❌ すべての画像をpreload（過剰） -->
<link rel="preload" as="image" href="/image1.jpg">
<link rel="preload" as="image" href="/image2.jpg">
<link rel="preload" as="image" href="/image3.jpg">
...#2. preconnectは3〜4個まで
<!-- ✅ 必要なオリジンのみ -->
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preconnect" href="https://cdn.example.com" crossorigin>
<!-- ❌ 多すぎる -->
<link rel="preconnect" href="https://origin1.com">
<link rel="preconnect" href="https://origin2.com">
...
<link rel="preconnect" href="https://origin10.com">#3. 測定して効果を確認
リソースヒントを追加したら、LCPなどの指標が改善したか確認してください。
#まとめ
- preload: 現在のページで確実に使うリソースを先読み
- prefetch: 次のページで使うかもしれないリソースをアイドル時に先読み
- preconnect: 外部サーバーへの接続を事前に確立
- dns-prefetch: DNS解決のみを事前に実行
- 過度な使用は逆効果、重要なリソースに限定
- 効果を測定して確認
#次のステップ
リソースヒントを理解したところで、次はクリティカルレンダリングパスについて学びましょう。ブラウザがHTMLを受け取ってから画面に描画するまでの流れを理解し、レンダリングを最適化する方法を紹介します。