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

レイアウト シフトは、ページ上に表示される要素の位置またはサイズが変化し、周囲のコンテンツの位置に影響を与える場合に発生します。ユーザーのアクションの結果としてコンテナが展開される場合など、移行は意図されたものです。ただし、広告の動的な性質は予期しないレイアウトの移動につながる可能性があります。これによってユーザー エクスペリエンスに悪影響が及ぶほか、ユーザビリティの重大な問題にもつながります。

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

広告によってレイアウト シフトが発生する仕組み

広告は通常非同期でリクエストされ、ページの読み込み中または読み込み後にページにコンテンツが動的に追加されます。広告の取得中もページの残りの部分は読み込まれ、広告以外のコンテンツがユーザーに表示される場合があります。広告を読み込むために十分なスペースを確保していないと、表示可能な非広告コンテンツが最終的にページに追加されたときに、広告以外のコンテンツが置き換えられる可能性があります。

Google パブリッシャー タグを使用する場合、広告ライフサイクルの中で次のようなポイントにレイアウト シフトが発生することがあります。

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

ビューポート内の広告スロットが高いほど、表示されるコンテンツが多くなることに注意してください。最初のビューポートの上部付近（スクロールせずに見える範囲）のスロットには特に注意してください。このようなスロットは、広告コンテンツの読み込み時に表示される可能性が高くなるため、レイアウト シフトが大幅に増加する可能性があります。

レイアウト シフトの測定

Cumulative Layout Shift（CLS）は、ウェブに関する主な指標の指標で、ラボと現場の両方で、レイアウト シフトがサイトに及ぼす影響を定量化するために使用できます。

実験室

ラボツールでは CLS を合成的に測定します。つまり、実際のユーザー操作に依存しないため、継続的インテグレーションやローカル開発のワークフローで使用するのに適しています。ただし、これらのツールは通常、ページの読み込み中のパフォーマンスのみを測定し、シミュレーションできる条件が限られているため、レポートされる値は実際のユーザーが体験する値よりも低くなる可能性があります。

Lighthouse によるパブリッシャー広告監査は、GPT 広告に起因する CLS を測定できるツールです。詳しくは、広告関連のレイアウト シフトの削減の監査ドキュメントをご覧ください。

Chrome DevTools では、サイト内を移動する際にレイアウト シフトをハイライト表示するよう設定することもできます。これを使用して、ページ上の広告スロットの近くで発生しているレイアウト シフトを手動で特定できます。

業務の現場

フィールド ツールは、実際のユーザーがサイトを操作したときに経験する CLS を測定します。このプロセスは、一般にリアルユーザー モニタリング（RUM）と呼ばれています。RUM を使用すると、デバイスの機能、ネットワーク状態、ユーザー操作、ページのパーソナライズなど、合成テストによるシミュレーションが困難または不可能な現実的な要因によって CLS がどのように影響を受けるかを観察できます。

レイアウト シフトを最小限に抑える

レイアウト シフトを回避する唯一の確実な方法は、CSS を使用して、特定の広告スロットに十分なスペースを確保することです。これを行うには、広告スロット div に固定の高さと幅を直接設定するのが最も効果的です。静的な固定サイズの広告スロットではうまく機能しますが、より複雑なシナリオでは、より細やかなアプローチが必要になる場合があります。以降のセクションでは、いくつかの一般的なシナリオについて説明します。

複数サイズの広告スロット

複数のサイズを受け入れる広告スロットでは、次のいずれかの方法をおすすめします。

  • 配信用に設定された最大サイズのスペースを予約します。
  • 配信用に設定された最小サイズのスペースを予約します。
  • 配信の可能性が最も高いサイズの広告スペースを確保します。このサイズは、Google アド マネージャーのレポートに基づく過去の広告掲載データをもとに決定されます。

適切なアプローチの選択

レイアウト シフトをなくすには、配信するように設定された最大サイズのスペースを予約するのが最も効果的な方法です。ただし、この方法では、予約されたサイズよりも小さいクリエイティブが配信された場合に、広告の周囲に空白のスペースが生じることがあります。配信されたクリエイティブのサイズに合わせて広告スロットを縮小すると、レイアウトの移動が余計に発生するため、このような調整は避けることをおすすめします。代わりに、垂直方向と水平方向のセンタリングを使用すると、空白の余分なスペースがもたらす視覚的な影響を軽減できます。

一方、配信対象として設定された最小サイズ用にスペースを予約すると、広告の周囲に余分な空白が生じるのを回避できます。この方法は、広告スロットに比較的小さなクリエイティブが多く配置されている場合や、広告スロットがサポートするすべてのサイズが類似している場合に適しています。ただし、この方法では、予約されたサイズより大きいクリエイティブが配信された場合にレイアウト シフトが発生します（ただし、そのようなシフトは通常、スペースを一切予約しない場合と比べて小さくなります）。

空白とレイアウト シフトのバランスを取るには、広告スロットに「平均」のスペースを予約します。たとえば、100px を垂直方向に予約すると、320x50 クリエイティブが配信されるときに空白スペースが少し発生しますが、スペースを一切確保しない場合に比べて CLS スコアは減少します。さまざまなサイズでテストして、サイトに最適なバランスを見つける必要があります。

特定のスロット用に予約するスペースの量を決定する際は、Google アド マネージャーのレポートで過去の広告掲載データを調べると、十分な情報に基づいて決定を下すことができます。これは、いくつかの例を見ることでわかりやすく説明できます。

例 #1
クリエイティブ サイズ（配信済み） 広告サーバーのインプレッション（%）
300x250 70%
320x50 30%

この場合、250px を縦向きに予約すると、配信されるクリエイティブの大部分が 300x250 になるため、CLS が大幅に削減される可能性があります。

例 #2
クリエイティブ サイズ（配信済み） 広告サーバーのインプレッション（%）
970x90 60%
728x90 10%
320x50 20%
728x250 5%
300x250 5%

この場合、大部分の広告の高さは最大で 90px になるため、90px を縦向きにすると、ほとんどの場合はレイアウト シフトを回避できます。

スペースを予約する方法

この問題に対処するには、CSS プロパティ min-height と min-width で広告スロットのサイズを指定することをおすすめします。

<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 つの異なるポイントでレイアウトが変化することがあります。

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

  • 埋まってしまう可能性が高いスロットは、常に「展開」から始まります。
  • 埋まる可能性が低いスロットは、常に折りたたまれた状態から始める必要があります。

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

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