[AMP] First AMP Page

AMP = Accelerated Mobile Pages,Google帶領開發的開源專案,目的是為提升行動裝置對網站的存取速度。沒寫過,所以要來學,這一篇就是學習過程中的筆記

AMP 基本組成

一個合格的 AMP 一定要有以下的元素

  1. 第一行一定是 <!doctype html>

  2. 一定有 <head></head><body></body> 兩個區塊

  3. <html> 標籤內要標示閃電符號 (<html ⚡>,或是 amp 文字 (<html amp>)

  4. <head> 的第一個元素一定是 <meta charset="utf-8">

  5. <head> 內會有 <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">

  6. <head> 內要有 <script async src="https://cdn.ampproject.org/v0.js"></script>,這一行越早寫越好

  7. <head> 內要有 <link rel="canonical" href="$SOME_URL">$SOME_URL 要替換成目前頁面的網址,目的是要連結目前的 AMP 頁面到非 AMP 頁面或是網站

  8. 包含 AMP-Style: 這段程式碼會在 AMP Script 載入前將畫面隱藏

    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>

AMP 限制

CSS

在 AMP 上面要使用自訂 CSS 有以下的設定

  1. 自訂 CSS 必須定義在 <style amp-custom></style> 內且只能有一個或是 inline-style,為了節省網路傳輸,不能有外部 style 連結
  2. CSS 內容的部分大小不能大於 75 K
  3. 不能使用 !important
  4. 不能寫 i-amphtml- class 和 tag 名稱,簡單說不能使用 AMP Component 要用的名稱
  5. 其它能用不能用的 CSS Style 請參閱 Suppored CSS

HTML

除了 CSS 有限制外,HTML 也有允許跟不允許使用的列表 ,HTML5 Tag 白名單

更多詳細資訊可以閱讀此文,AMP HTML Specification

開發思維

AMP 的開發方式,基本上是使用官方提供的 Component 去組出畫面,所以在內容呈現上就是要找到對的 Component 然後將內容套進去,例如 <img>,就會用 <amp-img> 替代

1
<amp-img src="IMG-URL" layout="responsive" width="640" height="480"></amp-img>

所有的動作就交給 component 來處理,像是 RWD 的效果,除了 responsive 的效果外,當然還有其他的設定,設定方式請參閱官方文件 AMPHTML Layout System 章節

使用 AMP Components

每一個 AMP Component 在自己的 API 文件中,大部分都有 Required Scripts 的資訊,而這一個資訊就是要加到頁面中,例如 amp-youtube 元件

1
<script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>

基於這種架構,寫 AMP 的第一個門檻是要使用哪一個 component。(怎麼跟 Flutter 好像),更多關於 Component 的可以參閱 Components 文件

驗證工具

Chrome 有出 AMP 驗證工具,安裝後即可使用,安裝位置

參考資料