什麼是AMP網頁?號稱能優化網站速度的 AMP ,適合導入我的網站嗎?

seo, websites, web page

什麼是 AMP

在探討網站是否適合導入AMP 前,先簡單介紹什麼是AMP?

AMP 是一種 Web Component Framework (網頁組件框架),是一個開源專案,目的是方便我們建立使用者體驗良好的網頁、廣告、Email 、或故事等等。

參考:AMP – a web component framework to easily create user-first web experiences – amp. dev

AMP 可以提升怎樣的使用者體驗呢,就是速度、速度、還是速度。
使用 AMP 最明顯最大的好處就是大幅度提升網頁載入的速度。

我們在建立 AMP 網頁時,實際上是建立符合 AMP 規範的 HTML 網頁,這與一般的 HTML 不太相同,符合 AMP HTML 規範的網頁,才能享有 AMP 的特性。

參考:製作 AMP HTML

AMP 的設計原則是使用者體驗優先,開發者體驗其次,不管技術實現有多大難度,優化使用者體驗為最高優先,這表示 AMP 對專業工程師也是一項挑戰。

速度自然是 AMP 的最高優先,任何只要能加快網頁顯示速度,對 AMP 來說就是正確的方向。

導入 AMP 的網站,通過 PageSpeed Insights 測試的,比沒有導入 AMP 的網站,大概多了五倍,表示 AMP 網站大多能符合 PageSpeed Insights 的核心體驗指標 (Core Web Vitals)。

來源:amp.dev

AMP 有什麽特色

  1. 所有 Javascript 都是非同步執行。
  2. AMP 在下載時就知道網頁的顯示大小。
  3. 確保延伸Javascript 功能不會阻礙網頁渲染。
  4. 所有 CSS 必須內嵌且有最大限制,50K。
  5. 確保下載網頁字型不會阻礙網頁渲染。
  6. 網頁最多只需要一次重新佈局。
  7. 只用 GPU 顯示 CSS 網頁動畫。
  8. 優先下載限制重要的資源。
  9. 預先加載資源,在顯示時可幾乎瞬間載入完成。

以上種種特色帶來的是,更佳的使用者體驗,跟多的使用者互動,更低的網站跳出率。

AMP 不是 SEO 的關鍵因素,但速度是。

AMP 在 PageSpeed Insights 上的分數通常都比較高,Core Web Vitals 也是 Google 一直在提醒我們的 SEO 重點。

Google 搜尋服務導入網頁體驗的時機點  |  Google 搜尋中心網誌  |  Google Developers

事實上~

AMP 並不是一個簡便的捷徑,可以無腦快速優化網站。

並不是安裝一個大家都推薦的 AMP 外掛,就可以達成秒開。

AMP 的限制

AMP 並不是完美的解決方案,專業團隊都必須了解 AMP 的限制,才有辦法發揮 AMP 的力量。

17 年的 AMP 研討會,一群 Google AMP 開發團隊,分享使用 AMP 開發上的經驗。

完整影片請參考:

就算是世界頂尖的專業開發者,都會覺得這是一個挑戰。當然,結果令人滿意。

會中提及 AMP 的一些限制與他們如何處理技術問題:

  1. 客製化 Javascript 有很多限制
  2. 僅能使用 AMP 定義的 HTML 元件
  3. CSS 有最大大小限制

還有一些複雜邏輯,互動也必須移除掉。

網頁滑動時的特效也移除,例如:

  • 淡入淡出效果
  • 改變網頁標頭
  • 網頁平滑滾動

愈來愈多的成功經驗分享。參考:Success Stories – amp.dev

但一個獨立架設網站的一般人,如何能輕易掌控這技術。

如果能簡單一點,大家都可以上手,工具就是工具,應該要能激發、引導、發揮一般人的創造力,引發我們的關注和興趣。

對於一般使用者,安裝 AMP 外掛並設定好,並不是很困難,只是一旦有問題,並不是很好解決。

如果你的 WordPress 要導入 AMP,我的經驗是:

  1. 及早開始使用,不同的主題和不同的外掛,都可能會面臨 AMP 限制,及早發現及早治療。網站營運一段時間後再來導入,可能會一下子面對為數眾多的 AMP 檢核錯誤,然後放棄。
  2. 多了解 AMP 特性和限制,熟悉 AMP 元件,多了解才能知道自己的網站到底適不適合,需不需要。
  3. AMP 是個持續發展的專案,也已得到很多人的關注,將來應該會有更多更好的工具,幫助一般使用者更易於導入 AMP。
  4. 一定要多看看其他網站的 AMP 經驗。
  5. 先用測試網站或 Stagin Site 安裝外掛測試。

那到底要不要導入 AMP

使用 AMP 最大的目的當然是速度,我們都希望自己的網站能秒開。

但如果秒開的代價是,減少網頁互動功能,減少 CSS 設計樣式,不能使用側邊欄小工具,還有其它諸多限制,這樣的網站是我們要的嗎?

導入 AMP 表示我們必須依據 AMP 規範優化 Javascript 的執行、優化 CSS 載入、優化 HTML 結構,當我們已經優化了這些項目,網頁速度自然會變快,那還需要 AMP 嗎?

已有很多電子商務網站在使用 AMP,優化後的效果也非常顯著,就算 AMP 有很多限制,很多挑戰,這些公司也願意花時間一個個解決這些技術問題。

每個網站的目標各有不同,面對的問題都不一樣,沒有一個簡便的方式可以方便的導入 AMP,(Reader 模式算是吧)。

然後又回到原點,這是你要的網站的樣子嗎?如果不是,又需要花多少資源將網站轉換成 AMP?

不過技術問題終究都會獲得解決,一定有某個有想法的工程師會突然想到最有創意的方式,滿足我們對網站的要求。

現階段的光輝咖碼,會繼續研究 AMP,再更深入的了解,對 AMP 技術有更大的掌控程度時,再來考慮導入 AMP。

不管要不要使用 AMP,持續網站速度優化本來就是一件持續不間斷的事。