尽量减少布局偏移

当页面上可见元素的位置或大小发生变化，从而影响其周围内容的位置时，就会发生布局偏移。有时，这种转换是预期的，例如当容器因用户操作而展开时。不过，广告的动态特性可能会导致布局意外偏移，这会对用户体验产生负面影响，并可能导致严重的可用性问题。

本指南介绍了在使用 Google 发布商代码 (GPT) 时如何衡量和最大限度地减少布局偏移。

广告如何导致布局偏移

系统通常会异步请求广告，并在网页加载期间或加载后动态向网页添加内容。在提取广告时，网页的其余部分会继续加载，并且非广告内容可能会向用户显示。如果您未为正在加载的广告预留足够的空间，那么当广告最终添加到网页中时，它们可能会取代可见的非广告内容。

使用 Google 发布商代码时，在广告生命周期中的以下时间点可能会发生布局偏移：

1. 调用 display() 时。槽可能会展开或收起，具体取决于其配置方式。
2. 当广告内容呈现时。如果投放的是流式广告，或者可用空间不足，系统可能会调整广告位大小。此时，槽也可能会展开或收起，具体取决于其配置方式。
3. 广告内容呈现后。某些类型的广告素材会在网页上显示后展开。

请注意，广告位在视口中的位置越高，就越有可能替换掉更多内容。请特别注意靠近初始视口顶部（折叠线上方）的广告位。这些槽可能会导致不成比例的布局偏移，因为它们在广告内容加载时更有可能显示。

衡量布局偏移

累积布局偏移 (CLS) 是一项 Core Web Vitals 指标，可用于量化布局偏移对网站的影响（在实验室和现场）。

实验室

实验室工具以合成方式衡量 CLS。这意味着，它们不依赖于真实的用户互动，因此非常适合在持续集成和本地开发工作流中使用。不过，这些工具通常只会衡量网页加载期间的性能，并且可模拟的条件有限，因此报告的值可能会低于真实用户的体验。

Lighthouse 发布商广告评估服务是一款工具，可用于衡量归因于 GPT 广告的 CLS。如需了解详情，请参阅减少与广告相关的布局偏移审核文档。

您还可以将 Chrome 开发者工具配置为在您浏览网站时突出显示布局偏移。这可用于手动识别网页上广告位附近发生的布局偏移。

在现场

现场工具会衡量真实用户与您的网站互动时所体验的 CLS。此过程通常称为“实时用户监控”(RUM)。通过 RUM，您可以观察 CLS 对真实因素（例如设备功能、网络条件、用户互动和页面个性化）的影响，而实际因素通常很难或无法通过合成测试来模拟。

尽可能减少布局偏移

要想确保避免布局偏移，唯一可靠的方法是使用 CSS 为给定广告展示位置预留足够的空间。要做到这一点，最有效的方法是直接在广告位 div 上设置固定的高度和宽度。不过，虽然这种方法对于静态固定大小的广告展示位置非常适用，但对于更复杂的情况，可能需要采用更细致的方法。以下各部分介绍了一些常见场景。

多尺寸广告位

对于接受多种尺寸的广告位，我们建议您采用以下方法之一：

• 为配置为可投放的最大尺寸预留空间。
• 为配置为投放的最小尺寸预留空间。
• 为最有可能投放的尺寸预留空间，具体取决于通过查看 Google Ad Manager 报告中的历史填充数据而确定。

选择合适的方法

为配置为投放的最大尺寸预留空间是消除布局偏移的最有效方法。不过，如果投放的是小于预留尺寸的广告素材，此方法可能会导致广告周围出现额外的空白空间。缩小广告位以匹配投放的广告素材的尺寸会导致额外的布局偏移，因此建议避免这样做。不过，您可以使用垂直和水平居中来减少多余空白对视觉的影响。

另一方面，为配置的最小尺寸预留空间可以避免广告周围出现多余的空白。如果您的广告位通常填充较小的广告素材，或者广告位支持的所有尺寸都相似，这可能是一个不错的选择。不过，在投放大于预留尺寸的广告素材时，此方法会导致布局偏移（尽管与完全不预留空间相比，此类偏移通常会更小）。

为了在空白区域和布局偏移之间取得平衡，您可以为广告位预留“平均”空间量。例如，垂直预留 100px 会在投放 320x50 广告素材时产生一点空白空间，但与完全不预留空间相比，CLS 得分会降低。您需要尝试不同的大小，以便为自己的网站找到最佳平衡点。

在确定为给定广告位预留多少空间时，查看 Google Ad Manager 报告中的历史填充数据有助于您做出更明智的决策。我们可以通过一些示例来加深对此的理解。

示例 1

在这种情况下，垂直预留 250px 可以显著降低 CLS，因为投放的大部分广告素材都是 300x250。

示例 #2

在这种情况下，大多数广告的高度至多为 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 大小用于折叠下方的槽。
• 尽早提取流体广告位，以最大限度地降低用户在广告位调整大小之前滚动到广告位中查看的几率。

收起和展开广告位

借助 collapseEmptyDivs() 方法，您可以收起广告位 div，这样在没有广告内容可显示时，它们就不会占用网页上的空间。不过，请谨慎使用此功能，因为它可能会导致意外的布局偏移。如前文所述，收起和展开广告位可能会导致布局在广告生命周期中的两个不同阶段发生布局偏移。

如果您需要使用此功能，可以使用 Ad Manager 报告中的历史填充数据来实现以下最佳实践，从而减少布局偏移的影响：

• 可能填充的广告位应始终处于展开状态。
• 不太可能填充的广告位始终应处于合拢状态。

如需查看示例实现，请参阅收起空广告位示例。