这是关于 AMP 如何构建 以用户体验为先的网络广告生态系统 的故事。
我在 AMP 项目中工作的一个重要部分是参与 Twitter 和 GitHub 中关于 AMP 是什么、它应该是什么以及它是否在做正确的事情的讨论。通常,这些讨论最终会达到某人说
“很酷,你让内容加载得更快了,但广告怎么办?它们不是页面加载时间最糟糕的罪魁祸首吗?”
AMP 的最初目标是提升尽可能多的网络内容的用户体验。这意味着我们不能仅仅构建一个理想主义的系统——现有的获利方法需要得到支持,以便获得广泛采用,从而带来广泛的用户体验改进。在当今网络上,这意味着:AMP 必须支持广告。
在我从事 AMP 的最初几个月里,我了解了很多关于互联网广告的信息,其中之一是网络广告行业并没有真正快速变化。事实上,在网络上查看大量与广告相关的 JavaScript 时,人们不可避免地会频繁地回忆起 90 年代。
这导致了 AMP 中的设计折衷:支持传统网络广告,但以一种减轻其嵌入页面影响的方式来进行。为了实现这一目标,AMP 使用以下技术
- 内容优先。 AMP 在其余内容加载后加载广告,因此广告永远不会减慢加载时间。
- 包含。 AMP 严格管理广告可以访问和控制的页面区域,使其成为一个定义明确的矩形。除其他事项外,这避免了广告弹出时页面“四处跳动”。
- 缓解。 AMP 通过限制其对广告本身的影响(而不是整个页面),来缓解广告技术中经常发现的各种 JavaScript 最差做法,例如 `document.write`。
- 干预。AMP 会减慢计时器,例如用于当前不可见的广告的动画,以便广告在不被看到时使用更少的电池和 CPU。Firefox、Safari、Opera 和 Chrome 最近已开始默认执行此操作,当更多用户使用此功能时,我们很乐意删除 代码。因为在 AMP 中,所有旧版广告都在 iframe 中运行(AMP 之外的许多广告都可以访问主机页面),所以这些新的浏览器干预在 AMP 中效果特别好。
这些措施与 AMP 对一般网络内容的激进优化相结合,显著改善了页面加载时间,并减轻了广告对用户体验的影响。特别是,内容始终优先加载这一事实保证了广告绝不会妨碍用户在给定页面上执行他们想要执行的操作。
但是,到目前为止我们采取的方法所能实现的保真度是有极限的。这从显而易见的事情开始:将广告加载延迟到内容加载之后可能是一种可以接受的折衷方案,但它远非人们可以采用的一种最佳策略,因为这种策略对广告的生命周期控制得不够精细。但 AMP 到目前为止尚未解决的最大问题是我们所说的协调问题。
协调问题

网络最大的优势之一是它具有一个超级灵活的组合模型。这允许轻松地临时组合 YouTube 视频、Instagram、推文和广告等内容,并将其组合到单个页面上。但是,虽然组合很简单,但所有这些组件都共享一个线程用于 JavaScript 计算和大多数 UI 操作。这就是协调问题发挥作用的地方:虽然每个组件在隔离的情况下可能工作得非常好,但当它们组合在一起时,事情很容易恶化,导致糟糕的 UX。
这是广告中经常出现的问题。例如,很容易设想 3 个广告,每个广告每帧使用 6 毫秒的 CPU 来进行动画。这本身很好——很容易保持在帧预算内,以实现每秒 60 帧(或总帧时间 16 毫秒)。但是,当这些广告同时出现在同一页面上时,它们突然每帧需要 18 毫秒,浏览器便无法再提供每秒 60 帧的流畅体验。
这就是协调问题:即使是设计完美的广告,在汇总时也可能对用户体验产生负面影响。
最后,即使忽略以上内容,也可以做很多事情来提高广告创意的整体质量,从而影响用户体验。AMP 最初创建为在网络上创建高性能文档的简单途径,现在看来,对于网络广告来说,做出同样的飞跃将是一件很棒的事情。
推出用于广告的 AMP
今年早些时候,Google 的一个团队自问了一个问题
“AMP 对一般内容非常有效。我们不能直接用它来做广告吗?”
…他们就是这样做的。这些基于 AMP 的广告本身就是正常有效的 AMP 文档,恰好是广告创意。我对此感到非常兴奋,因为它提供了一条解决上述所有技术挑战的途径,使我们能够在互联网上建立一个技术更健康的广告生态系统。
用于广告的 AMP 或 A4A 还处于早期阶段,但几周前在 GitHub 上宣布了这项工作后,该团队已合并了他们的拉取请求到 AMP 中,并正在进行设置现场实验。AMP 本身将继续支持非 AMP 广告创意,以便更广泛的生态系统能够逐步过渡。
将广告请求与广告呈现分开
回顾起来,A4A 的第一个创新似乎非常明显,但影响却非常大:如上所述,AMP 默认情况下在内容之后加载广告,并且通常是懒惰的。这是因为渲染广告在 CPU 和 RAM 方面可能非常昂贵。但是,广告请求本身可能会很慢,因为服务器端必须完成大量工作(想想:拍卖)——在后期执行不利于快速加载时间。从客户端的角度来看,发出请求本身非常便宜,但它的副作用(广告的呈现)却很昂贵。通过将两者分开,A4A 以无额外 CPU 和内存成本实现了更快的广告呈现。
深入了解:AMP 的受限子集
AMP 的核心元素之一是它附带一个验证器,用于检查 AMP 文档是否符合某些规则。其理念是:如果符合规则,则文档将快速加载。我们为 AMP 设计的规则集考虑了广泛的文档类型和用例。另一方面,广告创意是一个更集中的用例,因此它们实际上不需要 AMP 提供的全部功能。出于此原因,AMP for ads 仔细挑选了构建广告创意所需的 AMP 方面。一个示例是,基于 AMP 的广告将不被允许加载带有任意 JavaScript 的 iframe。
将此与广告技术中的现状进行对比:广告创意通常对浏览器拥有完全控制权,并且它们可以在运行时动态加载更多代码,因此不可能真正知道它们将做什么。另一方面,基于 AMP 的创意将具有定义明确、可静态分析的行为,同时仍能访问绝大多数 Web 平台功能。
AMP 目前针对文档进行了优化,肯定缺少参与广告所需的许多类型的组件。该团队正在努力缩小该功能差距。一个示例是,AMP for ads 将附带一个用于流畅且交互式基于时间线的动画的组件。
重新使用 AMP
广告通常附带自己的测量工具集,以收集重要信息,例如用户是否实际看到广告。这会大幅增加广告有效载荷大小、初始编译和执行时间、电池使用情况以及运行时性能的其他方面。
AMP 通过其已建立的`amp-analytics`机制,已经附带了执行这些测量的所有代码。它是供应商中立的,并支持广泛的指标。这意味着广告可以利用与当今 AMP 页面受益的相同“一次仪表,多次报告”功能,从而完全消除上面概述的带宽和运行时成本。
协调解决方案
基于 AMP 的广告将像所有其他 AMP 资源一样参与页面布局。这意味着它们自动利用 AMP 的功能来最大程度地减少资源对运行时性能的影响。
特别是,AMP 仅对屏幕上可见的内容进行动画处理。句号。虽然浏览器正在努力在平台级别实现这一点,但它们需要保守,以免破坏现有用例。AMP for ads 作为一项新颖且用途特殊的技术,可以精确定位何时需要动画,从而进一步降低 CPU 使用率和电池消耗。
AMP 将作为广告的监管者,确保广告不会对页面上的主要内容产生负面影响。当 AMP 检测到当前设备无法达到每秒 60 帧时,基于 A4A 的动画将被限制为较低但统一的帧率。同样,如果 AMP 无法稳定帧率,它将关闭动画。这确保了每台设备都能获得它所能提供的最佳体验,并确保广告不会对用户体验的重要方面(例如滚动)产生负面影响。
跨平台
作为 AMP 项目的一部分,AMP for ads 是一个供应商中立的计划。虽然我们仍处于早期实验和实施阶段,但该技术旨在支持所有广告网络。如果您从事广告技术,请在 GitHub 上打个招呼。我们相信 A4A 是用户体验向前迈出的一大步,并希望看到它在互联网广告行业得到广泛采用。
因此,这就是我们对广告所做的事情
现在还处于早期阶段,我们刚刚开始探索将 AMP 用于广告。
在未来
- 广告将可进行静态分析,以确保安全且行为良好,
- 它们将能够使用一组通用的功能来显著减少带宽消耗,
- CPU 使用将限制在屏幕上的广告,最大程度地延长电池续航时间,
- 广告将与页面协调,确保主要内容和功能始终以每秒 60 帧的速度流畅运行。
我们正在尝试构建一个以用户体验为先的网络广告生态系统,并且,鉴于 AMP 在发布方面的成功,它可能会奏效。
这篇文章最初发表于 Medium 由 AMP 项目的技术负责人 Malte Ubl 撰写。