尽量减少布局偏移

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

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

广告如何导致布局偏移

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

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

  1. 当调用 display() 时。槽位可以展开或收起，具体取决于其配置方式。
  2. 当广告内容呈现时。如果投放了自适应广告或空间不足，可能会调整广告位的尺寸。槽位也可能在此时展开或收起，具体取决于其配置方式。
  3. 广告内容呈现后。某些类型的广告素材设计为在显示在网页上之后展开。

请注意，广告位在视口内的位置越高，可能被移动的内容就越多。请特别注意靠近初始视口顶部（首屏）的广告位。这些广告位可能会导致布局偏移不成比例，因为它们在广告内容加载时更有可能可见。

测量布局偏移

Cumulative Layout Shift (CLS) 是一项核心网页指标指标，可用于在实验室和现场量化布局偏移对您网站的影响。

实验室

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

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

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

在实际使用中

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

尽可能减少布局偏移

避免布局偏移的唯一保证方法是，使用 CSS 为给定的广告位预留足够的空间。直接在广告位 div 上设置固定的高度和宽度是实现此目的的最有效方式。不过，虽然这种方法适用于静态的固定尺寸广告位，但更复杂的情况可能需要采用更精细的方法。以下各部分介绍了一些常见场景。

多尺寸广告位

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

  • 请为配置为投放的最大尺寸预留空间。
  • 请为配置为投放的最小尺寸预留空间。
  • 通过检查 Google Ad Manager 报表中的历史填充数据，确定为最有可能投放的尺寸预留空间。

选择合适的方法

若要避免布局偏移，最有效的方式是为配置的最大尺寸预留空间。不过，如果投放的广告素材小于预留尺寸，则此方法会在广告周围产生额外的空白区域。缩小广告位以匹配所投放广告素材的尺寸会导致布局偏移，因此建议不要这样做。 相反，垂直和水平居中可用于减少多余空白区域造成的视觉影响。

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

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

在确定要为指定广告位预留多少空间时，检查 Google Ad Manager 报表的历史填充数据有助于您做出更明智的决策。您可以参考一些示例，更好地说明这一点。

示例 1
广告素材尺寸（已投放） 广告服务器展示次数 (%)
300x250 70%
320x50 30%

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

示例 #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 尺寸。
  • 请尽早提取自适应槽，以最大限度地降低用户在调整槽大小之前将其滚动到用户视野范围内的可能性。

收起和展开广告位

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

如果您需要使用此功能，可以使用 Ad Manager 报告中的历史填充数据来实施以下最佳做法，以降低布局偏移的影响：

  • 可能填充的广告位应始终以展开状态开始。
  • 不太可能填充广告位的广告位应始终在开始时处于收起状态。

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

上一页
广告最佳做法
下一页
监控效果