網際網路又再次成長 Google AMP 讓行動網頁變更快!


Google AMP是什麼?

這是一種用於提升行動網頁裝載速度的技術,官方數據是提升4倍速度,1/10或更少的數據。

技術的本質是嚴格控制網頁裝載內容大小和順序,達到明顯提升用戶體驗的技術。通過「奴役」網頁的內容,達到高性能上的「自由」,就是喬治.奧威爾《1984》中提到的「戰爭即和平,自由即奴役,無知即力量」。這種奴役就是你必須使用Google的AMP格式製作網站。

Google 的說法描述:

「AMP 是讓靜態內容網頁快速呈現(render)的一種方法, 運作上,由 3 部分組成:
AMP HTML:出於效能的需求,使用受限的基本 HTML,再追加一些延伸,使保持效能又能有豐富的內容。
AMP JS 函式庫:確保 AMP HTML 頁面可以快速呈現。
Google AMP Cache:用來提供快取好的 AMP HTML 網頁。」

AMP包括三個部分:

AMP HTML:定義了一套HTML標籤,如amp-img, amp-video。使用這些tag可以確保加載的順滑。同時amp也負責管理資源何時加載,避免不必要的流量。

AMP JS:實現了所有的AMP性能優化實踐。其中最大的優化就是保證外部所有資源都是異步裝載,另外還包括Sandbox處理iFrame的模塊,資源裝載的同時預先計算出每一個元素的位置和大小;禁用慢的CSS樣式;

Google AMP Cache:為了推動AMP,Google提供免費的全球CDN服務,可以緩存圖片,靜態文件等,使用HTTP2.0協議保證緩存的高效率。免費的代價就是必須使用AMP格式。

AMP十個優化技術(不限於):

  • 只允許異步的Script裝載
  • 靜態計算資源的佈局大小
  • 不允許擴展機制阻止頁面生成
  • 關鍵路徑中不允許第三方腳本
  • CSS通過直接嵌入,並且有大小限制
  • 字體下載優化
  • 最小化樣式重新計算
  • 只運行GPU加速的動畫
  • 資源裝載的優先級管理
  • 預裝載於急速顯示

AMP的設計理念:

越快越好(Faster is better)
美麗也非常重要('Beautiful' matters)
安全是必須的(Security is a must)
合作成長(We're better together)

這裡是一個AMP的代碼例子:

Canonical定義了經典地址,如客戶端不支持AMP,跳回傳統連結。AMP定義了很多amp-開頭的Tag,限制了很多動態效果,http://AmpProject.org/v0.js包含了很多優化技術,透明使用即可獲得加速AMP技術目前主要用於內容發行商出版內容,例如新聞網站,報社等。他們通過改造CMS系統,生成AMP-HTML格式網頁,以提升網頁裝載性能,免費使用Google的全球CDN服務。同時,為了支持傳統的頁面,他們也需要生成傳統的頁面連結(HTML)。

AMP的一些標籤可以也許可以足夠表達靜態內容,但是作為一個行動生態,這是遠遠不夠的,任何一個生態就是流量和變現的相輔相成。變現需要廣告SDK支持,流量需要精細化運營提升,需要統計分析工具。因此AMP需要成長必須完善下面兩個方面:

  1. 廣告
  2. 數據統計

AMP在這兩個方面也有獲得了積極的支持。AMP社區開始支持部分的廣告服務和數據分析服務。廣告服務包括Double Click、A9等,數據服務包括Adobe、Google Analytics。

AMP的戰友:

懷揣行動性能提升的理想,不僅僅有通用領域的AMP,還有它的戰友們,也推出垂直的解決方案,等待時機和技術成熟隨時向通用發展,如:

Facebook Instant Articles

Facebook應用內的文章框架,採用基於HTML編碼框架,類似AMP的想法,支持Facebook中,通過預先裝載提高速度。這個框架直接對接了主流的大的新聞網站(NYtimes、國家地理、NBC、BBC等)。官方數據是:性能大大提升,20%更多點擊;70%更少的逃離率;30%更多的分享。

「內容」身處黃金時代,而它擅長偽裝成「知識」

從 3 個角度來分析為何我們需要自動化行銷