AMP 2020 線上發表重點整理

AMP 2020 線上發表重點整理

去年AMP在東京舉辦了盛大的專題發表,今年由於疫情的關係原定6月在紐約的發表會取消,改為10月13日開了線上直播分享現況、進展、未來目標。
5月時Google 發表了網頁關鍵指標,AMP也跟進追上指標,希望AMP的使用者能擁有最佳的使用體驗。以下挑選了幾項主題整理重點與大家分享。

一、amp的下一步

演講中強調Page Experience頁面體驗重要性,而使用AMP能達到該標準

一般想優化頁面體驗有三種作法:

  1. 原本網站自行優化,但可能維護和更新成本高
  2. 一般網頁再加做AMP頁面,讓搜尋來的人有較佳體驗(但有維護兩份資料的問題)
  3. AMP first 或 AMP Bento

AMP first為全站AMP,AMP Bento則是在一般網頁中放入AMP套件並且優化,但此項仍在開發中。

AMP Bento目前的進展

  • 會有更多的Component進到AMP Bento,達到一定程度時將會把AMP Bento釋出,並且發布React和Preact組件中
  • 最後期待不需要AMP Runtime 仍能讓頁面最佳優化

 

二、使用AMP保持高生產力的5種方式

此段由工程師出來講述在使用AMP開發網站的優缺點,他們製作了一個美妝評價網站

  1. AMP有許多套件,在應用上很方便;但也不要認為AMP是完美的,她會有必須要調整的地方(例如範例網站在ie11曾出現圖片未出現的問題,必須自己試著解決)
  2. 建議使用適合的環境開發,例如React 、 Next.js 開發會更快。缺點與上一項類似,AMP仍在發展中,有一些要自行解決的bug
  3. 維護AMP是否容易? 網路環境每日在變化,應保持更新以利穩定
  4. off-cache AMP 緩存外的網站,不使用閃電html,改以使用了amp optimizer讓網頁於主機端就是優化。
  5. AMP和PWA完全相容,各種指標分數優秀。
  6. 雖然AMP追著關鍵指標,但因為作法的關係即使是AMP也有可能不符合關鍵指標


三、AMP高效能的WEB開發

概述2020年AMP的開發方向與目標

  • 符合關鍵指標
  • css可使用範圍更大、更好(目前為75kb,未來可能會再提出更優化css的方式)
  • AMP上可使用互動廣告
  • 希望AMP能夠提供開發人員簡單易維護又能夠保有頁面最佳效能


四、高效能頁面體驗開發

  • Google blog有宣布頁面速度體驗將會成為排名因素,無論是否為AMP
  • AMP目標為提供最佳的頁面體驗,符合Web Vitals
  • 當符合Web Vitals時,使用者離開頁面的機率會降低24%
  • chrome用戶體驗報告(chrome user experience),顯示目前為止有12%非AMP頁面、60%AMP頁面能符合Web Vitals

AMP版的頁面不符合Web Vitals的常見原因


AMP做了哪些可以達到符合關鍵指標?

LCP

  1. CSS限制最多只能75K可以讓頁面快速載入
  2. JavaScript最小化並且延遲載入
  3. 網頁渲染速度極快

FID

  1. JavaScript最小化讓元素顯示和互動時間變短
  2. JavaScript延遲載入
  3. .lazy loading 讓頁面不會出現尚未出現的物件,進而影響頁面載入
  4. Chunked processes 流程分塊,長的任務會被拆開

CLS
AMP會對每個元素先預先保持好寬高大小,不會影響版面偏移

以上是目前所整理出來的幾項要點,可見GOOGLE關鍵指標將影響網頁許多評分與SEO。若想知道更多也可以觀看他們其他影片
https://amp.dev/events/amp-fest-2020/

更多文章:

  1. AMP教學-amp-img圖片
  2. AMP教學-amp-carousel 輪播
  3. AMP教學-amp-instagram把IG照片放入文章中
  4. AMP的現況與未來趨勢
  5. AMP的SEO效果到底如何?