AMP網頁是什麼?Google對用AMP的網站好嗎

網路環境和行動裝置性能的差異使得網頁載入速度和使用者體驗面臨挑戰。為了解決這個問題,加速手機頁面載入速度(Accelerated Mobile Pages,簡稱AMP)應運而生。AMP網頁通過簡化設計、壓縮資源等方式,極大地提升了網頁載入速度,並確保不同手機性能的使用者都能夠迅速打開網頁。然而,AMP的快速載入也帶來了一些設計和功能上的限制,使得它並不適合大部分類型的網站。

AMP是什麼

AMP網頁是什麼?

Accelerated Mobile Pages(簡稱AMP)計畫應運而生,它代表「加速手機頁面載入速度」。

在當今數位時代,手機已經成為人們主要的上網工具。不論是旅遊、生活或其他相關產業,使用行動裝置閱讀網站的人數持續增加。然而,即便現代科技日新月異,各地的網路環境卻仍然存在差異。雖然4G和5G網路的普及確實提供了更快的上網速度,但是仍有許多地區仍然依賴3G甚至2G網路。因此,為了確保全球使用者都能享受快速的網頁瀏覽體驗,AMP應運而生。

除了考慮網路速度之外,我們還必須關注使用者的手機性能。不是每個人都使用高階手機,太多複雜的網頁特效可能會拖慢中低階手機的運作速度,這樣即便網路速度再快,也無法確保使用者能夠順暢打開網頁。因此,AMP不僅著重於加速網頁載入速度,也考慮了不同手機等級的性能需求,確保了使用者在各種情況下都能夠迅速打開網頁,無論他們身在何處,使用什麼樣的手機。

這種全方位的考量包含地區或大家使用的手機都不一樣,使得AMP成為了一個針對網頁速度的解決方案。Google提出的AMP網頁設計理念,不僅是為了迎合行動裝置時代的需求,更希望讓每一位網路使用者都能夠享受到無縫、迅速的上網體驗。

AMP網頁影響和速度加快

AMP技術的核心在於簡化,但這並不意味著網站內容被削減。AMP會把網頁的特效CSS或是風格設計通通簡化來讓縮小網頁的大小,從而提升進入網頁的速度。對AMP而言,不必要的元素包括一些過多的CSS樣式,限制在50KB以內,而且無法使用外部CSS。同時,也需限制JavaScript的使用,僅保留必要的特效。

那麼,當我們剝去這些元素時,會發生什麼變化呢?網頁不再繁複,不再有彈跳廣告的打擾,同時也意味著官方網站的獨特特色可能會稍嫌消失。如果有其他人也使用AMP,網站看起來會很類似,我想沒有品牌會希望自己失去了特色吧,而AMP功能是追求更快速的載入,一般來說這就直接不適合企業品牌使用。

然而,除了減去不必要的元素,還需要遵守AMP的特殊HTML格式。例如,圖片(img)和JavaScript(js)標籤都有特定的寫法,這樣才能確保網頁符合AMP的標準。詳細的規範和寫法可以在AMP計畫的官方網站上找到。這種網頁設計的新取向,讓使用者在手機上能夠更快速、更順暢地瀏覽內容,為移動網頁帶來了一次真正的革命。

AMP優與缺

AMP網站有什麼優點和缺點呢?

我們了解到AMP網頁的時候,通常直接看到有介紹AMP會讓網頁加載速度變快,而且是變非常快,但~只有讓網站速度加快這樣嗎?有其他更好的優點和缺點嗎?,以下會整理優點與缺點,讓你一目了然~

AMP網頁優點

最大的優點就是速度快!如果用戶點擊網頁卻跑了很久都沒辦法瀏覽網頁,當然會直接跳出,也會被Google判定使用者體驗不佳。

  • 網頁加載速度比一般標準速度快4倍
  • 沒有廣告擾人
  • 沒有多餘的特效擋住視線
  • 較好的閱讀體驗
  • 因加載速度加快可能提升搜尋排名
  • 瀏覽網頁容易閱讀且乾淨

AMP網頁缺點

最為致命的就是減少很多網站的設計,品牌的獨特形象,這不僅是企業公司該擔心,就算是自己經營、部落客也會有自己的風格對吧,當然這些重不重要當然還是要自己評估後決定啦~

  • 沒辦法有美觀的設計
  • 無法塑造品牌形象
  • 與其他AMP網站樣式相似
  • 網站功能減少
  • 使用者體驗可能不佳
  • 因使用者體驗不佳可能導致排名下跌
  • 行動設備才能瀏覽AMP網頁
  • 因美觀不足可能減少使用者的留在網站的時間

AMP網頁應用會影響搜尋排名嗎?

談到AMP網站對搜尋排名的影響,情況並不是非常直接。Google在2021年明確表示,AMP本身不會「直接」提高你的網站排名。然而,它的效果可能會以一種「間接」的方式影響排名,這是什麼意思呢?

首先,我們需要了解SEO排名的複雜性。Google有將網頁速度納入排名因素之一,這對AMP網站來說是一個優勢,因為AMP的核心優勢之一就是極速的載入速度。這種快速載入為網站「有機會」提高排名鋒頭,但這還不是全部。

然而,如果我們仔細思考,速度只是其中的一環。如果你的網站內容無法引起消費者的興趣,導致停留時間過短,或者網站缺乏獨特性,無法真正展現企業形象,那麼使用者可能根本不會使用你的網站。更何況,如果缺乏外部連結指向你的官網,曝光度不足,人們可能甚至不知道這個網站的存在。在這種情況下,速度優勢幾乎毫無作用。Google一直主張「內容即王道」的理念,也就是說,只要你的內容質量優秀,能夠吸引用戶,SEO排名自然會水漲船高。因此,不應該單純地追求分數,而應該更注重提供高質量、引人入勝的內容,這才是提高搜尋排名的真正關鍵。

結論就是

  • AMP有可能讓你的網站因為速度而提升排名
  • AMP有可能因用戶體驗不佳讓網站降低排名

AMP和RWD可以同時存在嗎?

在網頁設計領域,有一個常見的問題是:「AMP和RWD能夠共存嗎?」事實上,技術上是可以實現AMP網頁同時具備RWD(響應式網頁設計)的效果的。然而,這兩者之間最大的區別在於,AMP擁有自己獨特的HTML標籤和特殊的CSS、JS寫法限制。嚴格來說,AMP並不是一個完整的網頁,而是一種閱讀器模式的介面。

對於網頁設計公司來說,挑戰在於在AMP的速度訴求和RWD的彈性需求之間取得平衡。傳統網頁應該是非常靈活的,能夠容納各種細節和豐富資訊。然而,由於AMP要求極速載入,這種靈活性受到了限制。

RWD和AMP並不一樣,但是我們可以使AMP可以有RWD的效果。然而,這只是技術上的實現。真正的問題是:這種閱讀器模式的網頁設計是否符合您企業的形象,是否能夠展現您產品的獨特特色呢?這些問題的答案,只有您自己才能明確回答。在選擇設計模式時,需要充分考慮到您的品牌形象和用戶體驗,找到最適合的平衡點。

AMP適合什麼樣的網站?

從網頁設計公司的角度來看,我們必須承認AMP網頁並不適合所有產業類型。例如,活動網站通常需要充滿視覺特效,符合活動主題的美觀美編設計等,以營造熱鬧氛圍。在這種情況下,AMP網頁的嚴格限制可能會使得設計師難以實現活動網站所需的視覺效果。

AMP網頁設計較為適合於特定類型的網站,例如資訊型網站,比如新聞、部落格、知識分享等,但網站越來越多,幾乎每種網站擁有更好的形象或風格是更利於發展的,這些網站通常不需要複雜的排版和視覺特效,只需提供清晰的文字、圖片和影片內容即可。AMP的快速載入速度對於這類網站來說尤其重要,因為它確保用戶能夠迅速獲取所需的信息,提供更好的用戶體驗。

『最適合的是那種網站主機效能並不好,網頁開啟速度很慢』,這時候就不要太糾結在風格或設計了,如果用戶都進不來網站裡面瀏覽,那你做那麼多設計的意義又在哪呢?

AMP會刪除的程式碼

了解AMP系統原理

2015年,Google率先推出了一個開源專案,那就是AMP(Accelerated Mobile Pages),它主要由三個重要部分組成:AMP HTML、AMP JS和AMP Cache。

AMP HTML:這是一種專為AMP設計的HTML規範,特別針對圖像、影片和廣告的顯示做了優化。在這個規格中,使用了特殊的標籤,如amp-img(用於圖片)、amp-video(用於影片)、amp-iframe(用於嵌入式框架),這些標籤確保了網頁內容的快速載入。此外,為了確保讀取速度,AMP HTML還限制了某些不必要的HTML使用,使網頁更加高效。

AMP JS:這是一套JavaScript函式庫,它的主要功能是確保AMP HTML的快速和正確顯示。AMP JS管理著網頁的載入過程,快速轉譯舊網頁,確保用戶獲得無縫的瀏覽體驗。

AMP Cache:這是一種快取和傳輸AMP內容的網路架構,也就是說,當用戶訪問AMP網站時,他們實際上訪問的是經過AMP Cache最佳化處理的快取頁面。這種設計確保了網頁的迅速載入,提供了更好的用戶體驗。

AMP會刪除的東西

在使用AMP(Accelerated Mobile Pages)技術時,必須放棄某些網頁元素,以追求極致的載入速度和用戶體驗。這些元素包括CSS和Javascript的部分。

首先,讓我們看看CSS方面的限制。AMP規定CSS的大小不能超過50KB,並且不允許使用外部CSS文件。這意味著設計師必須在有限的大小內完成網頁的外觀設計。此外,在Javascript方面,AMP限制只能使用它所提供的特定元件,而其他Javascript語法、以及像是jQuery和AngularJS等JS資料庫則無法使用。

一般來說只要理解成AMP會刪除你網站的大部分設計和特效就可以了~

AMP最簡單安裝方式

AnyConv.com 1

如果你的網站是工程師幫你架設的或是網站架設公司架設的,那麼基本上可以再委託他們安裝AMP就可以,如果是Wordpress就更簡單了,安裝外掛啟用就可以了。

wordpress安裝:

  1. 到安裝外掛搜尋AMP
  2. 點擊安裝
  3. 點擊啟用
  4. 大功告成

是不是非常簡單呢,但請不要盲目的直接使用,記得一定要評估自己的網站適不適合再使用哦。

再來就可以到Google官方工具AMP測試網頁有沒有套用到AMP的功能囉。

返回頂端