广告与 Core Web Vitals 的平衡：异步加载与预留空间

引言：广告一加载正文跳下去

靠 AdSense 收入的站长最头疼：广告位没占位，加载瞬间把正文顶下去，CLS 爆表；广告脚本同步执行又拖 INP。要在收入和体验间找平衡。

原理分析：广告伤哪几个指标

• CLS：广告位无 min-height，加载后撑开。
• INP：广告脚本（尤其含重定向、轮播）占主线程。
• LCP：首屏大广告若阻塞，延迟主内容绘制。
  关键思路：广告异步、占位固定、首屏广告延后、非首屏广告懒加载。

保姆级实操

给广告位固定占位：

.ad-slot { min-height: 280px; width: 100%; background:#f5f5f5; }

AdSense 用异步脚本（官方默认已是 async）：

<ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-xxx"
  data-ad-slot="123" data-ad-format="auto"></ins>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

首屏广告延迟到 load 后：

window.addEventListener('load', () => {
  // 仅加载首屏下方的广告
  document.querySelectorAll('.ad-below').forEach(el => (window.adsbygoogle = window.adsbygoogle || []).push({}));
});

常见踩坑

1. 广告位无 min-height，CLS 直接 0.3+。
2. 首屏塞三个大广告，LCP 被广告抢。
3. 案例：某站 CLS 0.28 全因文章内广告。统一加 min-height 并把首屏广告移到第二屏后，CLS 降到 0.07，收入仅降 4%。
4. 同步加载第三方广告网络，INP 崩。
5. 广告刷新频繁，反复 CLS。

总结

判断标准：广告不导致 CLS>0.1、首屏广告不抢 LCP。行动清单：广告位固定尺寸 → 异步脚本 → 首屏广告延后 → 非首屏懒加载 → 复测。详见CLS 布局偏移修复。