Accelerated Mobile Pages 简称 AMP ,是一项由谷歌发起的移动端网页加速方案,号称能够大幅度提高移动端页面的加载速度。

什么是AMP

通过 AMP 可以构建快速渲染的静态内容网页。AMP 实例由三个不同部分组成:

AMP HTML 是为确保可靠性能而具有某些限制的 HTML, 它进行了一些扩展,可以构建超出基本 HTML 的丰富内容。 AMP JS 库可确保快速渲染 AMP HTML 页面。 Google AMP Cache(可选)提供 AMP HTML 页面。

组成

AMP HTML 本质上是使用自定义 AMP 属性扩展的 HTML。 最简单的 AMP HTML 文件如下所示:

<!doctype html>
<html ⚡>
<head>
    <meta charset="utf-8">
    <link rel="canonical" href="hello-world.html">
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <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>
    <script async src="https://cdn.ampproject.org/v0.js"></script>
</head>
<body>Hello World!</body>
</html>

AMP HTML的写法与HTML相似,但是AMP HTML有许多需要注意的规则

  • Doctype必须为 <!doctype html>
  • 必须包含<html ⚡>标签(或者<html amp>)便于识别。
  • 包含<head><body>标签 (他们是任意的 HTML)。
  • 必须在 HEAD 区域中说明<link rel="canonical" href="$SOME_URL" />标签,用来指定该网页有普通版本的网址;如果没有,则使用当前地址。
  • 必须在Head的开始位置放置<meta charset="utf-8">标签。
  • 必须在Head中包含<meta name="viewport" content="width=device-width,minimum-scale=1">,同时建议包含initial-scale=1
  • 必须在Head中包含<script async src="https://cdn.ampproject.org/v0.js"></script>标签。
  • 必须在Head中包含AMP boilerplate code (head > style[amp-boilerplate]noscript > style[amp-boilerplate])标签。

AMP JS 则提供自定义标记,并确保快速渲染页面。重大优化之一就是使来自外部资源的所有内容保持异步,让页面中的任何内容都能毫无阻碍地渲染。其他性能技术还包括:将所有 iframe 沙盒化、加载资源之前对页面上每个元素的布局进行预先计算,以及禁用性能缓慢的 CSS 选择器。

Google AMP Cache 会检测网页是否支持AMP页面(由普通页面HEAD中的<link rel="amphtml" href="$SOME_URL" />标记),并提取 AMP HTML 页面,对页面进行缓存,并自动改进页面性能。 20161030171940

图中是我添加了AMP页面几天后谷歌的抓取情况。被谷歌抓取AMP后的网站在移动端搜索呈现出这样的词条,带有闪电图标并有AMP字样。

20161030172938

效果:

在WordPress中使用AMP

Wordpress中实现AMP很简单,只需要下载并启用名叫AMP的插件(由Automattic创建),这样,就可以自动创建AMP页面。AMP页面只需要在正常页面下的URL后加上/amp/即可访问,例如本页面的AMP页面为https://www.isthnew.com/amp-web-project/amp.但是此插件不可调样式,需要自己动手修改代码,这里不再多说。