广告位必须用data-src+intersectionobserver延迟加载，禁用loading="lazy"；需预留尺寸防cls，iframe设sandbox隔离，并手动触发sdk刷新。
广告位必须延迟加载，否则首屏性能直接崩——但不能简单套用 loading="lazy"，它对广告 iframe 无效，且容易触发重复请求或布局抖动。
为什么 loading="lazy" 对广告 iframe 基本没用
原生 loading="lazy" 在 Safari 15.4+ 才开始支持 <iframe></iframe>，而绝大多数广告 SDK（如 Google Ad Manager、腾讯广点通）返回的 iframe 是动态插入的，浏览器根本不会识别其 loading 属性。更关键的是：广告 iframe 通常带跨域 src，一旦写死就可能被预加载或提前触发请求，造成带宽浪费甚至触发反爬风控。
常见错误现象：<iframe src="https://ad.example.com/..." loading="lazy"></iframe> 在 Chrome DevTools Network 面板里仍显示 Priority: high，且页面一打开就发请求——loading="lazy" 被完全忽略。
- 只对静态、HTML 中直接书写的
<iframe></iframe>生效，不适用于 JS 动态创建或 SDK 插入的广告 - 旧版安卓 WebView、部分 iOS 微信内置浏览器会直接忽略该属性，广告照常加载
- 若同时设置
src和监听 IntersectionObserver，浏览器可能先加载src，再执行 JS 替换，导致两次请求
用 data-src + IntersectionObserver 控制广告真实加载时机
这是目前最可控、兼容性最好、且能配合广告计费逻辑的方案：先占位，等进入视口（或滚动到指定距离）再注入真实 src，并触发广告 SDK 的刷新逻辑。
实操要点：
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 广告容器用
<div class="ad-slot" data-ad-type="banner" data-ad-unit="/123/home_top"></div>，不写iframe，也不设src - 监听时用
threshold: 0.2（20% 可见即触发），避免用户快滑过去却没加载 - 触发后手动创建
iframe并设sandbox="allow-scripts allow-popups"，防止广告脚本污染主页面 - 加载完成后调用广告 SDK 的
refresh()或display()方法（如 GAM 的googletag.pubads().refresh()）
示例片段：
const adObserver = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const slot = entry.target;
const iframe = document.createElement('iframe');
iframe.src = slot.dataset.adSrc || `https://securepubads.g.doubleclick.net/tag/js/gpt.js?...`;
iframe.sandbox = 'allow-scripts allow-popups';
slot.appendChild(iframe);
// 触发广告 SDK 刷新逻辑
if (window.googletag && window.googletag.apiReady) {
googletag.pubads().refresh([slot]);
}
adObserver.unobserve(slot);
}
});
}, { threshold: 0.2 });
广告延迟加载必须配合尺寸预留和 CSS 隔离
广告 iframe 加载前若无固定高宽，会导致严重布局偏移（CLS），直接拉低 Core Web Vitals 分数。这不是“看起来有点跳”，而是 Google 搜索排名的硬性扣分项。
- 所有广告容器必须显式设置
width和height（推荐用 CSSaspect-ratio或 padding-top 百分比占位） - 用
position: relative包裹广告容器，内部iframe设为position: absolute; top: 0; left: 0; width: 100%; height: 100%，避免撑开父容器 - 禁止在广告区域使用
min-height或flex: 1等弹性值，它们无法阻止加载后的重排 - 广告 CSS 必须独立作用域，避免被全局样式（如
* { box-sizing: border-box }）意外影响尺寸计算
第三方广告 SDK 自带的延迟机制别盲目信任
像 Google Ad Manager 提供的 data-loading="lazy"（非 HTML 原生属性）或 setLazyLoad() 方法，底层仍是基于 IntersectionObserver，但默认阈值保守（常为 0.5）、不支持自定义 sandbox、且与你页面的滚动监听器可能冲突。
- 检查 SDK 文档是否明确说明支持“viewport-relative lazy load”而非仅“scroll-triggered”
- 在 Chrome DevTools 的 Rendering 面板开启 “Layout Shift Regions”，滚动时看广告位是否真没提前渲染
- 若广告出现在折叠屏或小屏设备上（如 iPhone SE），确认其
threshold是否仍适用——默认 1250px 触发距离在小屏下可能永远不满足 - 某些 SDK（如百度网盟）会在 DOM Ready 后自动加载所有广告，此时必须手动禁用：
bdPass.config({ lazyLoad: true })并配合自己的 observer 控制
真正可靠的延迟加载，不是靠一个属性开关，而是你清楚知道每个广告在哪一刻、以什么方式、在什么约束下被注入。尺寸、sandbox、observer 阈值、SDK 刷新时机——漏掉任意一环，都可能让优化变成负优化。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
