AMP 2020 線上發表重點整理
BY kate │
去年AMP在東京舉辦了盛大的專題發表，今年由於疫情的關係原定6月在紐約的發表會取消，改為10月13日開了線上直播分享現況、進展、未來目標。
5月時Google 發表了網頁關鍵指標，AMP也跟進追上指標，希望AMP的使用者能擁有最佳的使用體驗。以下挑選了幾項主題整理重點與大家分享。
一、amp的下一步
演講中強調Page Experience頁面體驗重要性，而使用AMP能達到該標準
一般想優化頁面體驗有三種作法:
- 原本網站自行優化，但可能維護和更新成本高
- 一般網頁再加做AMP頁面，讓搜尋來的人有較佳體驗(但有維護兩份資料的問題)
- AMP first 或 AMP Bento
AMP first為全站AMP，AMP Bento則是在一般網頁中放入AMP套件並且優化，但此項仍在開發中。
AMP Bento目前的進展
- 會有更多的Component進到AMP Bento，達到一定程度時將會把AMP Bento釋出，並且發布React和Preact組件中
- 最後期待不需要AMP Runtime 仍能讓頁面最佳優化
此段由工程師出來講述在使用AMP開發網站的優缺點，他們製作了一個美妝評價網站
- AMP有許多套件，在應用上很方便；但也不要認為AMP是完美的，她會有必須要調整的地方(例如範例網站在ie11曾出現圖片未出現的問題，必須自己試著解決)
- 建議使用適合的環境開發，例如React 、 Next.js 開發會更快。缺點與上一項類似，AMP仍在發展中，有一些要自行解決的bug
- 維護AMP是否容易? 網路環境每日在變化，應保持更新以利穩定
- off-cache AMP 緩存外的網站，不使用閃電html，改以使用了amp optimizer讓網頁於主機端就是優化。
- AMP和PWA完全相容，各種指標分數優秀。
- 雖然AMP追著關鍵指標，但因為作法的關係即使是AMP也有可能不符合關鍵指標
概述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的常見原因
- LCP沒有達標
- 改善建議: 圖像、CSS、JS壓縮以達最佳化，不要有過多未使用的AMP套件js
- 新工具-測試AMP頁面有沒有符合關鍵指標和改善
AMP做了哪些可以達到符合關鍵指標?
LCP
- CSS限制最多只能75K可以讓頁面快速載入
- JavaScript最小化並且延遲載入
- 網頁渲染速度極快
FID
- JavaScript最小化讓元素顯示和互動時間變短
- JavaScript延遲載入
- .lazy loading 讓頁面不會出現尚未出現的物件，進而影響頁面載入
- Chunked processes 流程分塊，長的任務會被拆開
CLS
AMP會對每個元素先預先保持好寬高大小，不會影響版面偏移
以上是目前所整理出來的幾項要點，可見GOOGLE關鍵指標將影響網頁許多評分與SEO。若想知道更多也可以觀看他們其他影片
https://amp.dev/events/amp-fest-2020/
