AdSense 拖慢页面:3 个原因 + 修复路径

接入 AdSense 后 PageSpeed 从 92 掉到 47、LCP 翻倍、CLS 飙到 0.35,大概率是 3-4 个具体接线问题而非广告本身。本文按命中率排出可修项,逐条给出代码改法。

你刚接了 AdSense,PageSpeed 分数从 92 掉到 47,LCP 翻倍,CLS 飙到 0.35。第一反应是想把广告整个关掉,但真实的损耗通常是 3-4 个可修的具体问题,不是”广告天生慢”。配置得当的 AdSense 大概只让 PageSpeed 降 5-10 分,不是 40 分。掉得更多,肯定是接线上有问题。

下面四个问题占了感知性能下降的大头。

常见原因

按命中率从高到低。

1. ad slot 没预留高度导致 CLS 飙升

最明显的问题。广告加载时把内容往下推,Lighthouse 记成 CLS。如果不提前给 slot 预留空间,每个广告都是一次布局位移事件。

怎么判断:PageSpeed Insights 看 CLS。> 0.1 就是这条。也可肉眼判断:滚动页面时,广告刚加载,文字跳了一下。

2. AdSense 脚本是渲染阻塞

如果你写的是 <script src="adsbygoogle.js"> 没加 async,浏览器会停在那里等脚本下完再解析 HTML。AdSense 的 CDN 在某些地区会慢几百毫秒,把 TTFB 到 LCP 的路径整个拖住。

怎么判断:查看源代码。AdSense script 标签必须有 async。没有就是这条。

3. 首屏广告单元太多

首屏放了 2 个 display + 1 个 anchor + 1 个 header = 4 个广告请求和你的 hero 图、CSS 抢带宽。LCP 因此变差。

怎么判断:PageSpeed → Diagnostics → “Avoid chaining critical requests” 和 “Reduce the impact of third-party code”。如果 pagead2.googlesyndication.com 出现在这里,就是首屏堆太多了。

4. Auto Ads 密度太高

Auto Ads 拉满密度时一页加 6-10 个 slot。每个都是一次网络请求 + 一次布局预留。累计起来主导了 JS 执行时间。

怎么判断:PageSpeed → “Third-party code blocked the main thread for X ms”。“Google/AdSense” 超过 500ms 就是密度问题。

5. CMP 延迟让 AdSense 拿不到个性化信号

接了 CMP(同意管理平台)的话,AdSense 要等用户做完同意决定才请求广告。某些 CMP 自身要 500-1000ms 加载,AdSense 再在它之上叠延迟。

怎么判断:DevTools → Performance 录一次。看页面加载到 adsbygoogle.js 真正执行之间有没有断档。> 500ms 就是 CMP 卡。

最短修复路径

第 1 步:给 AdSense 脚本加 async

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-XXXXXXXX" crossorigin="anonymous"></script>

async 必加。defer 也行,但 AdSense 文档要求的是 async

第 2 步:每个 slot 都预留空间

每个 <ins class="adsbygoogle"> 都套一个有明确尺寸的容器:

<div style="min-height: 280px; width: 100%; display: flex; justify-content: center;">
  <ins class="adsbygoogle"
       style="display:block; width: 300px; height: 250px;"
       data-ad-client="ca-pub-..."
       data-ad-slot="..."></ins>
</div>

min-height 取这个位置最常见的广告高度。响应式单元就取该位置可能投出的最大尺寸。

Auto Ads 没法预测尺寸——给每个 section 预留一个带宽:

.article-section { min-height: 100vh; }  /* 防止首屏外的广告把可见内容挤动 */

第 3 步:首屏只放 1-2 个广告

首屏 = 桌面前 600px,移动前 400px。1 个广告没问题,最多 2 个。其他都放到首屏外并给父容器加 loading="lazy"

Auto Ads 在 AdSense → Ads → Auto Ads → Page exclusions 里排除 header.hero 和正文的前 1/3。

第 4 步:首屏外用 loading="lazy"

<ins class="adsbygoogle" loading="lazy" ...></ins>

浏览器对 <iframe> 尊重这个属性(AdSense 内部就是 iframe),用户滚到附近时才请求。

第 5 步:优化 CMP 加载

如果用了 Google Funding Choices 或别的 CMP:

  • async 加载,不要阻塞。
  • 设最大等待超时(1500ms)之后回退到默认 UX。
  • 只面向一个地区的话,非 EEA 流量可以通过服务端地理头跳过 CMP——看你的平台支持。

第 6 步:真机测

PageSpeed Insights 用的是模拟硬件。改完用真机测:

  • 中端 Android 手机走 4G
  • 老款 iPad
  • Chrome DevTools 限速 (Slow 4G)

三个都 LCP < 2.5s、CLS < 0.1 就 OK 了。

预防建议

  • 接广告前后都测同一个页面的 CWV (LCP, CLS, INP)。
  • 每个新 slot 默认带一个跟最大可能尺寸匹配的 min-height 预留。
  • 全站首屏广告封顶 1-2 个,code review 强制。
  • 每个第三方脚本都加 async——同步加载基本不需要。
  • 每月看一次 Search Console → Core Web Vitals 报告,进 “Poor” 状态的页面立即处理。

相关阅读

标签: #AdSense #变现 #排查 #排查