rel=preconnect と rel=dns-prefetch のリソースヒントとその使用方法について説明します。
ブラウザがサーバーからリソースをリクエストするには、接続を確立する必要があります。安全な接続を確立するには、次の 3 つの手順が必要です。
ドメイン名を検索して IP アドレスに解決します。
サーバーへの接続を設定します。
セキュリティのために接続を暗号化します。
これらの各ステップで、ブラウザはサーバーにデータを送信し、サーバーはレスポンスを返します。送信元から送信先までの往復をラウンドトリップと呼びます。
ネットワークの状態によっては、1 回の往復にかなりの時間がかかることがあります。接続設定プロセスには、最大 3 回のラウンドトリップが必要になることがあります。最適化されていない場合はさらに多くなります。
これらをすべて事前に処理することで、アプリケーションの速度が大幅に向上します。この記事では、<link rel=preconnect> と <link rel=dns-prefetch> の 2 つのリソースヒントを使用して、これを実現する方法について説明します。
rel=preconnect を使用して早期に接続を確立する
最新のブラウザは、ページに必要な接続を予測しようとしますが、すべてを確実に予測できるわけではありません。幸いなことに、リソースヒントを提供できます。
rel=preconnect を <link> に追加すると、ページが別のドメインへの接続を確立しようとしており、できるだけ早くプロセスを開始したいことをブラウザに通知できます。ブラウザがリクエストするまでに設定プロセスが完了しているため、リソースの読み込みが速くなります。
リソースヒントは必須の指示ではないため、その名前が付けられています。リソースヒントは、実行したい内容に関する情報を提供しますが、最終的に実行するかどうかはブラウザが決定します。接続の設定と維持には多くの作業が必要なため、ブラウザは状況に応じてリソースヒントを無視したり、部分的に実行したりすることがあります。
ブラウザに意図を伝えるには、ページに <link> タグを追加するだけです。
<link rel="preconnect" href="https://example.com">
重要なサードパーティ配信元への早期接続を確立することで、読み込み時間を 100 ～ 500 ミリ秒短縮できます。これらの数値は小さく見えるかもしれませんが、ユーザーがウェブページのパフォーマンスを認識する方法に違いが生じます。
rel=preconnect のユースケース
取得元はわかっているが、取得する内容はわからない場合
バージョン管理された依存関係により、特定の CDN からリソースをリクエストすることはわかっているものの、その正確なパスはわからないという状況になることがあります。
もう 1 つの一般的なケースは、画像 CDN から画像を読み込む場合です。画像の正確なパスは、ユーザーのブラウザのメディアクエリまたはランタイム機能のチェックによって異なります。
このような状況で、取得するリソースが重要な場合は、サーバーに事前に接続してできるだけ時間を節約する必要があります。ページがリクエストするまでファイルはダウンロードされませんが、少なくとも接続に関する処理を事前に処理できるため、ユーザーは数回のラウンドトリップを待つ必要がなくなります。
メディアのストリーミング
接続フェーズで時間を節約したいが、すぐにコンテンツの取得を開始する必要がないもう 1 つの例は、別の配信元からメディアをストリーミングする場合です。
ページがストリーミング コンテンツを処理する方法によっては、スクリプトが読み込まれてストリームを処理できる状態になるまで待つ必要がある場合があります。事前に接続しておくと、取得を開始する準備ができたら、待ち時間を 1 回の往復に短縮できます。
rel=preconnect を実装する方法
preconnect を開始する方法の 1 つは、ドキュメントの <head> に <link> タグを追加することです。
<head>
<link rel="preconnect" href="https://example.com">
</head>
事前接続は、オリジン ドメイン以外のドメインでのみ有効であるため、サイトには使用しないでください。
Link HTTP ヘッダーを使用して事前接続を開始することもできます。
Link: <https://example.com/>; rel=preconnect
フォントなど、一部のリソースは匿名モードで読み込まれます。これらのリソースについては、preconnect ヒントを使用して crossorigin 属性を設定する必要があります。
<link rel="preconnect" href="https://example.com/ComicSans" crossorigin>
crossorigin 属性を省略すると、ブラウザは DNS ルックアップのみを実行します。
rel=dns-prefetch を使用してドメイン名を早期に解決する
サイトは名前で記憶されますが、サーバーは IP アドレスで記憶されます。これがドメイン ネーム システム（DNS）が存在する理由です。ブラウザは DNS を使用してサイト名を IP アドレスに変換します。このプロセス（ドメイン名解決）は、接続を確立する最初のステップです。
ページが多くのサードパーティ ドメインに接続する必要がある場合、それらすべてに事前接続することは逆効果です。preconnect ヒントは、最も重要な接続にのみ使用することをおすすめします。それ以外の場合は、<link rel=dns-prefetch> を使用して、最初のステップである DNS ルックアップの時間を節約します。通常、DNS ルックアップには 20 ～ 120 ミリ秒かかります。
DNS の解決は、preconnect と同様に、ドキュメントの <head> に <link> タグを追加することで開始されます。
<link rel="dns-prefetch" href="http://example.com">
ブラウザの dns-prefetch サポートは preconnect サポートとは若干異なるため、dns-prefetch は preconnect をサポートしていないブラウザの代替として使用できます。
<link rel="preconnect" href="http://example.com"> <link rel="dns-prefetch" href="http://example.com">
<link rel="preconnect dns-prefetch" href="http://example.com">
dns-prefetch フォールバックを同じ <link> タグに実装すると、Safari で preconnect がキャンセルされるバグが発生します。
Largest Contentful Paint（LCP）への影響
dns-prefetch と preconnect を使用すると、別の配信元への接続にかかる時間を短縮できます。最終的な目標は、別の配信元からリソースを読み込む時間をできるだけ短縮することです。
Largest Contentful Paint（LCP）に関しては、LCP 候補はユーザー エクスペリエンスの重要な部分であるため、リソースをすぐに検出できるようにすることをおすすめします。LCP リソースの fetchpriority 値を "high" に設定すると、このアセットの重要性をブラウザに通知して早期に取得できるため、さらに改善できます。
LCP アセットをすぐに検出できない場合でも、preload リンク（fetchpriority 値が "high"）を使用すると、ブラウザはリソースをできるだけ早く読み込むことができます。
これらのオプションのいずれも使用できない場合（正確なリソースはページ読み込みの後半までわからないため）、クロスオリジン リソースで preconnect を使用して、リソースの検出が遅れた場合の影響をできるだけ軽減できます。
また、preconnect は帯域幅の使用量に関して preload よりもコストがかかりませんが、リスクがないわけではありません。preload ヒントが多すぎると、TLS 証明書に関する帯域幅が消費されます。preconnect事前接続する配信元が多すぎると、帯域幅の競合が発生する可能性があるため、注意してください。
まとめ
これらの 2 つのリソースヒントは、サードパーティ ドメインからすぐにダウンロードすることがわかっているが、リソースの正確な URL がわからない場合に、Page Speed を向上させるのに役立ちます。たとえば、JavaScript ライブラリ、画像、フォントを配信する CDN などがあります。制約に注意し、preconnect は最も重要なリソースにのみ使用し、残りのリソースには dns-prefetch を使用して、常に実際の環境で影響を測定してください。