当网页上的可见元素更改位置或大小，从而影响其周围内容的位置时，就会发生布局偏移。有时，这种转换是预期的，例如当容器因用户操作而展开时。不过，广告的动态特性可能会导致意外的布局偏移，这会对用户体验产生负面影响，并可能导致严重的可用性问题。
本指南介绍了在使用 Google 发布商代码 (GPT) 时如何衡量和最大限度地减少布局偏移。
广告如何导致布局偏移
系统通常会异步请求广告，并在网页加载期间或加载后动态向网页添加内容。在提取广告时，网页的其余部分会继续加载，并且非广告内容可能会向用户显示。如果您未为正在加载的广告预留足够的空间，那么当广告最终添加到网页中时，它们可能会取代可见的非广告内容。
使用 Google 发布商代码时，广告生命周期中有几个位置可能会发生布局偏移：
- 调用
display()时。槽可能会展开或收起，具体取决于其配置方式。 - 广告内容呈现时。如果投放的是流式广告，或者可用空间不足，系统可能会调整广告位大小。此时，槽也可能会展开或收起，具体取决于其配置方式。
- 广告内容呈现后。某些类型的广告素材会在页面上显示后展开。
请注意，广告位在视口中的高度越高，就越有可能取代更多内容。请特别注意靠近初始视口顶部（折叠线上方）的广告位。这些槽可能会导致不成比例的布局偏移，因为它们在广告内容加载时更有可能显示。
衡量布局偏移
累积布局偏移 (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
| 广告素材尺寸（已投放） | 广告服务器展示次数 (%) |
|---|---|
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，以便在没有要显示的广告内容时，这些 div 不会占用网页上的空间。不过，请谨慎使用此功能，因为它可能会导致意外的布局偏移。如上一部分中所述，收起和展开广告位可能会导致广告生命周期的两个不同时间点出现布局偏移。
如果您需要使用此功能，可以使用 Ad Manager 报告中的历史填充数据来实现以下最佳实践，从而减少布局偏移的影响：
- 可能填充的广告位应始终处于展开状态。
- 不太可能填充的广告位始终应处于合拢状态。
如需查看示例实现，请参阅收起空广告位示例。