你刚接了 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” 状态的页面立即处理。