AMP - Accelerated Mobile Pages 技術預覽

意象說明

行動網頁

Google AMP 是用來加速顯示靜態網頁內容的技術。

主要由三個部份組成:AMP HTML (content), AMP JS (runtime), Google AMP Cache。

其中 AMP HTML 及 AMP JS 牽涉到內容的技術部份,可以一併來檢視。可以這麼說,為了達成瞬間顯示的效能,這兩項技術禁用一些容易阻塞瀏覽器的元素:

  1. Style 必須內聯定義,以加速版面的計算。
  2. 除了 AMP 元件必要的 JavaScript 之外,禁用其他 JavaScript。以避免諸如 document.write(), 或動態改變 class, style 等造成 reflow 的狀況。
  3. 所有的外部資源均需要使用訂製的 AMP 元件來引用,以便由 AMP 管理資源的載入順序。主要是為了要讓網頁最前面可視區域能最優先顯示。
  4. 所有的外部資源均需要設定尺寸大小,以便在資源實際載入前,先行計算 layout。讓畫面不會在資源載入後又重新計算。

第四點乍看之下似乎限制了 RWD 的可能性,但實際上所有的元素仍然可以使用 media query,根據不同媒體設定可視尺寸。
不過這同時也導致一個疑惑,既然元素實際顯示的大小,可以使用 media query 改變,若設定的大小與 media query 指定的不同,不是又會造成 reflow 嗎?

關於這部份的技術細節部份,留待下一篇文章,介紹如何開發符合 AMP 規格的頁面時,再詳細介紹。

至於 Google AMP Cache,則是利用 Google 無所不在的 CDN,讓內容可以就近取得,加速網頁的下載。

與 Apple News 及 Facebook Instant Articles 的比較

已經有許多文章對此進行了詳細的比較,總結來說,有以下的差異:

體驗不同

Apple News 及 Facebook Instant Articles 雖然也強調速度,但同時更強調他們的技術可以提昇互動與沈浸體驗 (interactive and immersive);而 Google AMP 則並未著重在內容體驗上,而是主打呈現速度。

載具不同

Apple News 及 Facebook Instant Articles 都必須使用特定的 App 來存取;而 Google AMP 則是獨立的頁面,可以使用任何瀏覽程式閱讀。

驅動方式不同

Apple News 及 Facebook Instant Articles 基本上都是透過類似 RSS 的技術來遞送內容,而 Google AMP 則不預設任何方式來發現內容 (基本上 Google 當然是希望讀者透過自家的搜尋引擎),並透過標準 HTTP/HTTP2 來傳送。

限制不同

Apple News 及 Facebook Instant Articles 基本上都是透過平台本身的技術來加速與強化內容,因此在格式上未做太多限制;而 Google AMP 由於不允許使用自訂 JavaScript,因此即便是廣告都必須符合 AMP 的規範,透過特定的 AMP 元件來引用。

簡單地說,Apple News 及 Facebook Instant Articles 算是 CMS 平台,而 Google AMP 則是格式。

有網友說,不像 Facebook 採用的是標準的 HTML 5,『AMP 並不是標準的 HTML, 應該算是 HTML 的延伸並有自己定義的 AMP 屬性』。事實上,AMP 採用的是 Web Components 技術,而 Web Components 又依賴於 Shadow DOM,雖然這些標準仍然處於草案階段,但是實際上已是相當成熟的技術,並且已有 polyfill 可以支援現有的主流瀏覽器。相反地,Facebook Instant Articles 必需以 Facebook App 閱覽,而不是瀏覽器,是否採用 HTML 5 的標準,根本已無關緊要。

另外,所謂 『Facebook Instant Articles 會自動幫內容出版商做格式轉換,這點 Google AMP 相較於 Facebook Instant Articles 略遜一籌。』

我想這一點恐怕是見仁見智。

首先,就誘因而言,若出版商不需做任何處理,就可以讓內容呈現在 Facebook Instant Articles 上,出版商的接受度當然是會提高。但關鍵是,Facebook Instant Articles 並未公佈技術細節,出版商並沒有最終內容呈現的控制權,你無法控制內容最終呈現在讀者面前的樣貌,甚至於部份內容 (因為即時顯示的需要) 被移除了,你完全無權置喙。

相對地,Google AMP 是 Open Source,所有的技術公開,除了 WordPress 已經支援 AMP,毫無疑問,很快地就會有大量的工具出爐,協助出版商轉換內容。無論是否透過工具自動轉換,出版商對於最終內容的呈現,擁有完整的控制權。

結論

自從首度發布,可以看到 AMP components 的數量不斷成長,也就是說,AMP 頁面可以承載的內容,也越來越豐富了。可以這麼說,AMP 是一個不斷發展,充滿生命力的技術。當然,這還是要歸功於 Open Source 的力量。

參考資料