サイト表示速度

「必須のドメインへの事前接続」とは？意味とpreconnect設定手順を解説【PageSpeed Insights】

  • 登録：
  • 更新：

Googleの無料ツール「PageSpeed Insights」でサイトを診断したとき、「必須のドメインへの事前接続（Preconnect to required origins）」という改善提案が表示されることがあります。少し難しそうな名前ですが、意味を理解すれば対処法はシンプルです。この記事では仕組みと具体的な改善手順をわかりやすく解説します。

「必須のドメインへの事前接続」とは何か

「必須のドメインへの事前接続」とは、ページ表示に必要な外部ドメイン（フォント配信、広告、アクセス解析ツールなど）へ、ブラウザがあらかじめ接続準備を完了させておく仕組みのことです。

通常、ブラウザが外部リソースを必要とした瞬間に「DNSルックアップ（ドメイン→IPアドレスの解決）」「TCP接続の確立」「TLS/SSLネゴシエーション」という3段階の準備処理が行われます。これらがリソースを要求するタイミングで毎回走ると、その分だけ表示が遅延します。

preconnectを使うと、ページ読み込みの開始と同時にこれらの準備処理を先行して済ませられるため、実際にリソースが必要になったときにはすぐ取得できる状態になります。PageSpeed Insightsがこの項目を指摘するのは、こうした先読み設定がまだ行われていないと判断したためです。

事前接続に使う2種類のResource Hints

事前接続の設定は、HTMLの<head>内に<link>タグを追加するだけです。用途に応じて2種類を使い分けます。

preconnect｜接続準備をまとめて先行処理

preconnectは、DNSルックアップ・TCP接続・TLSネゴシエーションの3つをまとめて事前に完了させます。フォントや広告など、ページが確実に使用する外部ドメインに対して設定すると効果的です。

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

フォントのように別ドメインから匿名リクエストで読み込むリソースには、crossorigin属性の追記が必須です。これを省略すると接続が再利用されず、せっかくの先読みが無効になります。

dns-prefetch｜DNSルックアップだけを先行処理

dns-prefetchはDNSルックアップのみを先行させる、より軽量な手法です。preconnectに対応していないブラウザ向けのフォールバックとして、preconnectと一緒に記述しておくと幅広い環境で効果を発揮します。

<link rel="dns-prefetch" href="https://fonts.gstatic.com">

「必須のドメインへの事前接続」を改善する4ステップ

ステップ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アクションにフックして出力する方法が安全です。一部のテーマや高速化プラグイン（WP Rocketなど）には事前接続ドメインを登録できる専用設定項目があるため、そちらを活用するのも効果的です。

ステップ3：対象ドメインを必要最小限に絞る

注意点として、preconnectは多用しすぎると逆効果になることがあります。接続準備自体もブラウザのリソースを消費するため、実際に使わないドメインまで指定すると無駄な負荷につながります。本当に必要なドメイン2〜3個に絞り込む運用が推奨です。

ステップ4：設定後に再診断して効果を確認する

タグを追加したら、再度PageSpeed Insightsで診断します。該当ドメインが項目から消えているか、スコアが改善しているかを確認してください。ブラウザキャッシュが残っているとスコアに反映されないことがあるため、キャッシュクリア後に計測するとより正確な結果が得られます。

表示速度はサーバー環境にも左右される

preconnectのようなフロント最適化は確かに有効ですが、ページの読み込み速度はそもそもサーバーの応答速度に大きく依存します。どれだけ細かい最適化を積み重ねても、サーバー自体のレスポンスが遅ければ改善には限界があります。

▶ 表示速度が思うように改善しない場合は、レンタルサーバーの見直しも選択肢のひとつです。WordPressが速いレンタルサーバーの速度比較で、各社の実測値を比較しています。

PageSpeed Insightsの他の改善項目も合わせて対処すると、スコアをより効率的に上げられます。表示速度への影響が大きい「レンダリングを妨げるリソース」の対策も参考にしてみてください。

▶ 「レンダリングを妨げるリソースの除外」とは？CSSとJSの改善方法を解説【PageSpeed Insights】

まとめ

「必須のドメインへの事前接続」は、ページ表示に必要な外部ドメインへの接続処理を先行して完了させることで、体感速度を改善できる施策です。改善の流れをまとめると次のようになります。

  • PageSpeed Insightsで事前接続が必要なドメインを特定する
  • headにpreconnectとdns-prefetchを並べて記述する
  • 対象は確実に使うドメインだけに絞り込む
  • 設定後に再診断してスコアの変化を確認する

フロント最適化とサーバー環境の改善を組み合わせることで、表示速度はより大きく向上します。できるところから着実に取り組んでいきましょう。

このテーマの関連記事はこちら