テクニカル
preconnect
外部ドメインへの接続を事前に確立しておくヒント。外部リソース取得の遅延を削減。
preconnectとは？
preconnectは<link rel="preconnect">で記述し、外部ドメイン（フォント配信・解析・CDN等）への接続（DNS解決・TCP・TLS）を、実際にリソースを要求する前に確立しておくヒントです。
接続確立には時間がかかるため、これを前倒しすることで外部リソースの取得開始を早められます。
Google Fontsや外部CDNを使うサイトで特に効果的です。
preconnectの使い方・実践方法
preconnectの活用ポイントは次のとおりです。
- フォント配信元（fonts.gstatic.com等）に指定
- 解析・広告など重要な外部ドメインに指定
- 数を絞る（接続維持にもコストがかかる）
- 軽量な
dns-prefetchと併用
preconnectで押さえるべきポイント
preconnectは効果的ですが、接続の維持自体にリソースを使うため、付けすぎると逆効果です。
本当に重要な2〜3の外部ドメインに絞り、それ以外は軽量なdns-prefetchで済ませるのがバランスの良い使い方です。
preconnectを実践するなら
Saguru なら、月額270円から、SEOキーワード調査・上位サイト分析・自サイトSEO診断のすべてが使えます。
「preconnect」を理解した上で、すぐに実践に移せます。
登録なしで1日5回まで無料 ／ メール登録で1日30回 ／ ベーシック月額270円 ／ 自サイトをSEO診断
preconnectについてよくある質問
preconnectとdns-prefetchの違いは？
dns-prefetchはDNS解決のみ、preconnectはTCP・TLSまで含む完全な接続確立です。
preconnectの方が強力です。
preconnectの方が強力です。
いくつまで指定して良い？
重要な2〜3ドメインに絞るのが目安です。
多すぎると接続維持コストで逆効果です。
多すぎると接続維持コストで逆効果です。
何に使うと効果的？
Webフォント配信元や外部CDNなど、必ず使う外部ドメインへの指定が効果的です。