「必須のドメインへの事前接続」とは？意味と改善方法をわかりやすく解説【PageSpeed Insights】
Googleが無料で提供するWebページ診断ツール「PageSpeed Insights」。診断にかけると、ページの読み込み時間を短縮するための具体的なヒントが得られます。その改善項目のひとつが「必須のドメインへの事前接続（Preconnect to required origins）」です。このページでは、その意味と、表示速度を改善するための具体的な方法をわかりやすく解説します。
「必須のドメインへの事前接続」とは？
「必須のドメインへの事前接続」とは、ページを表示するために必要な外部ドメイン（フォントやアイコン、広告、解析タグなどの配信元）へ、ブラウザがあらかじめ接続準備をしておくことを指します。
通常、ブラウザが外部ドメインからリソースを読み込むときは、「DNSルックアップ（ドメイン名からIPアドレスを調べる）」「TCP接続」「TLS（SSL）ネゴシエーション」という一連の準備処理を、リソースが必要になった瞬間に行います。この準備に時間がかかると、その分だけ表示が遅れてしまいます。
そこで、重要な外部ドメインへの接続準備をページの読み込み開始と同時に先回りして済ませておけば、実際にリソースが必要になったときには「すぐ受け取れる」状態になり、表示が速くなります。PageSpeed Insightsが「必須のドメインへの事前接続」を提案するのは、この先回り処理がまだ設定されていないと判断したときです。
事前接続に使う2つのResource Hints
事前接続は、HTMLの<head>内に<link>タグを追加するだけで設定できます。よく使うのは次の2種類です。
preconnect｜接続準備をまとめて先回り
preconnectは、DNSルックアップ・TCP接続・TLSネゴシエーションまでをまとめて事前に済ませます。フォントや広告など、確実に使う外部ドメインに対して指定すると効果的です。
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>フォントなど、別ドメインから匿名で読み込むリソースにはcrossorigin属性を付けるのがポイントです。これを忘れると接続が再利用されず、効果が薄れてしまいます。
dns-prefetch｜DNS解決だけを先に行う
dns-prefetchは、ドメイン名からIPアドレスを調べる「DNSルックアップ」だけを事前に行う、より軽量な指定です。preconnectに対応していない古いブラウザのフォールバックとして併記しておくと安心です。
<link rel="dns-prefetch" href="https://fonts.gstatic.com">「必須のドメインへの事前接続」の改善方法
1. PageSpeed Insightsで対象ドメインを確認する
まずはPageSpeed Insightsでページを診断し、「必須のドメインへの事前接続」の項目に表示されているドメインを確認します。ここに挙がっているのが、事前接続を設定すべき対象です。Googleフォント、Googleアナリティクス、広告配信、外部CDNなどがよく指摘されます。
2. head内にlinkタグを追加する
確認したドメインに対して、preconnectとdns-prefetchを併記します。例として、Googleフォントを事前接続する場合は次のようになります。
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="dns-prefetch" href="https://fonts.gstatic.com">WordPressの場合は、テーマのheader.php（子テーマ推奨）か、functions.phpでwp_headにフックして出力する方法が安全です。テーマによっては高速化設定やプラグインから事前接続ドメインを登録できるものもあります。
3. 事前接続するドメインは絞り込む
注意点として、preconnectは多用しすぎないことが大切です。接続準備にもリソースを消費するため、実際に使わないドメインまで事前接続すると、かえって逆効果になります。本当に重要で、必ず使う数個のドメインに絞り込むのがコツです。
4. 設定後にもう一度診断して効果を確認する
設定が反映されたら、再度PageSpeed Insightsで診断し、項目から該当ドメインが消えているか・スコアが改善したかを確認します。キャッシュの影響で反映に時間がかかることもあるため、キャッシュをクリアしてから再計測すると確実です。
表示速度はサーバー環境の影響も大きい
事前接続のようなフロント側のチューニングは効果的ですが、ページの表示速度はそもそものサーバーの応答速度に大きく左右されます。いくら細かい最適化を重ねても、サーバー自体が遅いと頭打ちになってしまいます。
▶ 表示速度に悩んでいる場合は、サーバー環境の見直しも検討してみてください。WordPressが速いレンタルサーバーの速度比較で、表示速度の差をわかりやすく解説しています。
あわせて、PageSpeed Insightsの他の改善項目もチェックしておくと効果的です。特に表示速度への影響が大きいのが、レンダリングを妨げるリソースの対策です。
▶ 「レンダリングを妨げるリソースの除外」とは？改善方法も解説【PageSpeed Insights】
まとめ
「必須のドメインへの事前接続」は、ページが使う外部ドメインへの接続準備を先回りして行うことで、表示速度を改善する施策です。改善の流れは次のとおりです。
- PageSpeed Insightsで事前接続すべきドメインを確認する
- head内にpreconnectとdns-prefetchを併記する
- 対象は本当に重要なドメインだけに絞る
- 設定後に再診断して効果を確認する
フロント側の最適化とサーバー環境の見直しを組み合わせることで、表示速度はさらに改善できます。できるところから少しずつ取り組んでみてください。
