広告用のスペースを予約する

レイアウト シフトを最小限に抑えるには、ページに十分な広告スペースを確保することが重要です。この例では、スペースを予約するためのさまざまなアプローチと、それがレイアウトの安定性に与える影響を示します。

  • 予約されたスペースなし: 広告スロット コンテナのディメンションは指定されません。コンテナは、最初は折りたたまれた状態で始まり、広告が表示されると展開され、ユーザーに表示されるレイアウトが変化します。
  • 予約済みスペース: 広告スロット コンテナのサイズを指定します。コンテナは常にページ上の一定量のスペースを占有するため、レイアウトが移動することはありません。広告が読み込まれる前に空白スペースが表示されます。
  • プレースホルダで予約されたスペース: 広告スロット コンテナのサイズを指定します。コンテナはページ上の一定のスペースを占有するため、レイアウトは移動しません。広告が読み込まれる前に空白が見えないように、空のコンテナのスタイルを設定するために CSS を使用します。

実装例

デモを見る