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
- update-cache request amp_ts: 目前時間,須轉換成秒格式
CVT2HUGO: amp-custom></style>```裡面
https://example-com.<cache.updateCacheApiDomainSuffix>/update-cache/c/s/example.com/article?amp_action=flush&_ts=<ts_val>&_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
谷歌將在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/