Widely available すべての主要ブラウザで対応済み。安心して使用可能。

<link rel="preconnect">

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

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

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

リソースヒント

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
html.elements.link.rel.preconnect
46
79
39
11.1
46
11.3
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)
注釈 1件
実装メモ
  • Firefox 41以前では、`crossorigin`属性に従わない。

基本構文

HTML 
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://cdn.example.com" crossorigin>

ライブデモ

Preconnect timing

Show how preconnect warms up a future origin before the real request starts.

プレビュー全画面表示

Good candidates

List the kinds of origins that often benefit from preconnect.

プレビュー全画面表示

Use sparingly

Explain why too many preconnect hints can waste connection setup work.

プレビュー全画面表示

実務での使いどころ

  • <link rel="preconnect"> の活用

    preconnect キーワードを rel 属性に指定すると、 <link> 要素では、ユーザーがターゲットリソースのオリジンからのリソースを必要とする可能性が高いことをブラウザーに示唆します。

注意点

  • 古いブラウザでは対応していない場合がある。

アクセシビリティ

  • スクリーンリーダーでの読み上げを確認すること。

参考リンク