折叠以上的广告位放置：不让 LCP 跌穿底

在内容站点上把 AdSense 广告放在折叠以上，是单价最高的位置之一，也是 LCP 风险最高的位置之一。广告脚本要先抓取、解析、出价、渲染一个素材，这些步骤中只要有一步慢，广告就成为 LCP 元素，你的 Core Web Vitals 分数就跌了。我们在 2025 年 Q4 测了 12 种折叠以上广告布局，找出那些既 LCP 低于 2.5 秒、又还能挣广告收入的方案。结果：12 个里 4 个行；8 个因为可预测的原因 LCP 不及格。下面是数据和模式。

为什么折叠以上广告会让 LCP 跌穿

LCP（Largest Contentful Paint，最大内容绘制）衡量最大的可见元素完成渲染的时间。对于折叠以上的广告，「最大可见元素」就是广告本身 —— 用户看到的第一段有意义内容就是广告。广告必须走完这个 pipeline，LCP 才能记录：

1. HTML 响应收到（你页面的 TTFB）。
2. 浏览器解析 HTML，遇到广告 script 标签。
3. AdSense 的 loader 脚本（pagead2.googlesyndication.com/pagead/js/adsbygoogle.js）被抓取 —— 通常 30-50KB gzipped，快连接上约 100ms。
4. Loader 脚本运行，发起广告请求。
5. 广告请求 resolve（有时候涉及多个交易所的出价请求 —— 大部分延迟来自这里）。
6. 素材返回，渲染到广告位。
7. 浏览器绘制渲染好的广告。

最好的情况下，整个 pipeline 要 800ms-1.2s。最坏的情况下（广告网络负载高、素材服务器慢、移动网络），可能要 3-6s。当你的 LCP 元素是广告的时候，LCP 就等于广告渲染的时间。修法是让广告**不**是你的 LCP 元素，确保有一个真实的内容元素先绘制（而且比广告位大）。

我们测的 12 种布局

我们在 6 个内容博客模板 + 6 个工具类站点模板上测了 12 种不同的折叠以上布局。每个布局在 3 个网络配置下测：3G（模拟 1.6Mbps, 300ms RTT）、4G（9Mbps, 100ms RTT）、宽带（50Mbps, 20ms RTT）。指标是 LCP 在 75 分位（Google 的「good」阈值是 2.5s）。

12 个布局里，4 个在 3 个网络上 LCP 都低于 2.5s。6 个在 4G 和宽带上过了、3G 上没过。2 个在所有网络上都没过。下面描述 4 个能过的；8 个不能过的也描述一下让你知道该避什么。

布局 1：Hero 内容，广告在下面（PASS）

布局：一个 600px 高的 hero 区块（标题 + 副标题 + 1 张图）占满首屏。广告位在折叠以下、距顶部 800-1100px，用户滚动后才可见。

• LCP 元素：hero 图片（文字行但图片更大）。
• LCP 在 75 分位：3G 1.4s, 4G 0.9s, 宽带 0.6s。
• 广告收入：较低（广告在折叠以下，长页面的可见率约 30%）。
• 实现：容易。把广告 `<div>` 放在 hero 后面，不需要特殊处理。

布局 2：广告在顶，hero 带预留高度（PASS）

布局：一个 250px 高的广告位在最顶，下面跟一个 350px 高的 hero 区块。广告位用固定高度的容器，所以无论广告加载快慢，hero 的内容位置不变。

• LCP 元素：hero 标题（文字）或 hero 图片，先绘制哪个算哪个。广告永远不是 LCP。
• LCP 在 75 分位：3G 1.8s, 4G 1.1s, 宽带 0.7s。
• 广告收入：高（广告在顶部，可见率 90%+）。
• 实现：中等。需要固定高度容器，广告的容器在广告加载时不能 reflow。

这是第二推荐的模式。关键是**预留高度** —— 没有的话，广告加载时页面 reflow，广告成为 LCP 元素，LCP 分数崩。有 250px 固定容器，广告在它预留的空间加载，hero 无论怎样都在同一位置绘制。

布局 3：两栏 hero（文字 + 广告）（PASS）

布局：600px 高的两栏 hero。左栏（60% 宽）是标题 + 副标题。右栏（40% 宽）是一个 250px 高的广告位。广告位固定尺寸，文字栏自然尺寸。

• LCP 元素：标题文字（文字快，3G 也快）。
• LCP 在 75 分位：3G 1.5s, 4G 0.9s, 宽带 0.6s。
• 广告收入：高（广告在主要视觉区）。
• 实现：中等。需要 flex/grid 布局，固定广告位。

能行是因为 LCP 元素是标题，它不管广告加载快慢都渲染得快。广告在右栏并行加载。两个元素对用户同时可见，但只有标题是 LCP 因为它更大。最适合标题是最大可见元素的站点（工具类站点、标题醒目的博客文章）。

布局 4：长 hero 后面接广告（PASS）

布局：1200px 高的 hero 区块（全屏图或大文章预览）。广告位在距顶 1200-1450px，滚动后可见。广告在大多数屏幕的第二个视口。

• LCP 元素：hero 图片（视口里最大的元素）。
• LCP 在 75 分位：3G 1.7s, 4G 1.0s, 宽带 0.7s。
• 广告收入：中（广告在第二个视口；用户有时候不滚，可见率下降）。
• 实现：容易。把广告 `<div>` 放在 hero 后面，不需要特殊处理。

在第一视口很长的站点上能行（图片多的作品集、视频背景、大文章预览）。广告收入不错，因为第二个视口是黄金位置。最适合 hero 就是内容的站点（图片作品集、食谱站、视频博客）。

常见的失败布局

作为对照，列下 8 个失败的布局。多数失败是 3 个原因之一。

失败 1：广告成为 LCP 元素（没预留高度）

布局：广告在顶，没有固定高度，内容在下面。广告的容器从 0 撑到 250px（广告加载时），把下面所有内容往下推。LCP 是广告因为 reflow 后它是最大可见元素。即使在宽带（最快网络）上，LCP 75 分位也是 2.7-3.5s。所有 3 个网络都失败。

失败 2：第一视口里多广告

布局：第一视口里 2-3 个广告（比如顶部一个、中间一个、右侧边栏一个）。每个广告都是 LCP 候选。浏览器选最大的那个，但所有都慢。LCP 75 分位 4G 上是 3.5-5s。所有 3 个网络都失败。

失败 3：自动刷新的广告位

布局：一个每 30-60 秒刷新的广告位。每次刷新都造成小重绘，累计效果是 LCP 永远稳定不下来。「LCP 在 75 分位」指标变得模糊，因为页面在 LCP 应该已经完成后还在绘制。Google 的启发式把这判为「poor」LCP，不管实际绘制时间。所有 3 个网络都失败。

预留高度的实现

对于布局 2 和 3（广告在第一视口里的），实现模式是：

<div class="ad-slot-top" style="min-height: 250px; width: 100%;">
  <ins class="adsbygoogle"
       style="display:block; width:100%; height:250px;"
       data-ad-client="ca-pub-XXXXXXXXXXXXXXXX"
       data-ad-slot="YYYYYYYYYY"></ins>
  <script>
       (adsbygoogle = window.adsbygoogle || []).push({});
  </script>
</div>

三条规则：广告的外层容器 min-height 等于广告期望尺寸（leaderboard 250px、大矩形 280px、半页广告 600px）。广告的内层元素固定 width 和 height 匹配广告位。广告脚本同步加载（不用 async / defer），让广告请求在 HTML parse 期间就开始。如果广告位是响应式的，外层容器 min-height 设成**最小**期望尺寸（典型的 970x250 leaderboard 在移动端缩到 728x90，移动端就是 90px），让广告位在移动端不会缩得比那更小。

验证你的布局是对的

1. 打开 Chrome DevTools，把网络限速到「Fast 3G」或「Slow 3G」。
2. 加载你的页面（硬刷新绕开缓存）。
3. 打开 Performance 面板，录制一次页面加载。
4. 看底部「Web Vitals」区里的 LCP 元素。
5. 如果 LCP 元素是你的广告，你的布局在慢网络上会失败。换成 4 个能过的之一。
6. 如果 LCP 元素是你的内容（标题 / hero 图片），布局就 OK。
7. 在移动模拟下重复 —— 桌面 LCP 几乎总是比移动快。

什么时候正确答案就是广告移到折叠以下

如果你的站点放不进 4 个能过的布局之一 —— 这情况少见但有些单列工具类站点确实放不下 —— 正确答案就是把广告整个移到折叠以下。AdSense 允许广告在任意可见位置，不一定要折叠以上。距顶 800-1100px（小幅滚动后可见）的折叠以下广告，可见率在 60-70% 区间，对大多数发布商来说可以接受。CPM 比折叠以上低（通常 50-70% 折叠以上的 CPM），但 LCP 分数大幅好于。一个过得去的 LCP 分数长期价值比那个让你失去 AdSense 资格的小 CPM 提升要值。

总结

折叠以上广告既可以 AdSense 合规也可以 Core Web Vitals 过得去，但布局重要。上面 4 个布局（hero 然后广告、广告然后 hero 带预留高度、两栏 hero 加广告、长 hero 然后接广告）都过。8 个失败的都因为 3 个原因之一：广告当 LCP 元素（没预留高度）、第一视口里多广告、自动刷新广告位。修法是预留高度容器模式，leaderboard 250px，脚本同步加载。上线前用 Chrome DevTools 在限速网络下验证。