- A+
AMP 是什么
AMP，全称是 Accelerated Mobile Pages， 是 Google 推出的开源前端框架。AMP 最明显的特征就是 性能，被称为目前 WEB 届最快的框架毫不夸张。 Google 对 AMP 的性能进行了极致的优化，比如 JS 和网页数据放在缓存。
是否有必要做 AMP
当然有必要做了。理由有 2 个：首先，是快！从内部一个 case 来看，AMP 页面在 Load Time 上比 PC 页面快 1 倍，在交互时间上快 2 倍。其次，SEO 流量会提升！（具体可见下一部分 AMP Cache ）虽说 Google 说过 AMP 并不会提升排名和流量，但从我们的实战经验来看，AMP 流量还是会有明显提升。
AMP Cache
当 AMP 页面通过 Google 验证时，会纳入到 Google 的 AMP 索引库，并建立 Google AMP Cache。一旦有了 AMP Cache，当用户通过 Google 搜索访问网页时，将直接访问 Cache URL，而不是原网页 URL。数据也是直接访问 Google 的 CDN 缓存，而无需请求网站服务器。
举个例子：Alibaba List 页面 - Power BankAMP 地址：https://m.alibaba.com/amp/showroom/power-bank.htmlCDN 缓存地址：https://www.google.com/amp/s/m.alibaba.com/amp/showroom/power-bank.html
在用户搜索时，有两个非常重要的点，大大提升了性能。第一个是 Google 将网页中的数据放在缓存服务器上，无需访问网站服务器。另一个是用户在搜索时，Google 就对 AMP 页面进行了预加载，导致 AMP 可以秒开。
这 2 个特征对移动端访问极其重要，特别是在移动基建不好的国家和地区。
缓存更新策略
AMP 有主动和被动两种更新策略。
- 主动更新。定期主动访问网页，更新缓存。
- 被动更新。每次有用户访问网页，Google 会同时请求网页，更新缓存，保证每次用户访问都是最新数据。
不过需要注意的是，虽然有这 2 种更新策略，通过我们的实验，数据仍会有一定的延迟。所以，实时数据仍需要实用异步请求（ amp-list 组件），比如个性化数据，P4P 数据等。
上图是内部一个统计的 case。
AMP 如何适配
很多网站本来就有了 PC 和 M 站，现在又来了个 AMP，如何适配呢？有两种适配形式：
- PC + AMP
这种形式比较简单，只需要配置好 amphtml 和 canonical 即可，aliexpress.com 就是这种情况。关系图如下：
- PC + M 站 + AMP
这种情况稍微复杂一点，alibaba.com 是采用这种形式。
也有网站存在更复杂的架构，比如 PC、M 站、AMP，以及英文和多语言，这里还有完整的架构关系图：
AMP 实战心得
从实战效果来看，AMP 是不可错过的一项新技术，不管是在网页性能，还是对 SEO 流量的帮助。首先，AMP 应该是 WEB 端性能最强的一个框架了，Google 对性能的优化做到了极致。阿里的前端甚至也在参考 AMP 的思路对性能做提升。其次，虽然 Google 说过 AMP 不会有排名的优先，但从实战效果来看，AMP 的流量还是会提高。AMP 算是近几年来难得的技术红利了。
AMP 常见问题
AMP 如何验证
本地开发完成，需要对 AMP 页面进行验证。验证未通过是无法被 Google 收录的（上线时就会发现有很多问题）。可以通过以下几种工具来验证：
- AMP 在线验证工具： https://ampbench.appspot.com/validate?url=https://ampbyexample.com/
- AMP 验证工具：https://validator.ampproject.org/
- 另一个官方验证工具：https://search.google.com/test/amp
- AMP chrome 插件验证工具：https://chrome.google.com/webstore/detail/amp-validator/nmoffdblmcmgeicmolmhobpoocbbmknc?hl=zh-CN
- AMP 缓存链接生成工具：https://github.com/ampproject/amp-by-example/blob/master/src/30_Advanced/Using_the_Google_AMP_Cache.html （验证是否生成缓存，但不代表会出现在 Google 搜索中）
AMP WordPress 插件
Google 已经推出了 WordPress AMP 官方插件，只要安装插件，即可将网站一键切换为 AMP 版本，极其方便 WordPress 用户使用。官方插件地址：https://wordpress.org/plugins/amp/
AMP 如何统计
AMP 可以使用 amp-analytics 组件进行数据统计。Google Analytics 和 百度统计均可支持。实现方式是：
- 在
<head>区域添加该代码
<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>- 添加网页跟踪或时间跟踪的代码
<amp-analytics type="baiduanalytics" id="analytics2">
<script type="application/json">
{
"vars": {
"token": "你的token"
},
"triggers": {
"trackPageview": {
"on": "visible",
"request": "pageview"
}
}
}
</script>
</amp-analytics>
