【HTML Living Standard】preconnect属性値の使い方
preconnect属性値の使い方について、初心者にもわかりやすく解説します。
基本的な使い方
preconnectプロパティは、HTMLドキュメント内でブラウザに特定のオリジンへの事前接続を指示する情報セットを保持するプロパティです。これは、<link>要素のrel属性に指定する特別な値の一つとして機能します。
このpreconnectの主な目的は、将来的に必要となるであろうサードパーティのオリジンに対して、DNS解決、TCPハンドシェイク、TLSネゴシエーションといったネットワーク接続の初期段階の処理を、実際にそのオリジンのリソースがリクエストされるよりも前に開始することです。例えば、ウェブフォントやCDNから提供されるライブラリなど、他のドメインからリソースを読み込む際に特に有効です。
具体的には、ページが読み込まれる際にブラウザが<link rel="preconnect" href="https://example.com">のような記述を検出すると、example.comへの接続処理をバックグラウンドで開始します。これにより、後からそのオリジンにあるCSSファイル、JavaScriptファイル、画像などのリソースが必要になった際に、接続にかかる時間が大幅に短縮され、リソースのダウンロードがより迅速に行われるようになります。結果として、ウェブページの表示速度が向上し、ユーザー体験の改善に貢献します。
ただし、preconnectを無計画に多用しすぎると、実際には使用されない接続を確立するために余分なネットワークリソースやシステムリソースを消費してしまう可能性があります。そのため、ページ内で頻繁に利用され、かつパフォーマンスへの影響が大きい重要なオリジンに限定して適用することが推奨されます。
構文(syntax)
1<link rel="preconnect" href="URL">
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません
サンプルコード
HTML preconnectで接続を事前に行う
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>HTML preconnectのサンプル</title> 7 8 <!-- 9 rel="preconnect"は、指定されたオリジン（ドメイン）への接続を早期に開始するよう 10 ブラウザにヒントを与えます。これにより、後からそのオリジンからリソース 11 （CSS、JavaScript、画像、フォントなど）をダウンロードする際の待ち時間（遅延）を 12 短縮し、ページの読み込みパフォーマンスを向上させることができます。 13 --> 14 15 <!-- Google FontsのCSSファイルをホストするサーバーへの早期接続を試みます。 --> 16 <link rel="preconnect" href="https://fonts.googleapis.com"> 17 18 <!-- Google Fontsのフォントファイルをホストするサーバーへの早期接続を試みます。 19 フォントファイルは通常CORS（Cross-Origin Resource Sharing）を必要とするため、 20 crossorigin属性を含めることが推奨されます。 21 --> 22 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> 23 24 <!-- 実際にGoogle FontsのRobotoフォントを読み込みます。 25 上記のpreconnectヒントにより、この読み込みが高速化される可能性があります。 26 --> 27 <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet"> 28 29 <style> 30 body { 31 font-family: 'Roboto', sans-serif; /* 読み込んだフォントを適用 */ 32 margin: 20px; 33 line-height: 1.6; 34 } 35 h1 { 36 color: #2c3e50; 37 } 38 p { 39 color: #34495e; 40 } 41 </style> 42</head> 43<body> 44 <h1>`rel="preconnect"` の活用例</h1> 45 <p> 46 このページでは、Google Fontsのフォントを読み込む前に 47 <code><link rel="preconnect"></code> を使用して、 48 関連するサーバーへの接続を前もって開始するようブラウザに指示しています。 49 </p> 50 <p> 51 これにより、ページ表示時にフォントのダウンロードがより早く開始され、 52 ユーザー体験が向上する可能性があります。 53 </p> 54</body> 55</html>
HTMLのpreconnectとは、ウェブページの読み込み速度を向上させるための重要なヒントをブラウザに与える機能です。これは、<link>要素のrel属性にpreconnectという値を指定することで使用します。
具体的には、ブラウザがこれから別のドメイン（オリジン）からリソース（画像、CSS、JavaScript、フォントなど）をダウンロードする予定がある場合に、事前にそのドメインへのネットワーク接続（DNSの名前解決、TCPハンドシェイク、TLSネゴシエーションなど）を開始するよう促します。これにより、実際にリソースが必要になった際に、これらの接続確立にかかる時間を短縮し、ページの表示を速める効果が期待できます。
preconnect自体には直接的な引数や戻り値はありません。接続先のドメインは、<link>要素のhref属性でURLを指定します。サンプルコードでは、Google Fontsからフォントを読み込む前に、https://fonts.googleapis.comとhttps://fonts.gstatic.comへの早期接続を指示しています。特に、フォントなどのクロスオリジン（異なるドメイン）のリソースを扱う場合は、crossorigin属性を含めることで、より効率的な接続確立を助けることができます。この事前の接続確立によって、その後のフォントファイルのダウンロードがスムーズになり、ユーザーが感じるページの読み込み体験が向上します。
このようにpreconnectは、ページのパフォーマンス最適化において、非常に有効な手段の一つです。
rel="preconnect"は、将来的に外部リソースを読み込むドメインへの接続をブラウザに早期に開始させるヒントで、ページの表示速度改善に貢献します。これはブラウザに優先的な処理を促すものですが、必ず実行されるとは限りません。フォントなどCORS（異なるオリジンからのリソース共有）が必要なリソースを対象とする場合、crossorigin属性を忘れずに含めることが重要です。過剰な数のpreconnect設定は、ブラウザのリソースを不必要に消費し、かえってパフォーマンスを損なう可能性があります。本当に必要な数少ないドメインに限定し、<head>タグ内に記述して効果的に利用しましょう。
HTML preconnectとcrossoriginで高速化する
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>PreconnectとCrossorigin属性のサンプル</title> 7 8 <!-- 9 preconnectは、ブラウザに指定されたオリジン（ドメイン）への接続を 10 事前に確立するよう指示するリソースヒントです。 11 これにより、後続でそのオリジンからリソース（画像、スクリプト、CSSなど）を 12 読み込む際のパフォーマンスが向上します。 13 --> 14 <link rel="preconnect" href="https://example.com"> 15 16 <!-- 17 crossorigin属性は、Cross-Origin Resource Sharing (CORS) を必要とする 18 リソース（例: フォントファイル、一部のCDNスクリプトや画像）に対して使用します。 19 この属性を指定することで、ブラウザは認証情報なしでオリジンに接続を試み、 20 異なるオリジンからのリソース読み込みを許可します。 21 例として、Google Fontsのフォントファイルを読み込む際に必要となることが多いです。 22 --> 23 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> 24 25 <!-- 26 上記のpreconnectヒントにより、実際にGoogle FontsのCSSが読み込まれる前に 27 fonts.gstatic.comへの接続が最適化されます。 28 --> 29 <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400&display=swap" rel="stylesheet"> 30 31 <style> 32 body { 33 font-family: 'Roboto', sans-serif; /* preconnectしたフォントを使用 */ 34 margin: 20px; 35 line-height: 1.6; 36 } 37 h1 { 38 color: #333; 39 } 40 code { 41 background-color: #f2f2f2; 42 padding: 2px 4px; 43 border-radius: 3px; 44 } 45 </style> 46</head> 47<body> 48 <h1>PreconnectとCrossorigin属性の利用例</h1> 49 <p>このページは、外部のGoogle Fontsを使用しており、その読み込みを最適化するために<code>preconnect</code>と<code>crossorigin</code>属性を利用しています。</p> 50 <p><code><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin></code>のように記述することで、<code>fonts.gstatic.com</code>への接続を事前に行い、フォントの表示を高速化します。</p> 51 <p>ブラウザの開発者ツールのネットワークタブで、リソースの読み込み状況を確認できます。</p> 52</body> 53</html>
このHTMLコードは、ウェブページの読み込み速度を向上させるためのpreconnect属性とcrossorigin属性の利用方法を示しています。
preconnect属性は、ブラウザに対し、指定された外部サーバー（オリジン）への接続を、実際にそのサーバーから画像、スクリプト、CSSなどのリソースをダウンロードする前に、あらかじめ確立しておくように指示するものです。これにより、後続のリソース読み込みがスムーズになり、ページの表示速度が向上します。サンプルコードでは、href属性で指定されたhttps://example.comやhttps://fonts.gstatic.comへの事前接続を指示しています。この属性自体に引数はなく、特別な戻り値もありませんが、ブラウザの内部処理としてネットワーク接続が最適化される効果があります。
crossorigin属性は、異なるオリジン（ドメイン）からリソースを読み込む際に必要となる、Cross-Origin Resource Sharing (CORS) を扱うためのものです。特に、ウェブフォント（Google Fontsなど）や一部のCDNから提供されるリソースを安全かつ適切に読み込むために使用されます。この属性を指定することで、ブラウザは認証情報なしで異なるオリジンに接続し、リソースの読み込みを許可します。サンプルでは、Google Fontsのフォントファイルが配置されているhttps://fonts.gstatic.comへのpreconnectにcrossoriginが併記されており、フォントの事前接続がCORSルールに従って行われることで、実際のフォントファイル取得が高速化されます。
このように、これら二つの属性を組み合わせることで、外部リソースの読み込みにかかる時間を短縮し、ユーザー体験を向上させることが可能です。
preconnectは、今後利用する外部リソースへのネットワーク接続を事前に開始し、ウェブページの読み込み速度を向上させるためのヒントです。ただし、あまりにも多くのオリジンに指定すると、ブラウザのリソースを消費し、かえってパフォーマンスが低下する可能性がありますので、本当に必要なものに限定して利用しましょう。特に、Google Fontsなどの外部フォントや一部のCDNリソースでは、セキュリティ上の理由からcrossorigin属性の指定が必須となります。この属性がないと、リソースが正しく読み込めない場合がありますので、忘れずに記述してください。これらの設定はHTMLのhead要素内に記述し、その効果はブラウザの開発者ツールで確認できます。