rel=preconnect

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

preconnect は <link> 要素の rel 属性に指定するキーワードで、ユーザーがターゲットリソースのオリジンからのリソースを必要とする可能性が高いことをブラウザーに示唆します。そのため、ブラウザーはそのオリジンへの接続を事前に開始しておくことで、ユーザーの操作性を改善することができる可能性があります。事前接続は、ハンドシェイク（HTTP のオリジンでは DNS+TCP、 HTTPS のオリジンでは DNS+TCP+TLS）の一部またはすべてを事前に実行しておくことにより、指定されたオリジンからの将来の読み込みを高速化します。

<link rel="preconnect"> は、将来のオリジン間の HTTP リクエストにおいて、ナビゲーションまたはサブリソースのどちらでも利益をもたらします。同一オリジンのリクエストに対しては、すでに接続が開かれているため、何のメリットもありません。

ページがたくさんの第三者のドメインに接続する必要がある場合、それらすべてを事前に接続すると、逆効果になることがあります。 <link rel="preconnect"> のヒントは、最も重要な接続だけに使うのが最善です。それ以外の場合は、 <link rel="dns-prefetch"> を使用することで、最初のステップである DNS ルックアップの時間を節約することができます。

例

html
<link rel="preconnect" href="https://example.com" />

事前接続は HTTP の Link ヘッダーで、次のように実装することもできます。

http
Link: <https://example.com>; rel="preconnect"

仕様書

Specification
HTML Standard
# link-type-preconnect

ブラウザーの互換性

BCD tables only load in the browser

関連情報

  • 投機的読み込みで、 <link rel="preconnect"> をはじめとする同様のパフォーマンス向上機能の比較ができます。