レイアウト移動は、ページ上の可視要素の位置やサイズが変更され、その周囲のコンテンツの位置に影響を与えたときに発生します。ユーザー操作の結果としてコンテナが拡張される場合など、シフトが意図されていることもあります。ただし、広告は動的であるため、予期しないレイアウトのずれが発生する可能性があります。これはユーザー エクスペリエンスに悪影響を及ぼし、ユーザビリティに深刻な問題を引き起こす可能性があります。
このガイドでは、Google パブリッシャー タグ（GPT）を使用する際にレイアウトの移動を測定して最小限に抑える方法について説明します。
広告がレイアウトの移動を引き起こす仕組み
通常、広告は非同期でリクエストされ、ページの読み込み中または読み込み後に動的にページにコンテンツが追加されます。広告が取得されている間、ページの残りの部分は読み込みが続行され、広告以外のコンテンツがユーザーに表示されることがあります。読み込まれる広告に十分なスペースを予約しないと、広告がページに追加されたときに、広告以外の表示可能なコンテンツが押し出されてしまう可能性があります。
Google パブリッシャー タグを使用する場合、広告のライフサイクルにおいて、レイアウト シフトが発生するポイントがいくつかあります。
display()が呼び出されたタイミング。スロットは、構成方法に応じて展開または閉じることができます。- 広告コンテンツがレンダリングされるとき。スロットのサイズは、フレキシブル広告が配信された場合や、十分なスペースがない場合などに変更されることがあります。この時点で、スロットの構成に応じて、スロットが展開または閉じられることもあります。
- 広告コンテンツのレンダリング後。一部のクリエイティブ タイプは、ページに表示された後に展開するように設計されています。
表示領域内の広告スロットの位置が高いほど、コンテンツが押し出される可能性があります。初期表示領域の上部（折り返し上）に近いスロットには特に注意してください。これらのスロットは、広告コンテンツが読み込まれたときに表示される可能性が高く、不均衡な量のレイアウト シフトが発生する可能性があります。
レイアウト シフトの測定
Cumulative Layout Shift（CLS）は、Core Web Vitals の指標で、ラボと現場の両方で、レイアウト シフトがサイトに与える影響を定量化するために使用できます。
実験室
ラボツールでは、CLS が合成的に測定されます。つまり、実際のユーザー操作に依存しないため、継続的インテグレーションとローカル開発ワークフローで使用するのが適しています。ただし、通常、これらのツールはページの読み込み中のパフォーマンスのみを測定し、シミュレートできる条件が限られているため、報告される値は実際のユーザーが体験する値よりも低くなる可能性があります。
Lighthouse によるパブリッシャー広告監査は、GPT 広告に起因する CLS を測定するために使用できるツールです。詳しくは、広告に関連するレイアウトの移動を減らす監査のドキュメントをご覧ください。
Chrome DevTools では、サイトを移動するときにレイアウトのずれをハイライト表示するように設定することもできます。これを使用すると、ページ上の広告スロットの近くで発生するレイアウトのずれを手動で特定できます。
業務の現場
フィールド ツールは、サイトを操作する際に実際のユーザーが経験する CLS を測定します。このプロセスは一般にリアル ユーザー モニタリング（RUM）と呼ばれます。RUM を使用すると、デバイスの機能、ネットワークの状態、ユーザー操作、ページのカスタマイズなど、実際の要因が CLS にどのように影響するかを観察できます。これらの要因は、合成テストではシミュレートするのが難しい場合や、シミュレートできない場合もあります。
レイアウト シフトを最小限に抑える
レイアウト シフトを回避する唯一の方法は、CSS を使用して特定の広告スロットに十分なスペースを予約することです。最も効果的な方法は、広告スロット div に直接固定の高さと幅を設定することです。ただし、これは静的で固定サイズの広告スロットには適していますが、より複雑なシナリオでは、より微妙なアプローチが必要になる場合があります。以降のセクションでは、一般的なシナリオについて説明します。
マルチサイズ広告スロット
複数のサイズを受け入れることができる広告スロットの場合は、次のいずれかのアプローチをおすすめします。
- 配信するように構成された最大サイズのスペースを予約します。
- サービングに構成された最小サイズのスペースを予約します。
- Google アド マネージャー レポートの過去のフィリング データを調べて、配信される可能性が高いサイズのスペースを予約します。
適切なアプローチの選択
レイアウト シフトを排除する最も効果的な方法は、配信するように構成された最大サイズのスペースを予約することです。ただし、この方法では、予約したサイズよりも小さいクリエイティブが配信された場合に、広告の周囲に余分な空白スペースが生じる可能性があります。配信されるクリエイティブのサイズに合わせて広告スロットを縮小すると、レイアウトがさらにシフトするため、この方法は避けてください。代わりに、縦方向と横方向の中央揃えを使用して、余分な空白スペースによる視覚的な影響を軽減できます。
一方、配信するように設定されている最小サイズの広告スペースを予約すると、広告の周囲に余分な空白スペースが空くことはありません。これは、広告スロットに通常は小さいクリエイティブが表示される場合や、スロットがサポートするサイズがすべて類似している場合に適しています。ただし、この方法では、予約サイズより大きいクリエイティブが配信されると、レイアウトがずれる可能性があります（ただし、スペースをまったく予約しない場合と比較すると、このようなずれは通常小さくなります）。
空白スペースとレイアウトのずれのバランスを取るには、広告スロットに「平均的な」スペースを予約します。たとえば、100px を縦方向に予約すると、320x50 クリエイティブが配信されるときに空白スペースが少し発生しますが、スペースをまったく予約しない場合と比較して CLS スコアが低下します。サイトに最適なバランスを見つけるには、さまざまなサイズを試す必要があります。
特定のスロットに予約するスペースの量を決定する際は、Google アド マネージャーのレポートで過去の広告掲載データを確認すると、より的確な判断ができます。いくつかの例を挙げて説明するとわかりやすくなります。
例 #1
| クリエイティブ サイズ（配信済み） | 広告サーバーのインプレッションの割合（%） |
|---|---|
300x250 |
70% |
320x50 |
30% |
この場合、配信されるクリエイティブのほとんどが 300x250 であるため、縦方向に 250px を予約すると CLS が大幅に低下する可能性があります。
例 #2
| クリエイティブ サイズ（配信済み） | 広告サーバーのインプレッションの割合（%） |
|---|---|
970x90 |
60% |
728x90 |
10% |
320x50 |
20% |
728x250 |
5% |
300x250 |
5% |
この場合、ほとんどの広告の高さは 90px 以下であるため、縦方向に 90px を予約すれば、ほとんどの場合レイアウトのずれを回避できます。
スペースを予約する方法
この問題に対処するには、min-height と min-width の CSS プロパティを使用して広告スロットのサイズを指定することをおすすめします。
<div id="ad-slot" style="min-width: 300px; min-height: 250px;"></div>
min-height 属性と min-width 属性を使用すると、広告スロットに最小限のスペースを確保しながら、必要に応じてブラウザがコンテナのサイズを増やすことができます。これにより、サイズの大きいクリエイティブが配信された場合でも、コンテンツがカットされることはありません。
この手法と CSS メディアクエリを組み合わせて、画面サイズごとに異なる最小値を指定できます。
@media screen and (max-width: 960px) {
#ad-slot {
min-height: 100px;
}
}
JavaScript でスペースを予約することは避けてください。スクリプトの読み込み時にレイアウト シフトが発生する可能性があります。CSS でスペースを予約すると、このリスクを回避できます。
Fluid 広告スロット
Fluid 広告スロットでは、サポートされるサイズの固定セットは指定されません。代わりに、これらのスロットは、配信されるクリエイティブ コンテンツに合わせて自動的にサイズ変更されるため、サイズが不確定なクリエイティブをサポートできます。そのため、広告コンテンツをリクエストする前にこれらのスロットのスペースを予約することはできず、フレキシブル サイズの広告は常にレイアウトのずれを生じます。
フレキシブル広告スロットを使用する際のレイアウトのずれの影響を軽減するには、次のことをおすすめします。
fluidサイズは、折り返しの下にあるスロットにのみ使用してください。- フレキシブル スロットをできるだけ早く取得して、スロットのサイズ変更前にユーザーがスクロールして表示する可能性を最小限に抑えます。
広告スロットの折りたたみと展開
collapseEmptyDivs() メソッドを使用すると、広告スロットの div を折りたたんで、表示する広告コンテンツがないときにページのスペースを占有しないようにできます。ただし、この機能を使用すると、意図しないレイアウトのずれが生じる可能性があるため、慎重に使用する必要があります。前のセクションで説明したように、広告スロットを開いたり閉じたりすると、広告のライフサイクルの 2 つの異なるポイントでレイアウトがずれる可能性があります。
この機能を利用する必要がある場合は、アド マネージャー レポートの過去の広告掲載データを使用して、次のベスト プラクティスを実装することで、レイアウトの変更による影響を軽減できます。
- 入力される可能性が高いスロットは、常に展開された状態で開始する必要があります。
- 埋まる可能性の低いスロットは、常に閉じた状態で開始する必要があります。
実装例については、空の広告スロットを閉じるのサンプルをご覧ください。