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

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

官網的教學會一步一步帶著完成一個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）。

搜尋此網誌

Summer。桑莫。夏天