AMP 簡介

根據Google統計報告指出,載入網頁時間如果大於三秒,流失用戶的可能性就會大增,

因此,在 Google 在 2016 年正式推出了"加速行動版網頁"(Accelerated Mobile Page, AMP),以下簡稱 AMP,

AMP 能讓跨裝置的使用者都能更快速的載入網頁,讓網頁能有更好的體驗,

只要根據官方的HTML結構進行設定,調整 html、js、css 設定,

再將頁面提交給Google DNS,Google就會將AMP頁面進行快取緩存,

當使用者搜尋你的網頁時,Google會先將快取裡的資料顯示給使用者,

依據官方資料顯示,經過AMP優化的頁面可以提高四倍的載入速度!

接下來就開始來了解 AMP 的原理~

AMP 結構說明

AMP可以分成三個部分

  • AMP HTML - AMP HTML基本上是使用定制AMP屬性擴展的HTML
  • AMP JS - AMP JS 庫,主要是處理AMP HTML頁面的快速渲染
  • AMP Cache - 用於提供緩存的AMP HTML頁面

SEO

目前官方說明僅透露 AMP 設定不會影響SEO,

但官方仍不直接證實 AMP 可以加強SEO,幫助搜尋引擎排名,

但是實際上測試,經過AMP優化的頁面確實可以有效的增加排名,

(圖片來源: http://www.jiayang.me/1883/)

支援

Chrome, Firefox, Edge, Safari, Opera and Edge

限制

AMP目前階段僅建議單純使用他的框架情況下來建構, 意思就是,如果你想搭配 vue, react…等框架,官方就直接回應: 不建議也不支持

只允許在本頁的樣式,並且統一放在```<style

清除AMP快取內容

https://developers.google.com/amp/cache/update-ping 更新AMP快取的內容,可以透過 update-cache 或是 update-ping

  1. update-cache request amp_ts: 目前時間,須轉換成秒格式
CVT2HUGO: amp-custom></style>```裡面
https://example-com.<cache.updateCacheApiDomainSuffix>/update-cache/c/s/example.com/article?amp_action=flush&amp_ts=<ts_val>&amp_url_signature=<sig_val>

其他所需要的參數可以參考這裡來取得(直接打開瀏覽器輸入位置即可) https://cdn.ampproject.org/caches.json

AMP官方網站連結

範例網站 https://ampbyexample.com/components/amp-img/#basic-usage

http://cythilya.blogspot.tw/2016/08/amp_21.html

http://www.jiayang.me/1883/

谷歌將在2016年向所有人推出AMP 移動頁面加速項目 http://www.oschina.net/news/68425/googles-accelerated-mobile-pages-will-speed-up-the-web-in-2016

Accelerated Mobile Pages http://www.oschina.net/p/accelerated-mobile-pages

amphtml https://github.com/ampproject/amphtml

Custom Elements http://www.html5rocks.com/en/tutorials/webcomponents/customelements/

提供的範例 https://www.ampbyexample.com/