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粉絲專頁，我們會不定期發佈文章，供您更快速的掌握相關消息喔！