Google AMP 概述
简而言之，Google AMP 减少了移动用户在选定页面上的加载时间。Google 通过创建 AMP HTML 和 AMP JS 来实现这一目标，它们是 HTML 和 JS 的精简版本。
这意味着 AMP 页面只是一个常规 HTML 页面，对你可以使用的附加功能有一些限制。你不需要任何定制，也不需要学习新的编码语言。AMP 专门设计用于静态网站。
因此，如果你没有大量自定义 JavaScript，你可以在整个网站中使用 AMP HTML 来快速加载移动和桌面页面。AMP HTML 还用自定义元素（如 <amp-img>）替换了一些标准元素（如 <img> 标签）。这使 AMP 可以优先加载不同的元素，以便你的用户可以在页脚加载之前看到页面的英雄图像。
为了保持快速发展，AMP HTML 还对图像的大小、比例和其他特征进行了限制。基本上，AMP HTML 告诉 Google（以及 Twitter、LinkedIn、Pinterest 和其他公司）页面上的具体内容。AMP 通过在移动用户眨眼间加载页面来帮助网站。
用户等待的时间越短，意味着他们可以更快地获得内容，从而使他们对整个公司有更积极的体验。另外，当你使网站适合 AMP 时，Google 将在搜索结果中直接向移动用户显示。只需查看关键字“美国大选”的屏幕截图即可。是的，这些页面几乎立即加载。
换句话说，这对移动领域来说是最终的双赢。
开始使用 AMP 所需的资源
在创建 AMP 页面之前，你应该首先查看一些资源：
所有这些资源都是免费的，它们可以帮助你显着提高网站在移动设备上的性能。
为你的网站实施 Google AMP
现在你已经了解了 AMP 的基础知识，接下来我们来谈谈如何实施它。首先，你需要将页面的文档类型设置为 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 都是至关重要的。你想要为自己的页面更改的部分是：
- 链接 href=”hello-world.html”
- <body>你好世界！</body>
但有一个大问题——闪电符号（？）。AMP 要求你将其放在 HTML 标记之后。如果你不想依赖字符集 UTF-8 中提供的特殊字符，你可以尝试使用<html amp>。
之后，你需要填写正文内容。这意味着你需要使用正确的标签。
AMP HTML 标签
下面是可以在AMP HTML中使用的标签的综合列表。
| HTML5 | AMP HTML |
| <img> | <amp-img> |
| <video> | <amp-video> |
| <audio> | <amp-audio> |
| <iframe> | <amp-iframe> |
| <button> | <button> |
| <style> | <style> |
| Custom style tag | <amp-custom> |
| <link> | <link>; all rel= values on microformats.org allowed |
| <meta> | <meta>; http-equiv disallowed |
| <a> | <a>; no javascript: after href; target attribute value must be “_blank” |
| <svg> | <svg>; most allowed |
| <amp-ad> | |
| <amp-pixel> | |
| <frame> | Prohibited |
| <frameset> | Prohibited |
| <object> | Prohibited |
| <param> | Prohibited |
| <applet> | Prohibited |
| <embed> | Prohibited |
| <base> | Prohibited |
| input elements | Prohibited; <button> is allowed |
使用任何其他标签-或标记为“禁止”的标签-将阻止你的页面被正确处理。如果你使用任何不允许的标记元素，也会出现同样的情况。
基本上，如果你想参与 AMP，你必须使用比现在使用的更加有限的 HTML 标记集。这限制了你可以对页面执行的很多操作 – 这就是重点。谷歌有意缩减规模，因为页面的元素越少，加载速度就越快。
考虑到这一点，通过针对 AMP 优化页面，你肯定会失去一些东西。结果真的值得吗？
AMP 值得吗？
关于 AMP 成功（或缺乏）的大量数据并不多。但一些早期采用者，例如Pinterest 的 Jon Parise，表示“AMP 页面的加载速度比传统的移动优化页面快四倍，使用的数据少八倍。” 这意味着用户比以往更快地获得他们想要的内容，并且几乎不会在移动设备上消耗任何数据使用量。
《纽约时报》也开始使用 AMP 页面。他们的移动优化页面之一在 2.99 秒后完全加载。AMP 版本在 0.646 秒内完全加载。