はじめに
Webページが外部のリソース（フォント、スクリプト、画像、API）を読み込むには、ネットワーク接続が必要です。DNS解決、TCPハンドシェイク、TLSネゴシエーションのオーバーヘッドは、合計で数百ミリ秒に達します。dns-prefetch と preconnect は、これらの処理を事前に実行するようブラウザに指示するリソースヒントです。
コネクション確立のコスト
HTTPS接続の確立には複数のラウンドトリップが必要です：
| ステップ | レイテンシ（目安） |
|---|---|
| DNSルックアップ | 20～120 ms |
| TCPハンドシェイク | 1 RTT |
| TLSネゴシエーション | 2 RTT |
| 合計 | 3 RTT以上 |
3G回線（RTT 300ms）では、データ転送開始までに約1秒ものオーバーヘッドが発生します。リソースヒントはこれを大幅に削減します。
dns-prefetch
dns-prefetch は、ドメイン名の解決を事前に行います：
<link rel="dns-prefetch" href="https://fonts.googleapis.com">
ブラウザがHTMLを解析している間に、指定されたドメインのDNSルックアップを開始します。実際にリソースが必要になった時には、IPアドレスがすでにキャッシュされています。
使用するタイミング： ページ内で参照する外部ドメイン全般。軽量で、DNS解決のみを行います。
preconnect
preconnect はさらに進み、DNSルックアップ + TCPハンドシェイク + TLSネゴシエーション をすべて事前に実行します：
<link rel="preconnect" href="https://api.example.com" crossorigin>
CORSモードで読み込まれるリソース（フォント、fetchリクエストなど）には crossorigin属性が必須 です。
使用するタイミング： ページが即座に必要とする重要なサードパーティオリジン — Webフォントプロバイダー、分析エンドポイント、CDNなど。
リソースヒントの比較
| ヒント | 動作 | 用途 |
|---|---|---|
dns-prefetch | DNS解決のみ | 優先度の低い外部ドメイン |
preconnect | DNS + TCP + TLS | 重要なサードパーティオリジン |
prefetch | リソースのダウンロード＋キャッシュ | 将来のナビゲーション用 |
preload | 現在のページのリソースをダウンロード | クリティカルアセット |
dns-prefetch が最も軽量で、preconnect はよりコストがかかるが効果が大きく、preload は実際にリソースをダウンロードします。
実践的なHTML実装例
Webフォント（最も一般的）
<head>
<link rel="preconnect" href="https://fonts.googleapis.com" crossorigin>
<link rel="dns-prefetch" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
</head>
サードパーティAPI
<link rel="preconnect" href="https://api.example.com" crossorigin>
分析ツールとCDN
<link rel="dns-prefetch" href="https://www.googletagmanager.com">
<link rel="preconnect" href="https://cdn.example.com" crossorigin>
CloudflareとTTFBの考慮点
CloudflareなどのCDNを使用していても、新規ユーザーの初回接続にはDNSとTLSが必要です。preconnect を追加することで接続確立時間を排除し、TTFB（Time to First Byte） を改善できます。
Lighthouseの監査では「Preconnect to required origins」として検出されます。Chrome DevTools → Lighthouse → 監査を実行して、推定改善時間を確認しましょう。
ブラウザサポートとフォールバック
<!-- 両方のヒントを併用して幅広いサポート -->
<link rel="dns-prefetch" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.googleapis.com" crossorigin>
ベストプラクティス
- preconnect は3～6オリジンに制限 — それぞれが実際のソケットを開くため
- フォントとCORSリソースには必ず crossorigin を付与
- 自ドメインには preconnect 不要 — ブラウザが自動で処理
- preconnect非対応ブラウザ向けに dns-prefetch を併用
- サイト変更後は定期的に Lighthouse で監査
まとめ
dns-prefetch と preconnect は低コストで高効果な最適化手法です。多くの外部ドメインには軽量な dns-prefetch を、最も重要な3～6のサードパーティオリジンには preconnect を適用しましょう。preload や適切なキャッシュ設定と組み合わせることで、ページ読み込み時間を数百ミリ秒短縮できます。