Google 推出移动网页加速项目 AMP

  • 张天雷

2015 年 10 月 11 日

话题:Google语言 & 开发架构

网页性能一直是网站、用户以及相关团体所关心的问题。近些年来,如何提升网页性能吸引了很多工程人员和研究人员的关注。每年, 甚至都会有专门的会议来讨论该问题。然而,广大用户,尤其是移动客户端的用户,仍然会经常遇到网页加载速度过慢的情况。为了解决该问题,Google 近期联合数十家技术机构和企业等推出移动网页加速项目(Accelerated Mobile Pages, AMP)

在几个月之前,Google 就发起了关于如何改进移动网页内容生态系统的讨论。当前情况下,很多网页的加载速度都与复杂的 JavaScript 库、工具和插件等密切相关。一旦网页中插入了复杂的 JavaScript 脚本,网页的加载速度就很难保证。因此,即使网页中的文字内容能及时接收,也会因为网页中的图片、动画等耗时的传输和渲染过程而无法正常显示。于是,AMP 项目选择避开动态显示的部分,把目标集中到了静态内容。为了大大提高网页性能,AMP 项目严格限制了 HTML 中所能够使用的内容。在现有网页技术的基础上,该项目只使用了 HTML 中的一部分子集,使得 AMP HTML 文档(也就是网页)可以速度很快的运行在所有的现代浏览器中。

目前,AMP 项目仍然处于起步阶段。Google 在GitHub分享了项目的代码和文档,并在项目的官方网站讲解了其工作原理。首先,为了保证网页性能,AMP 的 HTML 文档不能包含任何作者自编的 JavaScript 或者第三方的脚本。为了提供与之前类似的用户感受,AMP 利用了网页组件自定义元素。通过提供统一的接口,AMP 的 HTML 文档能够在性能和展示内容上得以保证。

其次,AMP 针对广告和分析进行了专门处理。作为网站收入的主要来源,广告和分析是网页中不可避免的元素。但是,现在的广告和分析通常会插入复杂的内容,大大影响了网页加载的速度。针对网页分析,AMP HTML 允许不使用 JavaScript 的 tracking pixel 嵌入到到网页中。其基本思路为,通过一个统一、高性能、开源的分析库来为各种各样的分析供应商提供数据。这样,既可以保证分析工作照常进行,又保证了网页的性能。在广告方面,AMP 项目仍然在探索。由于 AMP HTML 不允许 JavaScript 运行,直接的广告嵌入就无法正常进行。项目团队提出利用沙盒化的 i- 帧的方法。此外,AMP HTML 还会在加载过程中降低广告的优先级,优先显示其他部分。

最后,AMP 文档采用了预渲染技术来加速显示。其实,浏览器一直支持通过<link rel=prerender>标签进行的预渲染工作。但是,对整个网页进行预渲染需要消耗大量时间。AMP 文档采用只预渲染第一屏及非计算密集型的内容的方法。这样,在很多情况下,AMP 文档都可以及时显示出第一屏的内容,为更多内容的显示争取机会和时间。

为了证明 AMP HTML 文档的性能,Google 以早期合作伙伴创建的页面为对象进行了测试。测试采用了模拟的 Nexus 5 设备和模拟的 3G 网络连接。结果表明,AMP HTML 文档能够取得 15%-85% 的速度提升。Guardian News&Media 的首席战略执行官Tony Danker 表示,该项目同时追求用户体验和发布者及广告商的利益, 具有非常长远的眼光。他迫切希望看到项目取得成功。Vox.com、Hearst、Twitter、The New York Times、FAZ.NET、Chartbeat 以及 La Stampa 等的相关人士也纷纷表示非常喜欢并密切关注该项目。未来,该团队将会继续优化,进一步提升 AMP 文档的性能。Google 也希望相关领域的个人、公司和机构能够积极参与到项目中。


感谢郭蕾对本文的审校。

给 InfoQ 中文站投稿或者参与内容翻译工作,请邮件至editors@cn.infoq.com。也欢迎大家通过新浪微博(@InfoQ@丁晓昀),微信(微信号:InfoQChina)关注我们,并与我们的编辑和其他读者朋友交流(欢迎加入 InfoQ 读者交流群)。

Google语言 & 开发架构