hexo amp加速_加速移动页面（AMP）入门指南-CSDN博客

加速的移动页面是Google的一项计划，旨在解决最大的移动网络问题- 速度。我们精心设计的令人敬畏的用户体验在移动设备上非常缓慢。

慢速不仅是用户体验问题，而且还降低了转换率 ，并通过排除互联网连接速度较慢的用户而损害了可访问性。 AMP是团队合作发起的，其目标是允许发布者一次创建移动优化的内容，并将其立即加载到任何地方 。

自启动以来，BBC，《经济学人》，《卫报》和《金融时报》等许多发行商已经实施了该计划，因此，到目前为止，我们可以放心地认为AMP是一项创新，值得每个想要在移动端保持竞争力的人考虑网络。

AMP在行动

在深入探讨细节之前，这里是AMP演示 ，因此您可以实际使用它。可以通过此链接访问该演示。

要查看AMP的运行情况，您需要做两件事：

在移动设备或移动模拟器（例如Chrome DevTools的“ 移动设备模拟器 ”）上观看演示。
在搜索栏上运行搜索查询。由于Google AMP当前主要与新闻网站合作，因此最好的选择是新鲜的新闻报道。

在下面的屏幕截图中，您可以看到使用搜索词rio olympics时得到的信息。

如您所见，AMP页面显示为Google Rich Cards ，这是Google 在2016年5月发布 的针对移动设备优化的图片轮播 。

请注意，Google如何通过使用2个不同的标签 AMP和Mobile-friendly 来区分AMP页面与其他针对移动设备优化的页面。还值得点击一些结果以查看AMP网页的外观以及在移动设备上运行的速度。

技术背景

AMP是建立在现有网络技术之上的网络标准 ，并且侧重于静态内容。它包含3个不同部分 ：

AMP HTML：经过修改HTML，具有（1）某些常规HTML / CSS功能的限制和（2）引入了新的自定义标签（组件）
AMP JS：强制执行最佳做法，以减少页面加载时间
AMP CDN ：具有内置验证系统的缓存，可进一步优化您的站点

如果您想进一步了解AMP页面的技术背景，请观看下面的视频，其中Google的Paul Bakaus就AMP进行了介绍性演讲 。

如果您想更深入地研究，也有必要了解AMP使用哪些优化技术来提高移动性能。在下面的视频中，AMP工程负责人Malte Ubl详细解释了AMP的结构。

AMP HTML

加速的移动页面是常规HTML页面 ，需要遵循一组规则才能使页面加载更快并以可靠的性能呈现。

让我们来看看您需要了解的最重要的事情。您还可以查看完整的AMP HTML规范。

确定是否需要单独的AMP页面

对于同一静态内容页面，您可以有2个单独的版本 -一个用于AMP，一个用于非AMP版本。您也可以选择只有一个版本 -AMP页面，并在所有地方使用它。关于浏览器支持 ， AMP的Github页面声称：

如果您仍然担心浏览器的支持，请查看Google的Paul Irish在Stackoverflow上的帖子。

如果您要拥有两个页面（AMP和非AMP），则需要链接到它们中的每个页面，以告知搜索引擎这两个版本的存在 。

将以下代码添加到非AMP页面的<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">

启动样板

AMP Project提供了可用于入门的不同启动样板 。看看下面最简单的AMP HTML样板：

<!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>

您可以看到样板使用<link rel="canonical">标记链接了常规HTML页面。 <script>标记添加AMP JS库 。

您还可以在Github上分别找到这两个标签，作为AMP模板代码 -文档警告用户 不要更改这两个标签内的代码，因为AMP验证程序使用正则表达式（regex）。

您可以在AMP的官方网站上找到更高级的AMP HTML样板，除了必需的元素外，它还包含JSON-LD格式的schema.org标记-如果希望您的内容出现在Google Rich Cards中，则必须添加丰富的数据。

在Github上检查每个AMP HTML文档必须遵循的必需标记 。 AMP Project还有一个很好的分步指南，可以帮助您创建第一个AMP Page 。

AMP HTML标签

为了提高速度，AMP规范限制了HTML的使用方式 。 HTML标记可分为3组：

可以不变使用的 HTML标签，可以在AMP HTML标签附录的白名单中找到。
禁止使用HTML标签 ，例如<embed>和<object> ，可以在此更广泛的列表中找到。
具有等效AMP特定标记的 HTML标记（例如<amp-img>和<amp-video> ）也称为AMP组件 -它们使以资源节约的方式实现常见模式成为可能。（我们稍后会再与他们联系，直到在Github上查看此列表。）

设置AMP HTML页面的样式

在AMP页面上，您不能使用外部样式表 ，您需要通过以下方式在<head>部分中将自定义样式添加为嵌入式样式表 ：

<style amp-custom>
	h1 {
		color: #333;
	}
	// other custom styles
</style>

您只能有一个嵌入式样式表，也有许多不允许的样式规则 ，例如，您不能使用!important限定词，@ @import规则和伪类。

在开始为AMP页面编写CSS之前，请不要忘记检查样式表限制。

有这重要的是要了解AMP样式规则另一件事：你不能使用任何你想要的布局 -因为它的一个AMP的原则，让浏览器预先 计算每个元素的页面上的空间 。

查看受支持和不受支持的布局。

AMP JS

AMP文档不能包含任何作者编写的内容，也不能包含任何第三方JavaScript ，但这并不意味着Accelerated Mobile Pages根本不使用JavaScript。 AMPJavaScript库（AMP运行时）通过执行最佳性能实践来快速加载和呈现AMP页面。

AMP组件

AMP组件 由AMP运行时定义 。它们是您需要使用的上述特定于AMPHTML标记 ，而不是它们的常规对应标记，例如<amp-img>而不是<img>标记。

每个AMP组件都包含特定的外部资源 （图像，视频，嵌入等）。外部资源容易使网站变慢。该解决方案的主要目标是通过在沙箱中运行外部资源来合理管理外部资源的加载 。

AMP为您提供2种组件 ：

内置组件：它们在每个AMP文档中始终可用，它们直接内置于AMP运行时中 。当前有五个：
1. <amp-ad>用于展示广告
2. <amp-img>用于图像，而不是<img>标签
3. <amp-pixel>用于跟踪像素（用于计算页面浏览量）
4. <amp-video>用于直接嵌入HTML5视频文件，替换<video>标签
5. <amp-embed>用于嵌入式元素（在某些情况下可以代替<amp-ad>使用）
扩展组件：附加组件，您必须明确将它们包含在AMP文档中。有很多有用的工具，例如<amp-accordion>和<amp-lightbox> ，请参阅完整列表。它们中的许多可用于嵌入来自第三方服务 （例如Twitter或Instagram）的内容。