クロスサイト プリフェッチで 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% 未満になることがわかっています。ただし、慎重を期す場合は、トラフィック アドバイスの fraction フィールドを使用して、Private Prefetch Proxy が通過するトラフィックの量を制御できます。0.3(30%)のような小さな値から始めて、徐々に 1.0(100%)に増やすには、次の JSON を /.well-known/traffic-advice
ファイルに追加します。このファイルは 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 キャッシュ セマンティクスに従ってプロキシでキャッシュに保存されます。負荷の高いアクセスが急増した場合など、柔軟性を高めるために、プリフェッチ リクエスト(Sec-Purpose: prefetch;anonymous-client-ip
)を一時的に拒否することもできます。その場合は、ステータス コード 503 を使用し、レスポンスに Cache-Control: no-store
ヘッダーを設定します。Retry-After
ヘッダーを追加して、プリフェッチ リクエストを再試行するまでの待機時間を Chrome に指示することもできます。
参照 URL のウェブサイトの所有者の場合
他のウェブサイトへのリンクが多いウェブサイトを運営している場合は、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 とローカルの状態を含むリンクに展開する方法や、参照 URL ウェブサイトでこの機能をより便利にする方法についてのフィードバックをお待ちしています。