使用了 Google AMP 网站加速技术后，我的博客快了八倍

最新推荐文章于 2022-06-21 09:05:27 发布

Phodal

最新推荐文章于 2022-06-21 09:05:27 发布

阅读量498

点赞数

本文链接：https://blog.csdn.net/phodal/article/details/100519606

版权

一年前，我为我的博客 www.phodal.com 添加了 AMP 的支持。今天偶尔间在搜索结果页看到了 AMP 的标志，打开博客的速度几乎是秒级的。

今天在本来想测试一下，之前实现的 APP Indexing 功能是否正常工作——即我在网页上打开博客的链接时，会直接打开我的 APP。结果，发现它已经不工作了，这真是一个悲伤的故事，但是看到了新的 AMP 标志。

0?wx_fmt=png

一年多以前实现的功能，终于 TM 上线了，好开心好开心——然而，你们还是在用百度。

打开页面的效果大概是这样的：

0?wx_fmt=jpeg

Google 自动为网页添加了些 Header，点击左上角的关闭，便回到了搜索结果页面。

关于 AMP 加速的原理，我想吐个槽——不就是 Inline 了 CSS，禁用了大部分的JS，所以就了 N 倍嘛。所以，原来打开的博客需要 8 秒才加载完，现在只需要一秒就够了~~。

顺便分享一下之前的 AMP 开发经验：写于 2016 年 3 月。

虽然这项技术已经在半年前出现了，一直没有实践的主要原因是：没有动力。直到最近才发现这货已经在Google的Webmaster的中出现了名为“Accelerated Mobile Pages”

Accelerated Mobile Pages (AMP) 是一项开源计划，可让网页在移动设备上快速加载并且看起来十分美观（即使是在网速很慢的情况下）。

如果您的页面既符合 AMP 要求又包含一些额外信息，那么它们也可通过利用 Google 搜索结果中的特殊展示功能来增强自身的吸引力。

于是在周末的时候只好试试会出现什么问题了。

创建AMP HTML页面

官方有这样一个简单的入门文档：《Create Your AMP HTML Page》，依据这个文档一步步地做了下来：

首先，我们需要先创建对应的AMP模板页

修改 <html>变为 <html amp>。不是很懂这个的意义，难道只是为了区分不同的页面？
然后在我们的head里需要添加canonical链接，这个的目的是为了SEO用的。当我们创建AMP页面的时候，难免会和原来的网页内容一样，添加这个链接就是指向原网页。内容大概是这样子的 <link rel="canonical" href="$SOME_URL" />。
添加一个 <meta charset="utf-8">标签在head里
添加一个 <meta name="viewport" content="width=device-width,minimum-scale=1" >标签在head里。
接着，需要添加AMP项目的脚本 <script asyncsrc="https://cdn.ampproject.org/v0.js"></script>。
最近再添加下面的样式在head里。

&lt;style amp-boilerplate&gt;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}}&lt;/style&gt;&lt;noscript&gt;&lt;style amp-boilerplate&gt;body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}&lt;/style&gt;&lt;/noscript&gt;

接着，我们还需要在我们的正常页面中，添加下面的一行代码，来告诉Google，我们对应的AMP页面在哪里，如下的代码所示：

&lt;link rel="amphtml" href="https://www.phodal.com/amp/most-important-15-books-of-phodal-programmer-life/"/&gt;

原本，我以为这样就可以了，后来我发现我太天真了。

AMP Debug

偶然间，发现AMP有一个Debug模式，就是在URL的最后添加一个 #development=1，然后我发现出了一堆的错——在浏览器的Console里。

只好整理一下经验分享一下。

AMP页面-注意事项

在AMP模式下是不能运行JavaScript，也是禁止运行JavaScdript的，所以所有的Script标签都会报错。
AMP模式下，所有的CSS都只能Inline，但是Inline到页面后，还是会有一个大小限制。出于这个原因，我把AMP页面的CSS重写（Copy/Paste)了一遍。
图片问题，这个问题我已经不想理了。。所有的图片标签都要变成
，并且还要在里面写定图片的大小——这意味着，我要Review之前的所有图片，或者写上相应的图片大小。
页面里是不能有form标签的，删除所有的form。
页面里还不能有用img的分析代码。

大概遇到的问题就如上面所示，如果你也在用那就祝你好运咯。