ひとことで言うと
preconnectとは、ページが外部サーバーに接続するときのDNS解決・TCPハンドシェイク・TLSネゴシエーションという3段階の準備を、実際にリソースを取得する前に済ませておく指示です。`<link rel="preconnect" href="https://fonts.googleapis.com">`をheadに書くだけで、Googleフォントの取得が始まる前に接続が完了した状態になります。
AIが生成するHTMLでは外部サービスへのリンクが多く含まれますが、preconnectが省略されていることがほとんどです。特にGoogleフォント・Unsplashの画像・分析ツールなどを使っている場合、対応するドメインへのpreconnectを追加するだけで初期表示が体感で改善されます。
- 相手がログインなしで開ける状態か確認する
- PCとスマホで最低1回ずつ表示を確認する
- 内部情報・個人情報・不要な外部送信が残っていないか見る
- レビュー期限と修正時の差し替え方を決めておく
HTML共有で関係する場面
商品提案書をHTMLで作り、ギガサイト便などで取引先のスマートフォンへ共有するケースを考えます。ページ内にGoogleフォントとAmazon S3の画像が混在していると、異なる2ドメインへの接続確立がそれぞれ発生します。`<link rel="preconnect">`を2行追加するだけで両方の接続準備が並行して進み、表示完了まで0.5〜1秒短縮できることがあります。
パスワード付きURLで社内関係者に共有する際も、外部フォントへのpreconnectが効きます。イントラネット経由でも外部CDNへのアクセスは発生するため、接続準備の短縮は社内共有でも有効です。ただし社内プロキシが外部接続をブロックしている環境では効果がなく、その場合はフォントをHTMLに埋め込む方法が確実です。
よくある誤解
preconnectを設定すれば「ファイルも先取りされる」と思われがちですが、接続準備をするだけでファイル自体は取得しません。接続の準備とリソースの取得は別段階です。リソース自体を先取りしたい場合は、preconnectではなくpreloadを使う必要があります。
「全部のドメインにpreconnectを書けばいい」は誤りです。ブラウザが維持できる接続数には上限があり、使われない接続を大量に確立するとメモリと帯域を無駄に消費します。preconnectはページ表示の最初の2秒以内に確実に使うドメインに絞り、多くても4〜5個が目安です。
安全に使うための注意点
preconnectに指定したドメインは、ページを開いた瞬間にそのサーバーへ接続します。社外秘のページで分析ツールや広告ネットワークのドメインへのpreconnectが含まれていると、閲覧者情報がそのサービスに送信されます。共有前にpreconnectのhref値を全件確認し、不要な外部送信が発生しないか点検してください。
crossorigin属性はフォントに使うときにのみ必要です。Googleフォントのように`https://fonts.gstatic.com`からfontファイルをCORSで取得する場合は`crossorigin`を付けてください。画像や通常のスクリプト取得のpreconnectには付けなくてよく、むしろ付けるとブラウザが別接続を2本開くことがあります。
よくある質問
preconnectとDNS-prefetchは何が違うのですか？どちらを使えばいいですか？
DNS-prefetchはDNS解決のみを事前に行い、TCP・TLS確立は行いません。preconnectはすべての接続準備を行う上位互換です。確実に使う主要ドメインにはpreconnect、補助的なドメインにはDNS-prefetchを使い分けるのが一般的な方針です。
Googleフォントのpreconnectを追加したのに速度が変わらない気がします。確認方法はありますか？
ChromeのDevToolsでNetworkタブを開き、フォントリクエストの「Timing」を確認します。「Stalled」や「DNS Lookup」の時間が短縮されていればpreconnectが機能しています。変化がなければhrefのURLが実際のフォント配信ドメインと一致しているか確認してください。
AI生成HTMLに含まれていたpreconnectを削除しても問題ありませんか？
問題はありませんが、削除するとそのドメインへの接続確立が遅れてフォントや画像の表示が少し遅くなることがあります。削除前にNetworkタブで該当ドメインへのリクエストがあるか確認し、使われていないなら削除して構いません。