发布时间:2025 年 9 月 22 日;上次更新时间:2026 年 1 月 7 日
对于用户而言,最令人沮丧的事情莫过于网页突然变得非常缓慢、耗尽电池电量或用完每月流量。有时,罪魁祸首不是他们想看的内容,而是后台运行的广告。
为了保护用户体验,Chrome 会限制广告可使用的资源。当广告超出这些限制而成为重型广告时,Chrome 会卸载该广告以释放设备的资源。
本文档介绍了此干预措施的运作方式、涉及的具体阈值,以及一些可用于确保广告顺利投放的最佳实践。
什么是针对消耗过多资源的广告的干预措施?
重型广告干预是 Chrome 中的一种机制,用于监控广告框架的资源使用情况。如果某个广告消耗的带宽或 CPU 处理能力过多,Chrome 会卸载该特定广告框架。
用户将看到一个灰色框,其中包含一条消息,指出广告已移除,通常还会附带一个详情链接,说明该广告使用了过多的资源。
广告何时会被视为“过重”?
Chrome 会根据三个特定阈值来确定广告是否为重型广告。如果广告未被用户互动,但符合以下任一条件,则会被卸载:
- 网络使用情况:广告使用的网络带宽超过 4 兆字节。
- CPU 使用率峰值:广告在任何 30 秒的时间段内使用主线程的时间超过 15 秒。
- 总 CPU 用量:广告使用主线程的总时间超过 60 秒。 广告框架的任何后代 iframe 使用的所有资源都计入针对相应广告的干预措施的限制。
此干预措施有哪些常见触发条件?
与某些类型的广告行为相比,其他类型的广告行为更有可能触发这些干预措施。常见原因包括:
- 未压缩的媒体:加载极大的、压缩效果不佳的图片。
- 大量 JavaScript:使用 JavaScript 执行大量操作,例如解码视频文件。
- 繁重的计算:在后台执行复杂的计算。
- 不含手势的视频内容:在用户与广告互动之前加载大型视频文件。
移除广告后会发生什么情况?
当 Chrome 检测到广告超出重型广告阈值时,会立即采取行动来保护用户的设备资源。
用户体验
从用户的角度来看,广告会立即卸载。Chrome 会显示一个带有“广告已移除”消息的灰色框,以代替广告。如果用户点击容器中的详情,则会看到具体说明。
开发者体验
Chrome 还会使用 Reporting API 生成干预报告,以便您确切了解发生了什么情况。以前,这些报告仅发送到广告框架本身及其后代框架。不过,发布商通常无法得知自己网页上的广告已被移除。为解决此问题,Chrome 扩展了报告机制。除了广告框架本身之外,干预报告现在还会发送到嵌入框架(根广告框架的父框架)。发送到嵌入框架的报告包含子框架的 ID 和广告框架网址。
如需为 HTTP 报告配置网页,响应应包含 Report-To 标头:
Reporting-Endpoints: default="https://example.com/reports"
触发的 POST 请求将包含如下报告:
POST /reports HTTP/1.1
Host: example.com
…
Content-Type: application/report
[{
"type": "intervention",
"age": 60,
"url": "https://example.com/url/of/ad.html",
"body": {
"sourceFile": null,
"lineNumber": null,
"columnNumber": null,
"id": "HeavyAdIntervention",
"message": "Ad was removed because its CPU usage exceeded the limit. See https://www.chromestatus.com/feature/4800491902992384?utm_source=devtools"
}
}]
嵌入框架将收到类似报告,该报告的收件人为嵌入框架网址,但消息还会包含子框架的 ID 和子框架的具体网址:
...
"message": "Ad was removed because its CPU usage exceeded the limit. See https://www.chromestatus.com/feature/4800491902992384?utm_source=devtools (id=123;url=http://example2.com/pre-redirect-ad-url.html)"
...
JavaScript API 为 ReportingObserver 提供了一个 observe() 方法,该方法可用于触发干预措施的指定回调。如果您想向报告附加其他信息以帮助调试,这会很有用。
// callback that will handle intervention reports
function sendReports(reports) {
for (let report of reports) {
// Log the `report` json using your own reporting process
navigator.sendBeacon('https://report.example/your-endpoint', report);
}
}
// create the observer with the callback
const observer = new ReportingObserver(
(reports, observer) => {
sendReports(reports);
},
{ buffered: true }
);
// start watching for interventions
observer.observe();
由于干预会卸载 iframe 网页(例如广告),因此请使用 pagehide 事件来确保报告回调在网页消失之前捕获干预报告。
window.addEventListener('pagehide', (event) => {
// pull all pending reports from the queue
let reports = observer.takeRecords();
sendReports(reports);
});
JavaScript 生成的 JSON 类似于 POST 请求中发送的 JSON:
[
{
type: 'intervention',
url: 'https://example.com/url/of/ad.html',
body: {
sourceFile: null,
lineNumber: null,
columnNumber: null,
id: 'HeavyAdIntervention',
message:
'Ad was removed because its network usage exceeded the limit. See https://www.chromestatus.com/feature/4800491902992384',
},
},
];
开发者最佳实践
为避免广告被归类为“占用大量资源的广告”,请考虑采用以下最佳实践:
- 要求用户与重型内容互动:干预标准适用于用户未与之互动的广告。如果用户点击或点按您的广告,则不再受资源限制的约束。对于视频或富媒体体验,请等待用户手势(例如“点击播放”)后再加载大型资源。
- 优化图片和视频:确保图片经过压缩,视频经过优化,适合在网络上展示。避免自动加载大型视频文件;而应使用轻量级占位符,直到用户互动时才加载。
- 审核 CPU 使用情况:触发持续布局和绘制的复杂动画或 JavaScript 操作可能会导致 CPU 使用率飙升。使用工具来识别代码中可能导致主线程长时间处于忙碌状态的瓶颈。
- 监控后代框架:请注意,资源计数包括广告 iframe 中的所有内容。如果您的广告加载了第三方跟踪像素或子框架,则其资源使用量会计入您的限制。
- 隔离非广告内容:将非广告内容框架分离到不同的网域或可识别的模式中,这样 过滤列表提供商的政策不太可能将这些网域或模式视为广告网域。
如何调试和诊断干预的原因?
若要有效排查并解决重度广告干预问题,您必须先了解 Chrome 的检测逻辑如何将内容识别为广告,然后使用内置的开发者工具来审核导致移除的具体资源触发器
Chrome 如何检测广告的存在?
Chrome 会通过将资源请求与过滤条件列表进行匹配来将内容标记为广告。检测逻辑适用于 iframe 中的内容。主网页框架永远不会被视为与广告相关,即使它包含广告脚本也是如此。请注意,即使 iframe 还加载了其他非广告内容,只要该 iframe 是从与过滤条件列表匹配的资源加载的,就会被视为广告。例如,在标记为广告的 iframe 中加载的视频播放器也可能会加载非广告内容。
如何验证广告检测?
作为开发者,您可以使用 Chrome 开发者工具直观地验证 Chrome 是否已成功将您的内容检测为广告。
- 突出显示广告框架:在“渲染”面板中,选择突出显示广告框架,系统会在屏幕上以红色突出显示检测到的广告框架。
- 元素注释:在“元素”面板中,检测到的广告 iframe 将在开头的
<iframe>标记旁边显示广告注释。 - 网络活动:在“网络”面板中,根据
Is ad-related布尔值过滤请求。 - 广告状态:在应用面板的帧部分下,带有广告标记的帧将包含
Ad Status属性。
如何诊断干预的原因?
Chrome 提供了一些工具,可用于审核和提升网页的质量和性能。在 Chrome 开发者工具中运行 Lighthouse,获取有关网页性能的报告。您还可以参阅 web.dev/fast 合集,详细了解网页指标。
网络用量
在 Chrome 开发者工具中打开网络面板,查看广告的整体网络活动。选中禁用缓存选项,以便在重复加载时获得一致的结果。
页面底部的转移价值将显示整个页面的转移金额。如需将请求限制为仅与广告相关的请求,请使用顶部的过滤条件输入框。
如果您找到了广告的初始请求(例如 iframe 的来源),请使用请求中的“发起者”标签页查看它触发的所有请求。
按大小对请求的总体列表进行排序,可以很好地发现过大的资源。常见原因包括未优化的图片和视频。
此外,按名称排序也是发现重复请求的好方法。触发干预措施的可能不是单个大型资源,而是大量重复请求,这些请求会逐渐超出限制。
CPU 使用率
开发者工具中的性能面板可帮助您诊断 CPU 使用率问题。打开“拍摄设置”菜单。使用 CPU 下拉菜单尽可能减慢 CPU 速度。与高端开发机器相比,CPU 干预措施更可能在低功耗设备上触发。
接下来,点击记录按钮即可开始记录活动。您可能需要尝试录制的时间和时长,因为加载长时间的轨迹可能需要相当长的时间。加载录制内容后,您可以使用顶部的时间轴选择录制内容的一部分。重点关注图表中以纯黄色、紫色或绿色表示的脚本、渲染和绘制区域。
性能面板中轨迹的摘要。
探索底部的 Bottom-Up、Call Tree 和 Event Log 标签页。按自用时间和总时间对这些列进行排序,有助于找出代码中的瓶颈。
在“自下而上”标签页中按“自用时间”排序。
相关联的源文件也会链接到此处,因此您可以点击该链接,在来源面板中查看每行的费用。
这里要查找的常见问题是触发持续布局和绘制的优化不佳的动画,或隐藏在包含的库中的代价高昂的操作。
如何报告不正确的干预措施?
如果非广告内容被标记为广告,请考虑更改代码以避免与过滤规则匹配,或直接与 EasyList 维护人员联系以更改过滤规则。请注意,重广告干预措施不会影响包含用户手势的帧,因此可以通过要求用户点击播放按钮才能加载内容来排除视频。如果 EasyList 与您的内容不匹配,并且 Chrome 错误地将该内容归类为与广告相关,那么您可以使用此模板向 Chrome 提出问题。提出问题时,请附上干预报告的捕获示例以及用于重现问题的示例网址。