部署谷歌加速移动网页（AMP）

第一部分 – 第21章

CSS JS

加速移动网页(AMP)是一个谷歌(Google)支持的开源项目，支持你为静态内容开发网站页面，且渲染更快。AMP由3个主要部分组成。

  • AMP HTML
  • AMP JS
  • Google AMP Cache

AMP HTML

AMP HTML是进行自定义AMP属性扩展的HTML。如下是一个有典型AMP HTML HEAD部分的移动网站页面。 

<!doctype html>
<html ⚡>
 <head>
   <meta charset="utf-8">
   <link rel="canonical" href="hello-world.html">
   <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1">
   <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>
   <script async src="https://cdn.ampproject.org/v0.js"></script>
 </head>
 <body>Hello World!</body>
</html>

AMP JS

AMP JS是一个JavaScript 库，可部署AMP的最佳性能实践并为移动网站页面提供自定义标签。使用自定义标签将确保网站页面在移动环境下能快速渲染。

AMP JS允许资源异步下载，因此移动网站页面上的任何内容都无法阻塞页面渲染。

谷歌AMP缓存

谷歌AMP缓存是一个基于proxy的内容分发网络。

  • AMP缓存在分发启用了AMP的文件（例如网站页面，资源文件等）时发挥作用。
  • AMP缓存获取AMP HTML页面，进行缓存，并提升页面性能。
  • 为了获得性能最大化，AMP缓存从使用了http2.0的相同的来源加载HTML页面，JavaScript文件以及所有的图片。
  • Google AMP有一个内置的有效性验证特性，能够确认一个网站页面在AMP缓存上有效运行。

一个例子：配置AMP Head部分

一个AMP HTML页面必须有如下的自定义标签。

<!doctype html>

网站页面以如下代码开始： 

<!doctype html>

<html ⚡> or <html amp>

附上HTML5文件，带有<html ⚡> 或者 <html amp>。也可能会出现<html ⚡ lang=”en”>或<html amp lang=”en”>。例如： 

<html amp lang="en">
   ...
</html>

Head部分

Head 部分必须与<head> 和 </head>一同出现。例如： 

<head>
  ...
</head>

Charset

Charset属性必须是Head部分第一个META标签内容。例如： 

<head>
   <meta charset="utf-8">
   ...
</head>

包含并加载AMP JS库的脚本

这个脚本用于包含并加载AMP JS库。它必须作为head部分的第二个标签内容被引入。例如： 

<script async src="https://cdn.ampproject.org/v0.js"></script>

rel="canonical"和rel="amphtml"

必须包含一个rel=”canonical”属性。

如果你的移动网站页面有两个版本（例如第一个是普通版本，第二个是AMP版本），那么AMP版本是： 

<link rel="canonical" href="https://www.chinamobileseo.com/buy/" />

普通版本是: 

<link rel="amphtml" href="https://www.chinamobileseo.com/buy-amp/" />

如果移动网站页面只有一个版本，那么在rel=”canonical”属性中它应该指向页面自身： 

<link rel="canonical" href="https://www.chinamobileseo.com/buy/" />

ViewPort

在Head部分必须包括一个viewport指定如下内容： 

<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1">

amp-boilerplate

必须在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>

Body部分

Body部分必须附有<body>和</body>。例如： 

<body>
  ...
</body>

完整的AMP HTML页面

将所有的AMP元素放在一起并组成移动网站页面。 

<!doctype html>
<html ⚡ lang="en">
  <head>
    <meta charset="utf-8">
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <title>Buy the China Mobile SEO Book</title>
    <link rel="canonical" href="https://www.chinamobileseo.com/" />
    <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1">
    <script type="application/ld+json">
      {
        "@context": "https://schema.org",
        "@type": "NewsArticle",
        "headline": "Open-source framework for publishing content",
        "datePublished": "2016-04-13T12:02:41Z",
        "image": [
          "logo.jpg"
        ]
      }
    </script>
    <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>
  </head>
  <body>
    <h1>Why Buy the China Mobile SEO Book?</h1>
  </body>
</html>

在AMP中包含图片

当在启用AMP的移动网站页面包含图片时，将图片加到<amp-img>和</amp-img>中。如下是应当如何包含图片： 

<amp-img src="https://www.chinamobileseo.com/images/the-china-mobile-seo-book-cover-191x239.jpg" alt="The China Mobile SEO Book Cover" height="239" width="191"></amp-img>

为了包含一个响应式图片，可以指定宽和高，设置布局为”responsive”，并指定多图片大小为”srcset”。 

<amp-img
  src="/images/narrow-image.png"
  srcset="/images/wide-image.png 640w,
         /images/narrow-image.png 320w"
  width="1698"
  height="2911"
  layout="responsive"
  alt="The China Mobile SEO Book">
</amp-img>

警告

在部署AMP之前，必须做好对移动网站（和/或网站页面）开发方式作重大改变的准备。

部署内嵌CSS

必须内嵌所有网站页面的CSS。

问题：

  • 当你将所有内嵌CSS放置到每个网站页面上，网络浏览器将不会缓存内嵌CSS。
  • 当你的移动网站包含有几千个页面时，维护CSS将成为一个非常繁琐的项目。

部署异步JavaScript

必须使你的JavaScript异步。当使用AMP时，异步JavaScript不会阻塞移动网站页面的渲染。

一个使用JavaScript的常用方法就是将你的JavaScript放置到一个外部文件中，然后在网站页面的head部分包含这个文件。例如，外部文件为main.js。 

<head>
<script src="http://m.example.com/main.js"></script>
</head>

添加async属性，使外部JavaScript文件异步。 

<head>
<script src="http://m.example.com/main.js" async></script>
</head>

问题：

  • 并不是所有的移动网站页面都可以部署异步JavaScript。由于某些原因，部分JavaScript必须先完成加载，否则页面上的一些交互功能就无法正常工作。
  • 如果你的移动网站已经在使用一个或两个基于JavaScript的前端框架（例如jQuery mobile），并部署AMP，这个网站页面可能会无法正常工作。

移动网站性能技术白皮书在2017年3月正式出版。

英文版：Implement Google Accelerated Mobile Pages (AMP) – 繁体中文版：部署谷歌加速移动网页（AMP）






移动网站性能技术白皮书上的内容按下列许可协议发布： CC Attribution-Noncommercial 4.0 International

Gordon Choi's Mobile Website Book