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

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

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

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

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

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模板页

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

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

<link rel="amphtml" href="https://www.phodal.com/amp/most-important-15-books-of-phodal-programmer-life/"/>

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

AMP Debug

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

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

AMP页面-注意事项

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

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

原文发布于微信公众号 - phodal(phodal-weixin)

原文发表时间:2017-03-21

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Youngxj

杨小杰站长之家工具箱1.0

15940
来自专栏前端新视界

Carousel 旋转画廊特效的疑难杂症

疑难杂症 该画廊特效的特点就是前后元素有层级关系。 我想很多人应该看过或者用过这个插件carousel.js,网上也有相关的教程。不知道这个插件的原型是哪个,有...

24350
来自专栏Jackson0714

【Discuz】云平台服务:出了点小错,由于站点ID/通信KEY等关键信息丢失导致Discuz!云平台服务出现异常

33870
来自专栏厦门SEO

Google - AMP框架分析及外贸站接入解决方案!

AMP(Accelerated Mobile Pages – 加速移动页面)是 Google 推出的一种为静态内容构建 Web 页面,提供可靠和快速的渲染,加快...

60370
来自专栏杨龙飞前端

vue重构后台管理系统调研

Q4要来了,我来这家公司已经一个季度了,通过对公司前端框架的整体认识,对业务的一些认识,发现,这些东西也都是可以重构,无论是v2,还是v3的代码。

23810
来自专栏DeveWork

WordPress评论回复邮件样式美化教程

在上一篇文章《 免插件仅代码实现WordPress评论回复邮件 》中Jeff 提供了三种回复邮件样式类型。在你将需要的类型实现后,如果去测试一下,你会发现邮件的...

30660
来自专栏九彩拼盘的叨叨叨

网页PPT: reveal.js 介绍

reveal.js 是一个展示内容的框架,可以简单的理解为网页版的PPT。我们用 reveal.js 做出来的PPT其实是一个HTML文件。

56020
来自专栏IMWeb前端团队

2015-2016前端架构体系技术精简版

2015-2016前端架构体系技术精简版 ? 点击查看github高清图 点击查看完整版 一、框架与组件 **bootstrap等UI框架设计与实现 伸缩布局...

24150
来自专栏假装我会写代码

两行代码实现一个地址选择器

28220
来自专栏青玉伏案

iOS开发之调用系统打电话发短信接口以及程序内发短信

  在本篇博客开头呢,先说一下写本篇的博客的原因吧。目前在做一个小项目,要用到在本应用程序内发验证码给其他用户,怎么在应用内发送短信的具体细节想不大起来了,于是...

33850

扫码关注云+社区

领取腾讯云代金券