Blog

Blog

PHODAL

Google AMP 网页加速实战

虽然这项技术已经在半年前出现了,一直没有实践的主要原因是:没有动力。直到最近才发现这货已经在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 async src="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. 图片问题,这个问题我已经不想理了。。所有的图片标签都要变成<amp-img>,并且还要在里面写定图片的大小——这意味着,我要Review之前的所有图片,或者写上相应的图片大小。
  4. 页面里是不能有form标签的,删除所有的form。
  5. 页面里还不能有用img的分析代码。

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

关于我

Github: @phodal     微博:@phodal     知乎:@phodal    

微信公众号(Phodal)

围观我的Github Idea墙, 也许,你会遇到心仪的项目

QQ技术交流群: 321689806

新书《前端架构:从入门到微前端》

《前端架构:从入门到微前端》是一本围绕前端架构的实施手册,从基础的架构规范,到如何设计前端架构,再到采用微前端架构拆分复杂的前端应用。本书通过系统地介绍前端架构世界的方方面面,来帮助前端工程师更好地进行系统设计。

前端架构包含以下五部分内容:

  • 设计:讲述了架构设计的模式,以及设计和制定前端工作流。
  • 基础:通过深入构建系统、单页面应用原理、前端知识体系等,来构建出完整的前端应用架构体系。
  • 实施:通过与代码结构的方式,介绍如何在企业级应用中实施组件化架构、设计系统和前后端分离架构。
  • 微前端:引入6种微前端的概念,以及如何划分、设计微前端应用,并展示了如何实现这6种微前端架构。
  • 演进:提出更新、迁移、重构、重写、重新架构等架构演进方式,来帮助开发人员更好地设计演进式架构。
comment

Feeds

RSS / Atom

最近文章

关于作者

Phodal Huang

Developer, Consultant, Writer, Designer

ThoughtWorks 高级咨询师

工程师 / 咨询师 / 作家 / 设计学徒

开源深度爱好者

出版有《前端架构:从入门到微前端》、《自己动手设计物联网》、《全栈应用开发:精益实践》

联系我: h@phodal.com

微信公众号: 与我沟通

标签