起点海外M站AMP实践
原创声明
起点海外项目「 webnovel 」作为今年阅文冲出国门、走向世界的战略级产品，自推出之后，得到了海外网文爱好者的一致好评。作为开发者的我们，自然是不遗余力的来优化我们的产品体验，让用户能使用的更加舒心。
起点海外 M 站作为一个移动端站点，搜索引擎是一个非常重要的入口。我们近期针对搜索引擎做了一个优化，使用了 Google 前沿的AMP 「 Accelerated Mobile Pages 」技术，使我们的用户从搜索引擎当中进入我们页面的体验得到了一个极大的提升。
下图的演示，是从 Google Mobile 搜索页中搜索我们书名，最终进入到我们的书详情页的过程。可以看出整个过程是非常流畅的。点击 Google 的搜索结果，到跳转我们的页面，瞬间跳转，没有一点延迟。而我们这些书的详情页正是使用了 Google 的 AMP 技术。
起点海外 M 站 Google 搜索示例
关注前端技术的各位想必对 AMP 不会陌生，刚刚过去的在上海举办的 Google 开发者日，Google 将 AMP 作为一个宣传重点，在多次分享当中对 AMP 进行详细地讲解。我们阅文集团也有幸上榜了国内首批拥抱 AMP 技术的公司。Google 也正在国内推广 AMP 标准，已经得到了主流搜索引擎的支持。百度也同时对自己的MIP 「 Mobile Instant Pages 」和 AMP 都进行了支持。
阅文集团 AMP 现场 DEMO
AMP 出海网站
为何选择 AMP
从来没有一个优化是为了优化而进行优化的。我们在起点海外采用 AMP 技术的原因如下：
1.起点海外的业务形态非常适合 AMP 技术。毕竟 AMP 开始推出的目的就是提供给出版商使用的，如 CNN ，华盛顿日报等。
2.Google 全球 CDN Cache。起点国内站点使用的是腾讯的接入能力。在全国都有非常好的接入速度。但是海外我们的部署的点比较有限。不同地区的用户请求速度会差异比较大。所以能用上 Google 的全球 CDN 加速那是再好不过了。
3.更好的用户体验。相信大家也在上面视频当中，体验了使用 AMP 技术之后的页面极致的加载体验。
4.SEO 排名优化。使用 AMP 带来的另一个好处是 SEO 排名优化。因为更快的加载速度是提升排名的一个重要指标。
如何进行 AMP 优化
AMP 的原理在这里也不多加介绍，大家可以直接去 AMP 的官网进行阅读和学习。在这里我主要给大家分享一下我们在 AMP 实践过程中碰到的一些问题和总结出来的经验。主要分为以下几点：
一、如何选择需要 AMP 的页面
AMP 官方当然是希望我们的所有页面都能换成 AMP 页面，但是我们在转换的页面过程中，保留了原始页面。在上面视频当中从 Google 搜索进入的是 AMP 的页面，但是你也可以页面上部的 Bar 跳往原始的页面。两个页面有一些细微的区别。
我们在选择 AMP 的页面的时候，首先是去 Google Analytics 上查找用户最经常搜索的是哪一些关键词。经过分析，我们确认用户需要搜索的是我们的书本详情页。所以我们第一步选择将书本详情页做为我们首先 AMP 化的页面。其实就是确认搜索引擎的着陆页的过程。
二、如何将源页面转化为 AMP 页面
AMP 之所以现在能这么火，是因为它的核心其实是一个「 快 」字。为了达到快，AMP 对页面结构和资源的加载提出了很高的要求。而这些要求都是为了缩短关键渲染路径 「 Critical Render Path 」，让用户能最快的看到我们的网页。
天下武功，唯快不破
AMP要求：
1.不能有自己自定义的 JS，不管是外链还是内联。因为 JS 会阻塞 DOM 构建。
2.不能有外链 CSS ，因为 CSS 会阻塞渲染。所有的 CSS 都必须 inline 到 style 标签里面，并且只能有一个 style 标签。inline 的 CSS 大小不能超过 50K。
3.需要加载图片，音视频时，不能用原生的 html 标签，而是用 AMP 提供的 amp-img , amp-audio , amp-video 的自定义标签。 AMP 会选择在最佳时期加载外部的资源，提升用户首屏加载的速度。
4.虽然 AMP 不推荐，但是还是提供了一个 amp-iframe 的组件。让开发者能在页面当中 iframe 一个自己的页面，可以在这个 iframe 里面实现一些比较复杂的交互逻辑。但是这个 iframe 的起始位置只能在首屏的 2/3 位置以下。
因为有了上面 4 条的限制，基本上我们 AMP 化之后的页面就很难有复杂的交互了，更多的是以展示内容为主的形式。
我们最初在开发海外站点时，都尽可能使用纯 CSS而非 JS 来实现页面中的交互。到现在需要转到 AMP 页面的时候，我们发现因为这个原因，我们的页面可以直接将之前用纯 CSS 实现的交互无缝的转移到 AMP 的页面中来，这也算是意外的惊喜。
页面转成 AMP 页面，基本上是对整个页面交互梳理的过程。在保证用户的基本功能的前提之下，我们都尽可能地将用户引导致源页面进行操作。而不让用户在 AMP 页面上有过多的复杂操作。
确认了一些基本原则，剩下的就是体力劳动了。按照 AMP 的要求，将原来页面的标签该删的删，该换的换。可以结合自己项目的自动化构建工具，自动化生成对应的 AMP 页面。 Google 近期也收购了一家专门做 AMP 转换的小公司叫做 RelayMedia ，以后应该会有更加得心应手的小工具供开发者使用。
三、如何让 Google 快速收录 AMP 页面
将页面转成了 AMP 页面之后，并且通过了 AMP 工具的测试，就可以准备上线了。上线之后面临的问题就是如何让 AMP 页面尽快被 Google 收录。因为只有收录了 AMP 页面，用户在 Google 中搜索的时候才可以找到带闪电标识的 AMP入口。 Google 为了让爬虫能够识别 AMP 页面的原生页面是哪一个页面，需要开发者在 AMP 页面加一个 link 标签指向原生页面，并且在原生页面当中加一个 link 标签指向 AMP 页面。
原页面
AMP页面
其实在这里我们碰到了一个天坑。因为我们的站点
PC 端：「 https://www.webnovel.com 」
M 端：「 https://m.webnovel.com 」
是 2 个不同的子域。我们想当然的在我们 M 站的原页面与 M 站中的 AMP 页面进行互指。结果上线 1 个多月， Google 只零星收录了几个 AMP 页面，并且经常还会被取消收录。搜索结果非常不稳定。
错误的 AMP 页面和原生页面的引用
正确的 AMP 页面引用
四、AMP 的效果数据量化
1. 加载速度上的优化
上线 AMP 之后，对页面的加载到底有多大的加速程度呢？我们在 GA 「 Google Analytics 」上查询了之前和后面的数据对比。整体来说，文档加载时间从最初全球平均时间 2.5s ，优化到了 1s 左右。优化效果那是非常明显的。
AMP 原页面平均文档内容加载时间
AMP 页面平均文档内容加载时间
Google 预加载起点海外 AMP 页面实例 1
Google 预加载起点海外 AMP 页面实例 2
这样的话，等用户一点击， Google 搜索就可以直接切换到我们的页面，中间并没有任何加载，所以这个优化其实是 2.5s 到 0s 。
实际优化结果
2. 搜索排名上的优化
因为搜索排名是会受页面加载速度影响的，应用了 AMP 技术的页面，加载速度自然是变的更快了。所以会在一定程序上影响页面的 SEO 。在同等条件下，排名会有上升。不过需要指出的是速度也只是影响 SEO 排名的其中一个重要因素， SEO 自然还受更多其他因素的影响。
我们在 Google 站长上面对比了一下上线 AMP 之后和非上线 AMP 之前的排名，大多数关键词都有提升。不过随着 AMP 这个概念深入人心，用户都会更加倾向于点击体验更好的带闪电标识的搜索结果。这样的话，对 SEO 排名提升会有一个更好的优化作用。
热门书籍和新书的Google搜索排行的变化
后续优化跟进
通过 AMP 技术，用户从搜索引擎非常迅速地到了我们的 AMP 页面 「 由 Google Cache 缓存 」。但是如果我们自身的页面体验比较糟糕的话，用户的流失率一样会比较高。而 Google 为了解决这个问题，提供了一个组件叫做 amp-install-serviceworker ，可以提前在 AMP 页面安装好业务页面的 Service Worker「Service Worker是 Google PWA 提供的一个能力，具体细节大家可以前往官方查看 」，提前加载好后面页面所需要的资源。这样的话用户从 AMP 页面切换到我们自身业务的非 AMP 页面也将是一个加载很快的过程，会有一个非常好的体验。而这个改造我们内部正在进行中。请期待我们后续的分享文章。
原创声明
- 发表于:
- 原文链接：http://kuaibao.qq.com/s/20180110G09Z1S00?refer=cp_1026
- 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号（企鹅号）传播渠道之一，根据《腾讯内容开放平台服务协议》转载发布内容。
- 如有侵权，请联系 cloudcommunity@tencent.com 删除。
相关快讯
扫码
添加站长 进交流群
领取专属 10元无门槛券
私享最新 技术干货
腾讯云开发者
