Accelerated Mobile Pages（AMP）是谷歌提出的一个计划，旨在解决移动web最令人头痛的问题：速度。很多时候，我们小心翼翼设计的各种优秀的用户体验，在移动设备上加载的速度却慢的让人难以接受。

速度慢不仅是一个UX问题，还会影响转化率，将潜在用户赶走。谷歌希望利用AMP计划解决这个问题，让内容发布商“一次性的对移动设备进行优化，然后让优化后的内容可以随处访问。”

自从这个项目开始以后，很多内容发布商都加入了这个计划，例如BBC、经济学人、卫报和英国金融时报等。事实上，任何一个内容发布商，都可以使用AMP来优化用户的移动设备浏览体验。

何为AMP

在具体讲述AMP的实施方法之前，我们先来了解一下AMP。我们先来进行一次AMP的演示，再次之前，你要先做下面两件事情：

1. 使用移动设备，或是使用移动设备模拟器，例如Chrome DevTools的Mobile Device Simulator。

2. 在搜索栏输入搜索请求。目前AMP主要可以用在新闻站点上，因此你应该搜索一些最近的新闻内容。

在下面的截图中你可以看到，我输入的内容为“里约奥运会”。

正如你看到的那样，AMP页面以Google Rich Cards的形式被展示出来。

请注意，谷歌使用了两个不同的标签来分AMP页面和其他移动优化页面：AMP和Mobile-friendly。现在我们可以点击搜索结果，看看AMP页面长什么样子，以及它在移动设备上的加载速度。

技术背景

AMP是一个在web技术上建立起来的web标准，它专注于静态内容，有三个组成部分：

1. AMP HTML: 经过修改的HTML对特定的HTML/CSS功能有一些限制。而且，加入了新的自定义标签。

2. AMP JS: 强制使用最佳的方法来降低页面加载时间。

3. AMP CDN: 这是一个拥有内建验证系统的缓存，它可以进一步对站点进行优化。

AMP HTML

加速后的移动页面也属于普通的HTML页面，它需要遵循一套规则来让页面加载速度变快，并且完成稳定的渲染。

我们来看看一些最重要的概念。

你是否需要独立的AMP页面？

对于同一个静态内容页面，你可以有两个完全不同的版本：一个为AMP版本，一个为非AMP版本。你也可以只选择一个版本，那就是AMP版本，然后在所有地方都使用这个页面。在浏览器支持方面，AMP的Github页面显示：

总体来说，我们支持大多数浏览器的最近两个版本，这些浏览器包括Chrome、Firefox、Edge、Safari和Opera。我们支持这些浏览器的桌面设备、手机、平板电脑版本。

如果你想使用两个版本的页面（AMP和非AMP），你需要给每一个页面指定独立的连接，这样才能让搜索引擎知道两个版本的存在。

在非AMP页面的HTML代码中，你要在<head>区域内加入如下代码：

 <link rel="amphtml" href=“amp-version.html">

在AMP页面中，你要在<head>区域中加入如下代码：

<link rel="canonical" href="non-amp-version.html">

如果你只是用AMP页面，你仍然需要用如下方式为其添加连接：

 <link rel="canonical" href=“amp-version.html">

Starting Boilerplate

AMP项目为我们提供了不同的starting boilerplate。现在我们来看看下面这个简单的HTML boilerplate：

<!doctype html>
<html amp lang="en">
  <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>

你可以看到，boilerplate使用了<link rel=“canonical”>标签连接到了常规的HTML页面。<sricpt>标签添加了AMY JS库。

你可以在官方AMP网站上找到更加详尽的AMP HTML boilerplate，除了基本的必须元素之外，它还包含了JSON-LD格式的schema.orgmarkup——如果你想让你的内容出现在Google Rich Cards中，那么你一定要添加丰富的数据。

AMP HTML Tags

为了增加速度，AMP严格规定了HTML的使用方法。HTML标签被分为3个群组：

1. 可以不经改变使用的HTML标签，他们可以在AMP HTML Tag Addendum的白名单中找到。

2. 被禁止的HTML标签，例如<embed> 和<object>，它们可以在这里找到。

3. 与AMP标签标准相等的HTML标签，例如<amp-img> 和 <amp-video>,它们也被称为AMP组件，它们可以在这里找到。

为AMP HTML页面添加样式

在AMP页面上，你不可以使用外部样式表，你需要将自定义样式亿inline的方式放在<head>区域中，例如：

 <style amp-custom>

  h1 {

    color: #333;

  }

  // other custom styles

</style>

而且你只能添加一个嵌入式样式表，而且很多样式也不能使用，例如，你不可以使用!important和@import等规则。在给AMP页面添加CSS样式之前，你可以在这里查看哪些样式不可用。

还有一个需要特别指出的是，在AMP样式中，并非所有布局都可用——这是AMP的原则之一，其目的是为了让浏览器可以事先统计每个元素的空间。你可以在这里查看哪些布局可以使用，哪些布局不受支持。

AMP JS

AMP文档中并未包含任何作者所写的JavaScripts，也没有任何第三方JavaScripts，但是这并不意味着Accelerated Mobile Page并不使用JavaScripts。AMP的JavaScripts库（AMP运行时）负责快速加载和渲染AMP页面，方法是强制使用最佳的方式。

AMP组件

AMP组件是由AMP运行时所定义的。它们就是我们此前所提过的符合AMP标准的HTML标签，例如<amp-img>。

每一个AMP组件都包含了一个特定的外部资源（图像、视频、嵌入等）。众所周知，使用外部资源会拖慢网站的速度。这个解决方式的主要目的，就是管理外部资源的加载时间，具体方式就是在一个沙箱内运行这些资源。

AMP为我们提供了两种组件：

1. 内置组件：它们在每一个AMP文档中都可用，它们位于AMP运行时之中。目前，有5种内置组件：

1 <amp-ad> 用来显示广告

2 <amp-img> 代替<img>来显示图片

3 <amp-pixel> 用来跟踪像素（可统计页面阅读量）

4 <amp-video> tag代替<video>标签，直接在文件嵌入中添加HTML5视频

5 <amp-embed> 用来嵌入元素（在特定的情况下，可以替代<amp-ad>标签

2. 扩展组件:这是一种额外的组件，你必须在AMP文档中明确的添加这种组件，才能让它生效。AMP提供了很多种实用的扩展组件，例如<amp-accordion>和<amp-lightbox>等。你可以在这里查看完整列表。

请注意，所有外部加载的资源，例如<amp-img>和<amp-video>都必须要有明确的<height>和<width>值，这样才能让浏览器在加载前计算布局。

AMP CDN

AMP CDN从本质来看是一种缓存，它也被称为Google AMP Cache。它会获取有效的AMP文档和缓存，并且对它们进行加载。AMP CDN也有着内置的验证系统。

在将AMP页面上线之前，你应该对其进行测试，确保它可以安全的通过验证器。有很多种方式都可以让你完成测试。

你还应该知晓，AMP CDN使用了HTTP/2协议，目的是获得尽可能最高的性能。

AMP工具

你可以使用一些不错的工具来部署Accelerated Mobile Pages，我们现在就来接受一些。

谷歌提供了有着AMP状态报告工具的webmasters，它可以显示成功索引的AMP页面的数量，还能够显示与AMP有关的错误。

Lullabot的AMP PHP库可以让你将HTML页面转换为AMP HTMAL页面，还能让你知道任何HTML文档与AMP标准的兼容性。

如果你想在你的WordPress站点上使用AMP，你可以阅读Yoast的这篇指导文章。

你还可以搜索Automattic的AMP插件，这个插件能帮你在WordPress站点拥有AMP特性。

对比

你可以通过下面这个视频来对比普通移动设备优化页面与AMP页面的加载速度：

视频

该视频需要自备科学上网工具

原    文：Beginner’s Guide to Accelerated Mobile Pages (AMP)
译    文：SDK.cn
作    者：Christian（编译）

AMP 教你如何优化用户移动设备浏览体验