在线市场eBay最近宣布,它正在尝试AMP项目,旨在提供快速、移动端的网页体验。这张图片展示了在横屏iPhone 6上渲染的AMP HTML eBay页面。
加速移动页面(AMP)项目对HTML标签、CSS和JavaScript的限制性子集,鼓励网页开发者和设计师采用可能改善移动端网页体验的做法。
今年2月,在Google开始在部分移动搜索结果中青睐AMP之后不久,撰稿人Jill Kocher向Practical Ecommerce的读者介绍了AMP项目及其搜索引擎优化潜力。正如Kocher所指出的那样,以AMP格式提供的长篇编辑内容可能会显示在移动搜索结果页面的顶部。
在移动设备上搜索“Donald Trump”,Google可能会在顶部返回带有AMP格式文章的结果页。
这并不意味着AMP是Google的一个排名因素。相反,这可能仅仅是因为对于特定查询而言,原本会在搜索结果中排名靠前或接近顶部的页面,因使用了这个由Google支持的开源项目而获得了展示机会。
思考移动端网页最佳实践
然而,AMP最大的贡献可能不在于它对搜索的影响,而在于它迫使网页开发者思考页面构建方式,或关注移动端网站访问者真正关心的内容。
eBay首席工程师Senthil Padmanabhan在其公司技术博客上写道:“AMP的好处之一是,归根结底,它是一系列构建移动网页的最佳实践。”
Padmanabhan写道:“AMP‘举措帮助我们……将这些最佳实践纳入我们常规的开发生命周期中’。这使得我们对AMP的采用更加自然,而非强制性的功能。另一个好的副作用是,即使我们的非AMP页面也变得更快了。”
Padmanabhan描述的某些移动网页最佳实践可以在AMP项目的网站上找到,其标题为AMP如何加速性能。
例如,AMP要求所有图片、广告和iframe使用固定尺寸。在下方的代码中,请注意为图片——amp-img——指定了高度和宽度。
<amp-img src="example.jpg" alt="Example" height="400" width="800"></amp-img>这里的目标是让浏览器能够通过单次HTTP请求来计算和布局移动端网页。向服务器发出一次请求后,Chrome、Firefox或Safari就能知道页面上每个元素的位置,并毫不犹豫地显示页面结构。文本内容也会几乎立即可用。
同样,为避免浪费时间在准备和调整页面布局上,样式驱动的重新计算和更改受到限制。
最后,AMP非常关注各个组件的加载时机和方式。在上述代码示例中,amp-img component will not attempt to load the example .jpg file until after all of the page text and structure is complete. This differs from a standard HTML img标签。
思考权衡取舍
AMP以牺牲用户交互性、控制权和数据收集为代价来实现快速加载时间。但即使是这些权衡取舍,也可能对移动端网页体验有益,因为它们要求站点开发者思考页面的目标,并做出如何最好地实现这些目标的选择。
如果目标是传递一篇文章,你可能不需要自定义JavaScript,而AMP对此有所限制。使用AMP会促使你考虑这类问题。
代码分支
AMP将要求开发者对部分代码进行分支或拆分。一个页面(更准确地说,是页面模板或布局)将有一个“完整”版本和一个AMP版本。这是一个巨大的问题。用Padmanabhan的话来说,分支代码可能成为“维护噩梦”。
在过去,代码分支是导致网页的移动版本被具有单一布局的响应式页面取代的原因之一。
避免编写和维护重复代码的努力可能会带来更模块化的页面开发。即使在eBay尝试AMP之前,它就已经理解了模块化设计的价值。
“从一开始,我们就希望页面尽可能精简。这意味着将 HTML、CSS 和 JS 的代码量降到最低。为了实现这一目标,我们采用了模块化架构,并开始构建原子组件。基本上,一个页面由多个模块组成,而每个模块又由更小的子模块构成,依此类推。这种做法实现了代码的最大化复用,从而大幅减少了资源(CSS 和 JS)的体积。”Padmanabhan 写道。
AMP 的贡献
AMP 项目可能并非移动 Web 的最终解决方案。但由于它基于 HTML 构建,并且是一个开源项目,它可能会比一些与之相提并论的技术(包括 Apple News 和 Facebook Instant Articles)更能推动关于移动 Web 开发及其权衡利弊的讨论。
如果 eBay 对 AMP 进行电子商务试点,这一点将尤为明显。
移动 Web 体验正迅速成为主流 Web 体验。很快,大多数用户、购物者和访问者都将通过移动设备访问网站。你的业务将如何迎接他们?

