部署谷歌加速移動網頁（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