サードパーティ リソースの読み込みを高速化して収益を増やす方法をご確認ください。
このケーススタディでは、サードパーティ リソースのパフォーマンスを改善することでビジネス指標を高めることができる方法について説明します。以前の調査では、広告のレイテンシの増加による費用が測定されましたが、この調査では、実際のパフォーマンスの向上の価値が示されています。
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 チームは、広告スクリプトにおける stale-while-revalidate の効果をテストするために、この 1% のトラフィック（テストグループ）と、この機能が有効になっているトラフィックの 1% のサンプル（コントロール グループ）の指標を記録しました。2 週間にわたって記録された指標（サンプルサイズ: 52 億件の Google ディスプレイ広告インプレッション）では、コントロール グループで次の結果が得られました。
- 広告インプレッション数が 0.3% 増加。
- 収益が 0.5% 増加。
- 早期の広告スクリプトの読み込み（ページ読み込み開始から 500 ミリ秒以内）が 2% 増加。
- 広告スクリプトの正常な読み込みが全体で 1.1% 増加しました。
上のグラフに示すように、このテストの結果は、広告スクリプトの読み込みが成功する割合の増加に起因しています。この読み込みの大部分は、ページの読み込みプロセスの早い段階で発生しています。
サイトに stale-while-revalidate を実装する
GPT チームは、stale-while-revalidate を使用して HTTP ヘッダーに比較的簡単な変更を加えることで、速度を改善し、ビジネス指標を向上させることができると考えています。自分のサイトに stale-while-revalidate を実装する方法については、Stale-while-revalidate で最新の状態を維持するをご覧ください。