レイアウト シフトの最小化

レイアウト移動は、ページ上の可視要素の位置やサイズが変更され、その周囲のコンテンツの位置に影響を与えたときに発生します。ユーザー操作の結果としてコンテナが拡張される場合など、シフトが意図されていることもあります。ただし、広告は動的であるため、予期しないレイアウトのずれが発生する可能性があります。これはユーザー エクスペリエンスに悪影響を及ぼし、ユーザビリティに深刻な問題を引き起こす可能性があります。

このガイドでは、Google パブリッシャー タグ（GPT）を使用する際にレイアウトの移動を測定して最小限に抑える方法について説明します。

広告がレイアウトの移動を引き起こす仕組み

通常、広告は非同期でリクエストされ、ページの読み込み中または読み込み後に動的にページにコンテンツが追加されます。広告が取得されている間、ページの残りの部分は読み込みが続行され、広告以外のコンテンツがユーザーに表示されることがあります。読み込まれる広告に十分なスペースを予約しないと、広告がページに追加されたときに、広告以外の表示可能なコンテンツが押し出されてしまう可能性があります。

Google パブリッシャー タグを使用する場合、広告のライフサイクルにおいて、レイアウト シフトが発生するポイントがいくつかあります。

  1. display() が呼び出されたとき。構成に応じて、スロットは拡張または折りたたみが可能です。
  2. 広告コンテンツがレンダリングされるとき。スロットのサイズは、フレキシブル広告が配信された場合や、十分なスペースがない場合などに変更されることがあります。この時点で、スロットは構成方法に応じて展開または閉じることもできます。
  3. 広告コンテンツがレンダリングされた後。一部のクリエイティブ タイプは、ページに表示された後に展開するように設計されています。

なお、広告スロットがビューポート内の上位にあるほど、移動されるコンテンツが多くなる可能性があります。初期ビューポートの上部付近（スクロールせずに見える範囲）にスロットを配置する際は、特に注意してください。これらのスロットは、広告コンテンツが読み込まれたときに表示される可能性が高くなるため、不均衡な量のレイアウト シフトが発生する可能性があります。

レイアウト シフトの測定

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 つの異なる時点でレイアウト シフトが発生する可能性があります。

この機能を使用する必要がある場合は、アド マネージャー レポートの過去の塗りつぶしデータを使用して次のおすすめの方法を実装することで、レイアウト シフトによる影響を軽減できます。

  • 入力される可能性が高いスロットは、常に展開された状態で開始する必要があります。
  • 埋まる可能性の低いスロットは、常に閉じた状態で開始する必要があります。

実装例については、空の広告スロットを閉じるのサンプルをご覧ください。

前へ
広告のベスト プラクティス
次へ
パフォーマンスを把握する