加速行動版網頁(AMP, Accelerated Mobile Pages)

加速行動版網頁(AMP, Accelerated Mobile Pages)

加速行動版網頁(AMP, Accelerated Mobile Pages)

加速行動版網頁(AMP, Accelerated Mobile Pages)是Google推出的一套框架,用來使行動裝置網頁能快速載入。 在Search Console上會看到提示建議Webmaster使用與提交這樣的頁面。

加速行動版網頁(AMP, Accelerated Mobile Pages)

官網的教學會一步一步帶著完成一個AMP頁面,接下來還可以從撰寫好的範例中看看怎麼實際使用到現實專案上。  

AMP共分三部份:

  • AMP HTML:HTML必須按規格撰寫,例如:圖/影音檔、廣告、社群分享或UI元件等必須使用AMP指定的標籤,像是:<amp-img><amp-carousel> 等。
  • AMP JS:只能使用AMP的元件,不允許使用自己撰寫或第三方的JS,如果要使用必須放在sandboxed iframe裡面。 但AMP開發的元件選擇其實很少。
  • Google AMP Cache:格式正確的AMP頁面會放到Google AMP Cache,顯示在Google Search的Top Stories版位。

優點/成效

來說說使用AMP的優點,也就是使用後的成效。

  • 頁面載入速度快
  • 跨瀏覽器支援:Chrome, Firefox, Edge, Safari and Opera。 注意,如果使用Windows Phone,IE只能用 Edge噢。
  • 在Google搜尋結果頂端的Top Stories以卡片呈現內容,吸引使用者點擊瀏覽該頁面。

限制

使用AMP的限制非常多,而Google也解釋,這些限制是因為希望提供較佳的效能。

  • 基本上AMP只能是靜態頁面。如果需要使用JS,只能使用AMP的元件(但元件選擇很少)。不允許使用自己撰寫或第三方的JS。若要使用第三方的JS,則必須放在sandboxed iframe裡面,避免阻擋頁面載入。其中iframe必須距離頂端600px或75%。
  • 外部資源的引用(例如:圖檔、廣告、iframe等)必須在HTML中宣告大小,讓AMP確定每個元件的大小和位置,使得頁面載入時避免等待由於某些資源的載入、重新安排與計算layout的問題。
  • 字型若要使用外部檔案,只能使用特定供應商的字型。
  • 只允許inline styles,並且只能放在header<style amp-custom></style> 之內,,大小必須小於50KB。不允許使用inline style attributes。
  • 只能使用GPU-accelerated animations。
  • 會對下載的資源的優先順序進行管控。例如:對需要優先下載的資源做prefetch、圖檔和廣告只有需要被看見時才載入。

電商網站的範例:eBay

目前使用AMP的頁面大多是新聞網站的頁面,而很特別的是,eBay居然宣布開始使用AMP了。但我很好奇,Top Stories的類型多為新聞、食譜,目前沒有看到商品,eBay做這個是為未來Top Stories新增商品類型做準備嗎?

eBay製作的AMP頁面是站內搜尋頁,而它的站內搜尋頁有兩個版本:未使用AMP、使用AMP。點開下面的連結來看看使用與未使用AMP的差異:

實作

我也幫「吃什麼,どっち」做了一個AMP的頁面,可以用手機點開來看。

範例

測試與驗證

網址後加上 #development=1,即可在瀏覽器的JavaScript Console檢視錯誤訊息。

備註

  • 做好AMP的頁面後,必須要讓搜尋引擎爬到。因此可以連接AMP與非AMP版本的頁面、使用RSS提交等方式。
  • 可結合結構化資料使用,畢竟使用AMP之後要使用Microdata是很辛苦的阿。

結論

目前台灣在Google SERPs上是沒有看到Top Stories(如果有看到請跟我說),所以扣除AMP可以在Top Stories吸引使用者點閱外,就只剩下使用行動裝置瀏覽時能快速載入的優點了。因此,目前對我來說,AMP就是個類似Bootstrap的前端框架,依照規格撰寫與應用,組成行動裝置版本的網頁,然後優點是效能很好。


References


由於部落格搬家了,因此在新落格也放了一份,未來若有增刪會在這裡更新-加速行動版網頁(AMP, Accelerated Mobile Pages)

留言