サードパーティのリソースの読み込み速度を上げることで、どのように収益が向上するかをご確認ください。
このケーススタディでは、サードパーティ リソースのパフォーマンスを改善することで、ビジネス指標がどのように向上するかについて説明します。以前の調査では、広告追加の遅延による費用を測定していましたが、この調査では、パフォーマンス向上がもたらす価値が実証されています。
0.5%
パブリッシャーの収益の伸び
2%
広告スクリプトの初期読み込みが増加
出典: Google 内部データ、2019 年 6 月～ 7 月。
背景
Google パブリッシャー タグ（GPT）は、ウェブ上でディスプレイ広告をリクエストしてレンダリングする、Google アド マネージャーの広告タグ スクリプトです。シンプルな stale-while-revalidate HTTP ヘッダーを GPT に実装することで、GPT チームはパブリッシャー パートナー向けの 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 で、全トラフィックの 99% に stale-while-revalidate がロールアウトされ、影響を測定するために、この機能が一時的に無効となったトラフィックの 1% が残りました。GPT チームは、この 1%（テストグループ）の指標と、この機能を有効にしたトラフィックのサンプル 1%（コントロール グループ）を記録して、広告スクリプトに対する stale-while-revalidate の効果をテストしました。Google ディスプレイ広告のインプレッション 52 億回をサンプルとして記録した 2 週間にわたる指標で、コントロール グループが観察したデータ:
- 広告のインプレッションが 0.3% 増加。
- 収益が 0.5% 増加。
- 広告スクリプトの初期読み込みが 2% 増加（ページの読み込み開始から 500 ミリ秒未満）。
- 成功した広告スクリプトの読み込みが全体で 1.1% 増加。
上のグラフが示すように、このテストの結果は、広告スクリプトの読み込みが増加したことに起因しており、大部分はページの読み込みプロセスの早い段階で発生します。
サイトに stale-while-revalidate を実装する
GPT チームは、stale-while-revalidate を使用して HTTP ヘッダーを比較的簡単な変更で、処理速度とビジネス指標を改善できることを確認しました。サイトに stale-while-revalidate を実装する方法について詳しくは、古いデータの更新期間を stale-while-revalidate で維持するの投稿をご覧ください。