クロスサイト プリフェッチにより Largest Contentful Paint(LCP)を高速化。
Android 版 Chrome 103 以降、Chrome では非公開のプリフェッチ プロキシ機能を段階的に展開し、Google 検索やその他の参加ウェブサイトからの移動速度を中央値で 30% 高速化します。この非公開のプリフェッチ プロキシ機能を使用すると、ユーザーが移動するまで、リンク先のウェブサイトにユーザー情報を公開することなく、クロスオリジン コンテンツをプリフェッチできます。
ここでは、この機能の仕組みと、この機能がサイトの大幅な改善にどう役立つかを説明します。Largest Contentful Paint(LCP)、すなわちリファラー ウェブサイトがクロスサイト ナビゲーションを高速化することでユーザーの目標達成をサポートする方法です。
Private Prefetch Proxy の仕組み
安全な通信チャネル
この機能は、CONNECT
プロキシを使用して、Chrome とプリフェッチ対象コンテンツをホストするサーバーとの間に安全な通信チャネルを確立します。この安全な通信チャネルにより、プロキシはデータ転送を検査できなくなります。特に、Private Prefetch Proxy は安全な通信チャネルを確立するためにホスト名を確認する必要がありますが、完全な URL やリソース自体は確認しません。
また、セキュアな通信チャネルはエンドツーエンドで暗号化されるため、仲介業者はプリフェッチされたサイトのコンテンツのホスト名やコンテンツを監視できません。最後に、プロキシは本質的に宛先サーバーがユーザーの IP アドレスを確認することを防ぎます。
ユーザーの識別の防止
先ほど説明したネットワークの側面に加え、サーバーが以前にデバイスに保存されている情報を介してプリフェッチ時にユーザーを特定できないようにする必要があります。これに伴い、Chrome では現在、ユーザーが Cookie やその他のローカル状態を保持していないウェブサイトのみに Private Prefetch Proxy の使用を制限しています。Private Prefetch Proxy を介して行われるプリフェッチ リクエストには、次の制限事項があります。
- Cookie: プリフェッチ リクエストで Cookie を送信することはできません。
- リソースに Cookie がある場合、Chrome は認証情報のないフェッチを行いますが、レスポンスは使用しません(後述のキャッシュ保存セクションをご覧ください)。
- プリフェッチ リクエストへのレスポンスには Cookie が含まれることがありますが、これらの Cookie が保存されるのは、プリフェッチされたページにユーザーが移動した場合のみです。
- フィンガープリント: フィンガープリントに使用できる他のサーフェスも調整されます。たとえば、プリフェッチ プロキシによって送信される
User-Agent
ヘッダーは、限定された情報のみを保持します。
将来的には、Private Prefetch Proxy を Cookie やローカルの状態とのリンクに拡張し、同じプライバシー特性を維持できるようにしたいと考えています。詳しくは、次のステップをご覧ください。
キャッシュ
Chrome は、リソースがすでにキャッシュ内にある場合でもリソースをプリフェッチしますが、ETag
や If-Modified-Since
などの条件付きヘッダー(これらにはサーバーにより設定された値が含まれるため、Cookie がない状態でもトラッキングに使用できる)を含みません。このプリフェッチは、クライアントのキャッシュ状態がプリフェッチしたウェブサイトに漏洩するのを防ぐために行われます。また、Chrome は、ユーザーがプリフェッチされたウェブサイトに移動することを決めた場合のみ、プリフェッチされたリソースをキャッシュに commit します。
プライベート プリフェッチ プロキシのスタートガイド
ウェブサイトの所有者向け
ユーザーが Cookie やローカル状態を保持していないリンクで、プライベート プリフェッチ プロキシを活用するために、ウェブサイトの所有者がなんらかの対応をする必要はありません。Google のテストから、このことはほとんどのウェブサイトにとって大きなチャンスとなることがわかっています。また、初めて訪れる人にも、利用頻度の低い人にも、非常に高速な読み込み体験を印象付けることも重要です。過去のテストでは、プリフェッチされたナビゲーションで Largest Contentful Paint が 20% ~ 30% 高速化しました。
将来的には、この機能のプライバシー特性を維持しながら、Cookie やローカルの状態とのリンクにも拡張していく予定です。Cookie に関する課題は、予測が困難な方法でユーザー エクスペリエンスを変化させるために使用される可能性があることです。そのため、ウェブサイトの所有者は、Cookie を使用するリンクに Private Prefetch Proxy を使えるようにするため、オプトインするかサイトを調整する必要があります。
具体的には、プリフェッチ リクエストは認証されないままですが、ユーザーがそのページにアクセスしたときに、そのウェブページは Cookie やその他のローカルの状態にアクセスできます。デベロッパーはこれを利用して、Cookie やローカルの状態に基づくパーソナライズと変更を再度追加できます。または、特定のリソースは、Cookie なしで(つまり、Cookie に依存しないリソース)そのままプリフェッチして使用できるものとして宣言することに関心があるかもしれません。「今後の流れ」セクションに目を通し、詳細と計画の発表にお役立てください。
地域に依存するコンテンツやサービス
ユーザーの IP アドレスに基づいてウェブサイトの動作が異なる(コンテンツが異なる、選択的アクセスが違うなど)場合、Private Prefetch Proxy のプリフェッチ リクエストを処理するにはどうすればよいでしょうか。Private Prefetch Proxy は世界中にある複数のサーバーで稼働しており、プロキシの IP はユーザーがプリフェッチを開始した国に地理的に配置されます。
それを念頭に置いて、以下をおすすめします。
Sec-Purpose: Prefetch; anonymous-client-ip
HTTP ヘッダーの存在によって、Private Prefetch Proxy からのプリフェッチ リクエストを識別します。- IP アドレスを使用してリクエストを発行した Private Prefetch Proxy の位置情報を検索します。ロールアウトされている地域と対応する IP アドレスの最新のリストについては、こちらのリソースをご覧ください。
- この特定の地理的位置に結び付いている市場に合わせてリソースを提供する。
トラフィック制御
過去のテストから、この機能を使用した場合、メインのリソース(HTML ドキュメントなど)の追加リクエストは通常 2% 未満であることがわかっています。ただし、使用に慎重であれば、トラフィック アドバイスの比率フィールドを使用して、Private Prefetch Proxy が通過するトラフィックの量を制御できます。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 が Private Prefetch Proxy を使ってプリフェッチする必要があるページを把握できるように、投機ルールをページに追加する必要があります。簡単な例を次に示します。
<script type="speculationrules">
{
"prefetch": [
"source": "list",
"urls": ["https://example.com/index.html"],
"requires": ["anonymous-client-ip-when-cross-origin"]
]
}
</script>
次のステップ
今回のリリースは最初のステップにすぎません。コミュニティの関心やフィードバックに基づいて、この機能を拡張し、改善していきたいと考えています。たとえば、デベロッパーの負担を最小限に抑えながら Cookie やローカルの状態を含むリンクに拡張する方法や、参照元のウェブサイトでこの機能をより便利にする方法など、フィードバックをお寄せください。