使用 AMP 构建超快的移动页面

AMP (Accelerated Mobile Pages) 是 Google 的一个开源的项目,通过使用 AMP HTML,可以极其显著的提升网页加载速度。最近我在移动设备上使用 Google 的时候,发现很多网站都开始使用了 AMP。在从 Google 上进入一个 AMP 页面时速度更是异常的快,快到超乎想象——延迟几乎为零。本站也配置了 AMP,本文对 AMP 的一些特性进行一些分析,并介绍如何在 WordPress 上支持 AMP,并开发插件对其自定义。

AMP HTML

AMP HTML 也是一种 HTML,一个符合标准的 AMP 页面只能使用有限的标签,而且很多标签都并非 HTML 标准,如 <amp-img> 、<amp-video> 等。

一个 Hello, AMPs 的例子:

此代码可以在主流浏览器中直接运行,和普通的 HTML 相比,它有以下区别:

  • AMP HTML 在 <html> 中增加了 amp 属性,来标记这是个 AMP 页面
  • <head> 中必须引用一个 JS:<script async src="https://cdn.ampproject.org/v0.js"></script>
  • 需要有带 amp-boilerplate 属性的 style,其中一个在 <noscript> 中。
  • <head> 中需要有一个 <script type="application/ld+json"> 去标记文档的 metadata。

在 AMP HTML 中插入一个图片的例子:

会发现其实这和普通的 img 标签的语法没有什么区别,只是换了一个名字,实际上通过这样引入图片,AMP Runtime(就是在头部所引用的 v0.js) 就会自动地解析这个 AMP Components,并会根据设备的分辨率去选择一张图片加载(原理只不过是通过 js 再创建一个 img 标签去让浏览器识别),甚至都不需要浏览器去支持 srcset 属性;而且还能够自动的延迟加载图片。插入视频和音频同样也需要使用 AMP 特定的方法去做。

如果浏览器禁用了 JS,那么网页上的所有图片和视频等使用非标准 HTML 标签的内容都无法显示。

在 AMP 中引入更多的交互

AMP 中禁止使用任何自己的 JS,这样做只是为了保证 JS 的加载速度——因为移动设备的性能不高,尽量减少 JS 或避免使用低质量 JS 的使用能够提高用户体验。

所以,如果想使用更多的交互,那么必须通过 AMP HTML Extensions 的功能来实现,所以只能使用有限的交互功能。或者可以通过纯 CSS 来实现各种复杂的功能。

验证 AMP

这个网站上可以在线对 AMP 页面进行验证

为何那么快?

你其实会发现,网页中可能会阻碍加载的内容只有一个外部的 JS(也就是 AMP Runtime),而且这个 JS 还被标记上了异步加载。所有的 CSS 都是 Inline 的。

在国内的应用

AMP 所必须要引用的 AMP Runtime 这个核心 JS 必须要使用 Google 提供的那个特定的域名,现在 Google 已经针对中国解析到了中国服务器,中国访问还挺快!

现在,我发往微信公众号上的文章就使用了 AMP 技术,直接推送 AMP 版本的网页,放弃使用微信素材库,实际测试加载速度比微信素材库的文章还要快。并且由于 AMP 页面适合缓存,我也针对中国进行了缓存的优化。

此页面对应的 AMP 页面

在自己的网站上实现 AMP

为了支持 AMP,需要让每个文章拥有两个页面:一个正常版本的页面,一个符合 AMP 标准的 AMP 页面。当然,也可以通过直接修改页面本身让其符合 AMP 规范,只不过这种方法做的改动会比较大。

最简单实现 AMP 的方式就是通过插件的方式去实现,尤其是如果你正在使用 WordPress 的话:

在 WordPress 上实现

Automattic(其实就是 WordPress 官方)制作了一个 AMP 插件,安装并激活这个插件之后,无需任何配置——这是我喜欢这个插件的原因之一,就能够激活 AMP 功能了。这个插件会自动生成每个文章的对应页面,并会相应的在原始页面添加 AMP 的 metadata。安装后表面上没有任何变化,但是当在一个文章页面后添加上 /amp/ 或者 ?amp=1 后,就能看到文章对应的 AMP 页面了。

这个插件之所以免去任何配置,是因为它实际上所提供的功能只是一个框架。用户(实际上是开发者)可以自己开发一个插件对其进行自定义。官方已经给出了具体的介绍,我列举一些我所自定义的东西:

使用无衬线字体,不引用 Google 字体库

这个插件默认使用了一个衬线字体,然而对于中文的使用引用外部字体毫无作用,甚至还会导致中英文字体错乱的问题。

下载这个 CSS,找到:

替换为:

把修改后的文件保存在你制作的插件的文件夹中的 templates 目录(如果没有,就创建一个)下的 my-amp-style.php

在插件中添加下面代码:

这将使用系统默认的无衬线字体,在苹果设备上中文字体就是苹方,同时还会移除页面上的 Google 字体。

添加自定义的统计内容

AMP 本来就支持 Google Analytics,但是如果需要添加自己的统计,虽不能通过 JS 的方法,但是最简单的方式是通过添加一个空的 Gif:

这是一个使用 Piwik 工具进行统计的例子,与 WP-Piwik 插件配合,可以自动获取站点 ID(需要手动替换域名)。

添加中文支持

最近我给大家 AMP 做了个翻译,请下载中文包:amp-zh_CN.zip(对应版本:v0.5.1),解压得到 po 和 mo 两个文件,放到这个插件的 /language/ 下即可。

实际测试(视频)

在激活了 AMP 一段时间后,使用移动设备在 Google 上搜索网站的内容,就可以从 AMP 中显著获益了,视频右侧包含了资源列表,使用的是 iOS 10 自带的 Safari 浏览器(不要眨眼!):

可以看到,还在停留在搜索结果的时候,AMP Runtime 等 AMP 内容就已经开始下载了,同时开始下载的还有我网站上的 Logo 以及网页中的第一张图片。

在点击第一条搜索结果时,页面没有任何重新加载的迹象,直接通过类似 ajax 的方式呈现出来,此时整个页面已经预加载完毕,所以加载时间几乎为零(由于使用的是 iOS 模拟器,配置较低,实际真机测试白屏时间更短,可以说是毫无感知)。页面顶部可以看到网址域名。在滚动页面时,可以看到之后的几张图片是延迟加载的,延迟加载的时间恰到好处,几乎很难感受到是在延迟加载。

值得注意的是,这个页面的所有内容几乎都是由 Google 的服务器提供的,包括 HTML 和图像在内(经测试,视频资源依然回源),只有我的统计代码没有被 Google 代理。如果此时分享 URL,那么分享出去的域名仍是 Google 的,在打开时(或者刷新一次页面之后)左上角的关闭将不再有,其余都完全一样。如果这个网址在非移动设备上打开,那么会跳转到原始文章(不是 AMP 的)页面。

点击左上角的关闭按钮之后,就又返回到搜索结果页面了,整个过程十分顺滑。如果搜索结果有多个 AMP 页面,那么进入这些其他的页面也同样秒开。

可以想到,之所以 AMP 做这么多限制,很大一部分原因是为了防止在 google.com 上呈现 AMP 页面时网站所有者 “作恶”,即使浏览器不是 Google 可控的(如 Safari)。

总结

Google 的 AMP 功能非常类似于 Facebook 的 Instant Article,只不过后者甚至都不需要自己去托管服务器。AMP 中大量的 CSS 仍能自己控制,这相比国内绝大多数搜索引擎的转码页面的效果还是要好不少。网页中仍能自己投放广告内容,这也是 AMP 能被接受的那么快的原因。它在各种不开放的限制中也保留了众多开放的东西。

启用 AMP 不仅能在 Google 搜索结果页面中载入获益,AMP 页面本身其实还可以作为专门给移动设备适配的页面——如果网站本身没有移动版页面,那么移动版页面可以直接拿 AMP 做,然后自动跳转。

当然,就像之前说的,网页可以通过直接修改页面本身让其符合 AMP 规范,或者在制作之初就按照 AMP 的规范作,AMP 官网就是一个典型的例子。然而这种做法未免过于激进,兼容性也不是很好(比如其对于 JS 的强烈依赖),使用前应该做好充分考虑。

关于 MIP 的补充

百度从 AMP 借鉴了很多技术并做了 MIP,其与 AMP 十分类似。

经过简单的实验,我发现 AMP 可以很轻松的变为 MIP,只需要将 AMP 页面做以下内容的替换或删除即可:

  • <html amp 替换为 <html mip
  • <script src="https://cdn.ampproject.org/v0.js" async></script> 替换为 <link rel="stylesheet" type="text/css" href="https://mipcache.bdstatic.com/static/v1/mip.css">
  • amp-pixel 替换为 mip-pix
  • amp- 替换为 mip-
  • </body> 替换为 <script src="https://mipcache.bdstatic.com/static/v1/mip.js"></script></body>
  • 删除 <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>

修改完的 AMP 页面可以直接通过 MIP 测试,这相当于不需要二次开发就能够同时兼容 AMP 和 MIP,多方便!本文章对应的 MIP 页面

启用了 MIP 的网站在百度搜索结果上也会预加载,于是就能实现秒开的效果。

MIP 的一些坑

CSS 的不同

MIP 自带的 CSS 竟然声明了这个样式:

由于它的存在,会导致很多地方的排版出现问题,并会覆盖掉浏览器的默认样式(例如 h1、h2 这些标签),所以你可能还要为百度单独添加一些样式。

video 标签的 Bug

经测试,<mip-video> 标签不能够支持 <source> 标签,使用了这种标签的视频无法加载。

  • 最后修改日期:2017-12-02
  • 更新日志:增加了 MIP 的说明

“使用 AMP 构建超快的移动页面”的13个回复

  1. 请教下博主
    默认的amp插件设定是把/amp加在域名之后的,博主把它改成在加url之后
    具体如何实施? 以及改变amp页面的url位置之后,是否合规google amp project的要求?

  2. 这个不错,有不少疑问想请教下博主
    对百度有效么?还有wp的话直接用你提供的插件不需要修改?会不会对原链接产生影响?影响https么?启用这个amp后应该不用考虑主题是否响应式了吧,直接加个判断移动端访问自动转到amp页面

    1. 这个应该是和百度无关。插件是使用 Automattic 的,不是我做的,是在其基础上再自己创建一个插件对其调整。MIP是仿照AMP做的。不过现在移动端用百度搜索会被导向MIP页面吗?MIP页面有特殊处理吗?

    2. 就这个插件而言,不建议把移动端导向AMP(因为AMP页面没有评论等功能,只有文章页有AMP版本而首页和普通页面没有AMP版本,开启这个插件后 Google 移动端就会特殊处理,从 Google 移动端来的流量就会被导向 AMP(就和视频里一样)。你的需求可以找找其他的移动适配插件或者AMP插件。

      1. 谢谢回复,测试几天这个插件,挺好用还能定制东西,但是貌似这个插件现在出高级版本了,叫accelerated mobile pages,由这个插件引导再安装博主你提到的amp插件,功能真的非常强大,But,我依然果断卸载了这个插件,理由是这个插件设计的太恶心,先装accelerated mobile pages,我以为这是个新插件,但是插件引导我再安装以前开发的amp,果然这个套路在wp插件里使用率很高,虽然我明白amp只是作为一个accelerated mobile pages,的模块来使用,但是这种恶心人的套路另我反感,同时accelerated mobile pages功能强大的同时一定会带来很多数据写入加大符合,泥煤,我就是想用个amp罢了,果断卸载,现在自己在主题里写了amp和百度的mip模块 依然更好用 寥寥几行代码而已!

        1. 感谢你的补充。你说的那个插件是指 Name Space 是 “accelerated-mobile-pages” 的插件吧?我看了这个插件,似乎不是我网站上推荐的 “amp” 的升级版,是第三方开发的。我网站上推荐的 “amp” 是 WordPress 官方的(作者里有 Automattic)。我还是喜欢用简洁的插件,够用就好。通过写插件来自定义某样东西,是非常爽的一件事,而且能自定义的地方也多。我的网站刚刚也添加了 MIP 支持,只不过 MIP 页面和主站点不在一个主域名上,不知道百度认不认(MIP 页面放在了我的一个备案域名上)。

          1. 嗨,收到你的回复了,之前我用的就是你推荐的amp,但是现在提示未在我的wp版本验证 巴拉巴拉的,其实是可以的,后面说到的accelerated-mobile-pages,确实是个恶心的第三方?
            百度mip对不备案什么情况没有去了解,我反证启用了就行,管他支不支持的,什么关键字 搜索啥的很少关注这些东西了,没多大意思天天折腾,好好写文章才是关键

发表评论

电子邮件地址不会被公开。 必填项已用*标注

评论可能需要审核才能显示,请尽量让自己的回复能够对别人有帮助

当有人回复你时你会收到邮件通知,你所回复的人能够看到你的电子邮件地址。