認識 AMP Accelerated Mobile Pages

什麼 AMP

AMP(Accelerated Mobile Pages) HTML, 顧名思義就是為了移動裝置而存在的新版設計.可以更快速的有效提供網頁資訊 . 根據Google自己的說法:有影音、動畫、圖片及智慧廣告等豐富內容的網頁可以瞬間呈現. 這是一個開源的計畫,因此開發者們可以在不同的平台和設備上使用,用戶就可以在更多的內容上體驗到這一新技術的快感。

AMP 的 3 大核心

  1. AMP HTML
  2. AMP JS
  3. AMP cache

1. AMP HTML

AMP HTML 並非是一種全新的語言, 他是根據原有的 HTML 再去做一些延伸。 因此你只要會 HTML 要上手 AMP 並非難事

2. AMP JS

AMP JS 目的是用來確保 AMP 網頁上的效能

3. AMP cache

Google AMP Cache 算是一種 Proxy 會將你原生網頁的內容在 Google  CDN 的機器也備存一份. 提供給使用者瀏覽.

AMP CSS

AMP CSS 只有 50 k … 所以很少很少…. 要小心使用.
不過也告知使用者在設計頁面時. 不要給予太多花俏的東西.. 手機的顯示螢幕有限. 多了沒有意義
帶出來的問題則是
我們都希望 CSS 可以集中管理. 手機/桌機 都共用一份就好了
而在思考 AMP 時. 必須先要拋棄這樣的觀念.. 他是為了快.. 所以就是要精簡.
且是 inline

範例 :  https://blog.lalacube.com/mei/yahoo_auction_amp.html

相關網址:

https://www.ampproject.org/learn/overview/

 

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *