クロスサイト プリフェッチによる Largest Contentful Paint(LCP)の高速化。
Android 版 Chrome 103 以降、Chrome ではプライベート プリフェッチ プロキシ機能が段階的にリリースされます。これにより、Google 検索やその他の参加ウェブサイトからの外向きナビゲーションを平均 30% 高速化できます。このプライベート プリフェッチ プロキシ機能を使用すると、ユーザーが移動するまで、リンク先のウェブサイトにユーザー情報を開示することなく、クロスオリジン コンテンツをプリフェッチできます。
以下では、この機能の仕組み、サイトの Largest Contentful Paint(LCP)を大幅に改善する方法、クロスサイト ナビゲーションを高速化することで、参照元のウェブサイトがユーザーの目標達成を支援する方法について説明します。
Private Prefetch Proxy の仕組み
安全な通信チャネル
この機能は、CONNECT
プロキシを使用して、Chrome とプリフェッチするコンテンツをホストするサーバーの間に安全な通信チャネルを確立します。この安全な通信チャネルにより、プロキシがデータ転送を検査できなくなります。特に、プライベート プリフェッチ プロキシは、安全な通信チャネルを確立するためにホスト名を認識する必要がありますが、URL 全体やリソース自体は認識しません。
また、安全な通信チャネルはエンドツーエンドで暗号化されているため、仲介業者はホスト名やプリフェッチされたサイトのコンテンツを検出できません。最後に、プロキシは、リンク先サーバーがユーザーの IP アドレスを把握できないようにします。
ユーザーの識別の防止
前述のネットワーク関連の対策に加えて、デバイスに以前に保存された情報に基づいて、プリフェッチ時にサーバーがユーザーを特定できないようにする必要があります。そのため、現在 Chrome では、プライベート プリフェッチ プロキシの使用を、ユーザーが Cookie などのローカル状態を保持していないウェブサイトに限定しています。Private Prefetch Proxy を介して行われるプリフェッチ リクエストには、次の制限があります。
- Cookie: プリフェッチ リクエストで Cookie を送信することはできません。
- リソースの Cookie がある場合、Chrome は認証情報なしで取得しますが、レスポンスを使用しません(後述のキャッシュ保存のセクションをご覧ください)。
- プリフェッチ リクエストのレスポンスに Cookie を含めることができますが、これらの Cookie は、ユーザーがプリフェッチされたページに移動した場合にのみ保存されます。
- 指紋認証: 指紋認証に使用できる他のサーフェスも調整されています。たとえば、プリフェッチ プロキシから送信される
User-Agent
ヘッダーには、限定的な情報しか含まれません。
今後は、同じプライバシー特性を維持しながら、Private Prefetch Proxy を Cookie またはローカル状態を使用するリンクに拡張する予定です。詳しくは、次のステップをご覧ください。
キャッシュ
Chrome は、リソースがすでにキャッシュにある場合もリソースをプリフェッチしますが、ETag
や If-Modified-Since
などの条件付きヘッダー(これらにはサーバーにより設定された値が含まれるため、Cookie がない場合でもトラッキングに使用できる)を含みません。このプリフェッチは、クライアントのキャッシュ状態がプリフェッチされたウェブサイトに漏洩するのを防ぐために行われます。また、Chrome は、ユーザーがプリフェッチされたウェブサイトに移動することを決定した場合にのみ、プリフェッチされたリソースをキャッシュに commit します。
Private Prefetch Proxy の利用を開始する
ウェブサイトの所有者向け
ユーザーが Cookie やローカル状態を保持していないリンクで、プライベート プリフェッチ プロキシを利用開始するために、ウェブサイトの所有者がなんらかの対応をする必要はありません。Google のテストによると、これはほとんどのウェブサイトにとって大きな機会となります。また、初めて訪れたユーザーや頻繁に訪れないユーザーに、超高速の読み込みエクスペリエンスを提供することは常に良いアイデアです。過去のテストでは、プリフェッチされたナビゲーションの Largest Contentful Paint が 20 ~ 30% 高速化されました。
将来的には、この機能のプライバシー特性を維持しながら、Cookie またはローカルの状態とのリンクにも拡張したいと考えています。Cookie に関する課題は、予測が困難な方法でユーザー エクスペリエンスを変化させるために使用される可能性があることです。そのため、Cookie を使用したリンクで Private Prefetch Proxy を利用するには、ウェブサイト所有者がオプトインするか、サイトを調整する必要があります。
具体的には、プリフェッチ リクエストは認証なしのままですが、ユーザーがウェブページに移動すると、ウェブページは Cookie やその他のローカル状態にアクセスできるようになります。デベロッパーは、この機能を活用して、Cookie やローカル状態に基づくパーソナライズと変更を再び追加できます。また、特定のリソース(Cookie に依存しないリソース)を、Cookie を使用せずにプリフェッチしてそのまま使用しても問題ないと宣言することもできます。詳しくは、今後の予定のセクションをご覧ください。
地域に依存するコンテンツまたはサービス
ユーザーの IP アドレスに基づいて、マーケットごとにウェブサイトの動作が異なる(コンテンツが異なる、アクセスが制限されているなど)場合、プライベート プリフェッチ プロキシのプリフェッチ リクエストをどのように処理すればよいか疑問に思うかもしれません。Private Prefetch Proxy は世界中にある複数のサーバーで稼働しており、プロキシの IP はユーザーがプリフェッチを開始した国に地理的に配置されます。
そのため、以下のことをおすすめします。
Sec-Purpose: Prefetch; anonymous-client-ip
HTTP ヘッダーの有無で、Private Prefetch Proxy からのプリフェッチ リクエストを識別します。- IP アドレスを使用してリクエストを発行した Private Prefetch Proxy の位置情報を検索します。ロールアウトされている地域と対応する IP アドレスの最新のリストについては、こちらのリソースをご覧ください。
- この特定の地理的位置に関連付けられている市場に従ってリソースを配信します。
トラフィック制御
過去のテストでは、この機能により、通常、メイン リソース(HTML ドキュメントなど)のリクエストが 2% 未満増加することが判明しています。ただし、慎重な場合は、トラフィック アドバイスの「割合」フィールドを使用して、プライベート プリフェッチ プロキシが許可するトラフィックの量を制御できます。0.3(つまり 30%)などの小数から始めて、次の JSON を /.well-known/traffic-advice
ファイルに追加することで徐々に 1.0(つまり 100%)に増やすことができます。このファイルを application/trafficadvice+json
MIME タイプで提供する必要があります。
[{
"user_agent": "prefetch-proxy",
"fraction": 0.3
}]
fraction
フィールドは、0.0(プリフェッチをまったく行わない)~ 1.0(プリフェッチ リクエストの 100% が通過する)の範囲の浮動小数点数です。
次の構成で、これを完全に無効にすることもできます。
[{
"user_agent": "prefetch-proxy",
"disallow": true
}]
/.well-known/traffic-advice
ファイルはクライアントではなくプロキシによって取得され、通常の HTTP キャッシュ セマンティクスに従ってプロキシにキャッシュに保存されます。アクセスが急増した場合など、より柔軟に対応するには、503 ステータス コードを使用してプリフェッチ リクエスト(Sec-Purpose: prefetch;anonymous-client-ip
)を一時的に拒否し、レスポンスに Cache-Control: no-store
ヘッダーを設定することをおすすめします。Retry-After
ヘッダーを追加して、プリフェッチ リクエストを再試行するまでの待機時間を Chrome に指定することもできます。
紹介者のウェブサイトの所有者の場合
他のウェブサイトへのリンクが多いウェブサイトを運営している場合は、Private Prefetch Proxy 機能を使用して、こうしたクロスオリジン ナビゲーションを高速化することをおすすめします。Chrome がプライベート プリフェッチ プロキシ経由でプリフェッチする必要があるページを特定するには、ページに推測ルールを追加する必要があります。簡単な例を次に示します。
<script type="speculationrules">
{
"prefetch": [
"source": "list",
"urls": ["https://example.com/index.html"],
"requires": ["anonymous-client-ip-when-cross-origin"]
]
}
</script>
次のステップ
今回のリリースは最初のステップにすぎません。コミュニティの関心やフィードバックに基づいて、この機能を拡張し、改善していきたいと考えています。たとえば、開発者の負担を最小限に抑えながら、Cookie とローカル状態を使用するリンクに拡張する方法や、この機能を参照元のウェブサイトにとってより有用にする方法について、フィードバックをお寄せください。