iT邦幫忙

2021 iThome 鐵人賽

DAY 29
0
自我挑戰組

真,從零建置個人網站 30 天領域展開系列 第 29

【領域展開 29 式】 認識 Google AMP

今天會寫這題目來自於在閱讀 Soledad document 的時候有一段是在講 How to set up AMP for your site,對於 AMP這詞彙是第一次認識,因此做個學習紀錄 /images/emoticon/emoticon30.gif

大家好,我是 Jade Chang
Statistic Information 畢業,入職場後於外商從事軟體技術行銷,長期規劃各種線上線下活動像是直播節目/帶狀線上教學,後期負責學生實習計畫與大專院校 Talent Cultivation 與技術社群行銷 Program 為主,過去一年轉任於台灣本土軟體開發商 PM,周旋於客戶、工程師與設計師之間並短期投身新創事業,近期轉換於新竹半導體產業,還在體驗適應中。


首先,在認識 AMP 功用前應該先知道網站速度的數據

你知道嗎?根據大數據的分析一般人進入網站,如果載入時間超過 2 秒,那麼 50% 的人就會選擇離開!在人手一機的時代,遇到任何雞毛蒜皮的事情都是直接 Google 搜尋 (大大減少腦袋思考的時間),因此網站速度決定了第一次與使用者接觸的印象

Google Ads 官方資料表示:客戶前往到達網頁後,網頁的載入速度快慢會是促使他們完成轉換或掉頭離開的關鍵因素。行動版網站的載入時間一旦超過 3 秒,訪客通常就會選擇離開,但大部分行動版網站的載入時間平均卻比這個目標多出 19 秒

然而網站速度會依據上網的裝置、連線環境、網路速度會有不同的體感效果,為避免環境造成的偏差,可以使用 Google 官方推出的網站速度計算:pagespeed的官方工具,會針對手機版與桌機版提供

分數做參考,除了分數之外,也會有明確的 items 列表說明建議改善的地方,讓所有開發者有依據的做網站優化

再來,什麼是 AMP?

Accelerated Mobile Pages(簡稱AMP,意為「加速行動頁面」)是 Google 帶領開發的開源專案,目的是為提升行動裝置對網站的存取速度,是由 Google 於 2016 年正式推出的網頁指南

目的是優化手機上閱讀網頁的速度並達到 "Google wants to get information to the end user as fast as possible," 宗旨精神

AMP 帶來的優勢連同於網頁載入速度、SEO 排名、使用者黏著度都有顯著的提升,但同時他是需要使用 AMP HTML 做開發,部分 HTML 元素和屬性使用受到限制,特別是圖片呈現,這些都會由 AMP 自有的元素替換

所以多數人建議如果是純部落格,沒有太多絢麗效果的網頁就很適合使用 AMP 來撰寫網頁,避免特性上的衝突讓網頁無法達到想要的效果

最後,並未在 WordPress 上啟用 AMP 插件

如果有需要的朋友可以參考:AMP,其實安裝後可以看到 AMP 的設定當中可以勾選 WordPress 哪些頁面才要套上 AMP,針對要套上 AMP 的地方要再做些微的設定

同時設定裡也可以看到目前 WordPress 已安裝的插件列表是否有與 AMP 有衝突,如果有衝突就需要擇一卸載

考量於要調整的地方稍微多了些,加上有使用者用過 elementor 編輯的頁面再套上 AMP 後,網頁呈現有衝突與版位跑板等狀況出現,因此先不安裝於本次的 WordPress 當中,預計等網站上線後再利用 pagespeed 跑跑看

One more thing..

鐵人賽文章會 Delay 1-2 天同步放在 Medium
歡迎訂閱或是透過 Facebook 一起來交流 (求指導)/images/emoticon/emoticon32.gif

https://ithelp.ithome.com.tw/upload/images/20200915/20094570oG1ujl6HbX.png


上一篇
【領域展開 28 式】 auther box 文末筆者簽名檔設定與 Gravatar 認識
下一篇
【領域展開 30 式】 完賽習得 30 式,去年與今年的比較回顧
系列文
真,從零建置個人網站 30 天領域展開30

尚未有邦友留言

立即登入留言