本站已支持AMP

經過一番折騰,本站(byvoid.com)已支持AMP。具體效果就是,在手機端上打開byvoid.com上的任意一篇文章,譬如這篇,將會顯示爲AMP版本。AMP版本的加載速度比桌面版本和原有的手機版要快了好幾倍,同時需要的流量更少了,主要是受益於圖片的動態加載。

關於AMP

AMP(Accelerated Mobile Pages)是Google支持的一套開源的移動頁面標準,始於2015年。這套標準顧名思義,就是使移動頁面加載更快,提升移動端網頁的用戶體驗。衆所周知,移動端頁面的加載對用戶的影響非常巨大,因爲用戶在單頁面的手機端的耐心是以毫秒計的,然而網頁加載卻是以秒計的。有許多用戶研究表示,手機端網頁加載速度每慢1秒,就會有XX%的用戶流失(具體數字我忘了)。

AMP技術主要包括三個方面:

  • AMP HTML: HTML標籤的一套允許的子集,以及額外的amp-imgamp-video等。這些標籤可以確保頁面加載平滑,不會有大量的重新排版導致用戶閱覽困難。
  • AMP JS: 保證所有資源都異步加載,不允許關鍵路徑上的異步腳本阻止頁面生成。
  • AMP Cache: 這個纔是最關鍵的,Google提供的免費內容分發網絡(CDN),可以緩存所有文件,包括圖片。

AMP是網站原有的桌面版或手機版的補充,並不是爲了取代它們。因此AMP是和網站現有的「規範頁面」(canonical)配對的,譬如該日誌的規範頁面HTML中head標籤中有以下標籤:

<link rel="amphtml" href="/blog/byvoid-com-amp-enabled?amp=1">

對應的,在配對的AMP頁面的head標籤中也有:

<link rel="canonical" href="/blog/byvoid-com-amp-enabled">

所謂的規範頁面就是現有的非AMP頁面,可以是桌面版,也可以是手機版。

當然,整個網站只用AMP也是可以的,也就是自規範AMP。這種情況下只需要將link標籤指向自身,也就是<link rel="amphtml" href="the same url">

Google在索引使用AMP的網站的同時,會把規範頁面和AMP頁面配對索引,並且檢驗兩者內容的一致性。檢驗通過的有效AMP頁面,Google的手機版搜索結果中會顯示AMP鏈接,打開的速度非常快。目前支持快速打開AMP頁面的網站還有Twitter和Pinterest。

類似技術

Facebook也提供了類似的技術,叫做「Facebook Instant Articles」。它和AMP技術效果類似,但是方法不一樣。

中國的微信公共主頁的圖文,以及微博的長文章使用的方法也類似與Facebook。

遺憾的是,這些技術都只能在各自的「圍牆花園」中使用,而不像AMP真正是一個開源的標準。Google只是幫助緩存AMP,加快從Google搜索結果中打開的速度而已。

相關日誌