部署谷歌加速移动网页(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="http://www.chinamobileseo.com/buy/" />

普通版本是:

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

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

<link rel="canonical" href="http://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="http://www.chinamobileseo.com/" />
    <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1">
    <script type="application/ld+json">
      {
        "@context": "http://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="http://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