菜鳥救星網頁設計教學:Google AMP新技術讓網頁開啟4倍快

圖片來源:截圖自AMP官方網站

文/圖、Andy老師

科技進步神速,現代人依賴手機的程度已無法想像,根據調查,40%的使用者會放棄一個載入速度超過3秒的網站,而且每增加1秒,使用者滿意度就會減少16%,所以,網頁開啟的速度變得非常重要。Google這次新推出的網頁技術AMP (Accelerated Mobile Pages),為的就是要增加手機讀取網頁速度。

情境:
當你正在等公車時,想要瀏覽的網頁卻還沒成功載入,等了許久,卻出現煩人的商品推銷廣告,而因此錯過公車……心裡是否無限ooxx。

有興趣的人可以看看以下影片,是否也和小編一樣有感?

影片來源:Google Chrome Developers

Google AMP是一種根據開放原始碼規格所設計的框架,透過AMP技術,讓行動網頁載入的速度比傳統網頁快4倍,流量少10分之1,雖然Google聲明AMP網頁並不影響SEO排名,但隨著使用者體驗大幅提升,這也將間接帶來影響。

現在就來跟著小編的步驟,立刻體驗AMP的神速喔!
1.先進入Google建置的預覽網頁
2.輸入french toast後按下搜尋
3.AMP的頁面都會有閃電標示喔!

圖片來源:手機截圖

有關AMP技術,Google將於年底在全球完全推出,包含紐約時報、英國每日郵報、華爾街日報…等都已經支援AMP,想知道AMP如何製作,可參考Google官方文件;如果您使用WordPress架站的朋友,那就恭喜您了!WordPress已經率先推出AMP for WordPress外掛來支援使用該網站。

而Facebook在2015年就已推出Instant Articles(即時文章),其目的也是為了加速網頁瀏覽的速度,Facebook官方表示,過去使用者平均需要花費8秒鐘才能完整下載網站內容,但Instant Articles讓瀏覽速度更快,而且內建字體放大、縮小、高解析度網站、自動播放影片等閱讀器功能,還能針對個別文章段落按讚或回應。

未來會有更多媒體平台與網站使用AMP這項技術,現在就一起來優化行動裝置的網頁體驗,讓網站流量翻倍提升吧!

文章來源參考:Google Webmaster Central Blog

加入菜鳥救星官方Line並回覆「我想看文章」,不定期獲得更多知識吧!

不同頻道,不同知識!

這個網站採用 Akismet 服務減少垃圾留言。進一步瞭解 Akismet 如何處理網站訪客的留言資料