サードパーティ リソースの読み込みを高速化して収益を増やす方法をご確認ください。
このケーススタディでは、サードパーティ リソースのパフォーマンスを改善することでビジネス指標を高めることができる方法について説明します。以前の調査では、広告のレイテンシの増加によるコストが測定されましたが、この調査では、実際のパフォーマンスの向上の価値が示されています。
0.5%
パブリッシャーの収益の増加
2%
広告スクリプトの早期読み込みの増加
出典: Google 内部データ、2019 年 6 月～7 月
背景
Google パブリッシャー タグ（GPT）は、ウェブでディスプレイ広告をリクエストして表示する Google アド マネージャーの広告タグ スクリプトです。GPT チームは、GPT にシンプルな stale-while-revalidate HTTP ヘッダーを実装することで、パブリッシャー パートナー向けの Google ディスプレイ広告の速度とパフォーマンスを改善しました。この手法は、最新のコードよりもスクリプトをできるだけ早く読み込むことが重要である他のシナリオにも適用できます。
問題
GPT は、ブートストラップ スクリプト gpt.js としてデプロイされます。このスクリプトには、15 分という短い有効期間（TTL）が設定されます。この短い TTL により、スクリプトをすばやく更新またはロールバックできます。読み込まれると、gpt.js は TTL が長い追加の実装スクリプトをリクエストして読み込みます。
15 分間の TTL が期限切れになると、キャッシュ内の gpt.js のバージョンが古くなり、再検証が必要になります。以前は、この再検証プロセスでは、同期ネットワーク リクエストを実行してスクリプトの新しいコピーを取得していたため、最初の広告リクエストにレイテンシが発生していました。
ソリューション
stale-while-revalidate 属性は Cache-Control ヘッダーで使用され、アセットを非同期で再検証する間、キャッシュで古いアセットを使用できる追加の時間枠を定義します。これにより、デベロッパーは即時性（キャッシュに保存されたコンテンツをすぐに読み込む）と新しさ（キャッシュに保存されたコンテンツの更新が今後使用されるようにする）のバランスを取ることができます。
Google ディスプレイ広告の事例紹介
GPT チームは、ブラウザが stale-while-revalidate を実装することを見越して、2016 年に gpt.js HTTP レスポンスにこの Cache-Control ヘッダーを追加しました。
cache-control: private, max-age=900, stale-while-revalidate=3600
この設定により、以前にキャッシュに保存された値から 15 ～ 60 分の間に gpt.js がリクエストされた場合、その値が古い場合でも、キャッシュに保存された値がリクエストの処理に使用されます。同時に、バックグラウンドで再検証リクエストが送信され、今後使用するためにキャッシュに新しい値が入力されます。
Chrome では、バージョン 75 で stale-while-revalidate をすべてのトラフィックの 99% にロールアウトし、影響を確認するためにトラフィックの 1% でこの機能を一時的に無効にしました。GPT チームは、この 1% のトラフィック（テストグループ）の指標と、この機能が有効になっているトラフィックの 1% のサンプル（コントロール グループ）の指標を記録し、広告スクリプトにおける stale-while-revalidate の効果をテストしました。2 週間にわたって記録された指標（サンプルサイズ: 52 億件の Google ディスプレイ広告インプレッション）では、コントロール グループで次の結果が得られました。
- 広告の表示回数が 0.3% 増加。
- 収益が 0.5% 増加。
- 広告スクリプトの初期読み込みが 2% 増加（ページ読み込みの開始から 500 ミリ秒未満）。
- 広告スクリプトの正常な読み込みが全体で 1.1% 増加しました。
上のグラフに示すように、このテストの結果は、広告スクリプトの正常な読み込みの増加に起因するものと見られます。この読み込みの大部分は、ページの読み込みプロセスの初期段階で発生しています。
サイトに stale-while-revalidate を実装する
GPT チームは、stale-while-revalidate を使用して HTTP ヘッダーに比較的簡単な変更を加えることで、速度を改善し、ビジネス指標を向上させることができると考えています。サイトに stale-while-revalidate を実装する方法について詳しくは、stale-while-revalidate による更新の投稿をご覧ください。