文章彙整

AMP是什麼? AMP的好與壞報你知

By Sabina 7 months agoNo Comments
首頁  /  網站設計與開發  /  AMP是什麼? AMP的好與壞報你知

大家都知道在這個速度優先的互聯網時代,速度就是王道。

你有這樣的經驗嗎?正在等待捷運進站,捷運也許都進站開走了,手上的手機網頁都還沒加載成功。據統計,將近一半比例的人,在瀏覽網頁時如果加載時間超過3秒,通常都會選擇放棄閱讀。因此讓讀者錯失閱讀好文的機會。Google為了改善這個問題,開發了AMP這項專案,讓閱讀者擁有流暢的閱讀體驗。

 

網頁速度優化Google AMP項目

Google AMP,簡稱AMP,主要的用途就是讓使用者在開啟手機網頁時更快速,近年來已被各大媒體業廣泛使用了!厲害至不只國內外媒體網站都啟用了AMP,連不少個人部落格網站都跟上了腳步,安裝AMP之後網頁到底能變得多快? 開啟AMP網頁需要花費多久的等待時間?

 

說其實呢是一秒之間的事 ! 只是短短眨眼瞬間網頁就會加載完成!

所謂的AMP又稱為:加速移動頁面,而他的英文全名是Accelerated Mobile Pages (AMP),是一種根據開放原始碼規格所設計的網頁。透過 AMP 製作技術,就能夠大大縮短靜態內容的渲染時間從而有效提升網頁效能。

 

AMP 包括三個部分:分別是AMP HTML,AMP JS以及Google AMP Cache。

 

AMP HTML

是描述網頁所用的標記式語言,相當於普通網頁使用的HTML之亞種。AMP HTML在圖像顯示等方面使用與HTML不同的專用標籤,另外還限制了HTML部分功能的使用。

 

AMP JS

是一套JavaScript,保證AMP HTML的正確和快速顯示。除此之外,AMP JS還負責在只支援普通HTML的瀏覽器中擔任橋樑,使其能正確支援AMP HTML的專用功能。AMP HTML中可以呼叫該函式庫。

 

AMP Cache

快取並傳輸AMP頁面的CDN,進一步提高AMP網頁的效能。用戶在搜尋引擎中點擊AMP網頁時,實際上存取的是最佳化後的快取頁面。Google的AMP Cache名為Google AMP Cache。

 

而那AMP的功能又主為分為

智能內容優先處理

    • 預存取元素,顧名思義就是先將所有的文字內容、圖片等等,都已經預先儲存在google的server上面,無須重新佈局(relayout)

 

響應式設計

    • 支持適合瀏覽設備屏幕尺寸的圖片 (支持全屏)

 

限制設計元素帶來載入負擔

    • 除了AMP-iframe外沒有客製化的Javascript
    • 不需要頁面滾動元素
    • 內鍵式樣式表(inline stylesheet) 最大不超過50kb

 

Pros好處:

  • 加載的速度會增快
  • 頁面觀感比較簡單乾淨
  • 也許能提高SEO及單篇的點閱率
  • 更多的曝光率
  • 安裝的方式快速且簡單(尤其對wordpress的網站而言)
  • 能留住更多的訪客
  • 對需要額外推動優化引擎的部落格來說很完美
  • 是完全免費不需要費用的

 

Cons缺點:

  • 只針對手機或行動裝置的運用
  • 有可能排版會出現異常
  • 只能透過Google的搜索引擎做搜尋
  • AMP的站上不能使用其他的擴展程式
  • 只能運用Google Ads
  • 會減少廣告的收入
  • 較少的功能運用(限圖片及文字)
  • 無法有任何的網站設計
  • 要解除安裝是件困難的工程
  • 若解除安裝SEO也許會下降
  • 沒有分享的功能鍵,只能直接複製URL做分享的動作
  • 會減少訪客在網站上停留的時間

 

不過除了AMP的技術可以讓網頁更加快速以外,其實也是有其他選擇的方案也可以達到這樣的效果,像“Facebook IA (Instant Articles)” 運用在Facebook上的即時文章,但今天我們暫不討論 “Facebook IA”,待下集討論囉。

 

介紹完這個這麼方便好用的技術,其實我們歐斯瑞官網也在2018年1月後開始啟用AMP功能了,請大家一同來體驗AMP網頁帶來的快速及便利,同時我們也會做網站使用者分析,與大家分享歐斯瑞官網使用AMP後,除了給使用者帶來便利以外,是否對我們的網站是有益的呢?讓我們一同探討發現AMP所帶來的好與壞囉!

我們也有另一篇介紹網速是否真的會影響你的搜尋排名,若想更進一步了解請關注我們的Facbook粉絲專頁,我們會不定期發佈文章,供您更快速的掌握相關消息喔!

以上內容由Astralweb 歐斯瑞編寫製作

 000

推薦文章

Category:
  網站設計與開發

留下回應

你的電子郵件地址不會被公開.

取得獨家電子商務祕技

建立更好的策略靈感

跟上全球的網路趨勢

絕佳的電商解決方案

電子商務戰略全指南

每月發送電商戰略指南,只要填寫E-mail即可訂閱!

請到您的信箱確認,即可完成訂閱。