本站已支持AMP
经过一番折腾,本站(byvoid.com)已支持AMP。具体效果就是,在手机端上打开byvoid.com上的任意一篇文章,譬如这篇,将会显示为AMP版本。AMP版本的加载速度比桌面版本和原有的手机版要快了好几倍,同时需要的流量更少了,主要是受益于图片的动态加载。
关于AMP
AMP(Accelerated Mobile Pages)是Google支持的一套开源的移动页面标准,始于2015年。这套标准顾名思义,就是使移动页面加载更快,提升移动端网页的用户体验。众所周知,移动端页面的加载对用户的影响非常巨大,因为用户在单页面的手机端的耐心是以毫秒计的,然而网页加载却是以秒计的。有许多用户研究表示,手机端网页加载速度每慢1秒,就会有XX%的用户流失(具体数字我忘了)。
AMP技术主要包括三个方面:
- AMP HTML: HTML标签的一套允许的子集,以及额外的
amp-img
和amp-video
等。这些标签可以确保页面加载平滑,不会有大量的重新排版导致用户阅览困难。 - AMP JS: 保证所有资源都异步加载,不允许关键路径上的异步脚本阻止页面生成。
- AMP Cache: 这个才是最关键的,Google提供的免费内容分发网络(CDN),可以缓存所有文件,包括图片。
AMP是网站原有的桌面版或手机版的补充,并不是为了取代它们。因此AMP是和网站现有的「规范页面」(canonical)配对的,譬如该日志的规范页面HTML中head
标签中有以下标签:
<link rel="amphtml" href="/blog/byvoid-com-amp-enabled?amp=1">
对应的,在配对的AMP页面的head
标签中也有:
<link rel="canonical" href="/blog/byvoid-com-amp-enabled">
所谓的规范页面就是现有的非AMP页面,可以是桌面版,也可以是手机版。
当然,整个网站只用AMP也是可以的,也就是自规范AMP。这种情况下只需要将link
标签指向自身,也就是<link rel="amphtml" href="the same url">
。
Google在索引使用AMP的网站的同时,会把规范页面和AMP页面配对索引,并且检验两者内容的一致性。检验通过的有效AMP页面,Google的手机版搜索结果中会显示AMP链接,打开的速度非常快。目前支持快速打开AMP页面的网站还有Twitter和Pinterest。
类似技术
Facebook也提供了类似的技术,叫做「Facebook Instant Articles」。它和AMP技术效果类似,但是方法不一样。
中国的微信公共主页的图文,以及微博的长文章使用的方法也类似与Facebook。
遗憾的是,这些技术都只能在各自的「围墙花园」中使用,而不像AMP真正是一个开源的标准。Google只是帮助缓存AMP,加快从Google搜索结果中打开的速度而已。