隨著電子商務競爭日趨激烈，零售商正在尋找新的優勢，競爭前沿穩步向技術發展。 多通路的出現使客戶歷程變得非常復雜，但有一點是肯定的—速度比以往任何時候都更重要。 Google最新發布的頁面體驗更新是一種新的排名算法，旨在根據用戶對互動體驗的看法來判斷網頁。這是一個明顯的跡象，搜尋巨頭強調的是感知速度，即用戶認為頁面已載入的速度。
電子商務的新客戶歷程是即時的。 如果移動網站的載入時間超過53秒，85%的訪問者會放棄移動網站。 同時，載入時間每延遲一秒，轉換率就會下降7 %。 新技術正在使網站速度達到以前無法實現的速度。 結合現代便攜式前端，伺服器端渲染(SSR)，加速移動頁面(AMP)和現代CDN技術，亞秒頁面載入不再是可能的，它們正成為電子商務中新的競爭戰場。
目錄
- 網站速度對電子商務的重要性
- 速度=金錢
- 什麼是AMP及其工作原理
- 零售的上升表現超過了他們數十億美元的競爭對手
- 什麼是SSR？它如何工作？
- 什麼是現代CDN和邊緣計算？
- 摘要
網站速度對電子商務的重要性
網站速度會影響整個數位化戰略，從可見性(SEO和SEM)到流量，用戶體驗，最終轉化率和收入。 這直接源自Google對移動和速度的日益關注。
搜尋巨頭十年來一直在尋求澄清網站速度的重要性。 他們推出了多個以移動爲中心的更新，以鞏固移動網站速度的重要性，因爲它是搜索結果和SEM排名較高的關鍵。
這些努力包括2016年移動優先索引，2017年移動廣告AMP，2019年速度更新以及2021年初發布的頁面體驗排名更新。 最後但並非最不重要的一點是，“恥辱的Google徽章”將很快推出，並標記出速度緩慢的網站，並警告用戶從搜索引擎結果頁面(SERP)導航到該網站。
公平地說，除了引入算法改變和羞辱網站以強調網站速度的作用之外，谷歌還創造了一系列工具，使更快的網站成為現實。 這包括各種促進和衡量網站速度的工具，例如PageSpeed Insights，AMP，影響計算器和移動速度記分卡等等。
來源：測試我的網站
Google的“測試我的網站”是一種工具，它允許您對網站進行快速審覈，並估計如果實施網站速度建議，對年收入的潛在影響。
創建這些工具的努力符合Google的利益，因爲公司58％的搜索和65％的廣告收入來自移動設備。
計劃一對一演示
安排咨詢談話，了解Edgio (Layer0) XDN如何幫助您實現次秒頁面載入。 單擊此處！
速度=金錢
眾所周知，網站速度會影響客戶體驗和收入，尤其是移動設備上的收入—70％的消費者表示網站速度會影響他們的購買意願。 亞馬遜計算出，頁面載入延遲一秒將導致每年損失1.6B美元的收入。 要銷售更多商品，您必須確保無論訪客到哪裡，例如您的商品資訊或商品描述頁面，內容都能快速輕鬆地載入。 同樣，付款流程也應快速簡單。 這為重新參與奠定了基礎，並使買家傾向於退貨並向您購買更多商品。
但是，隨着當前形勢的發展，提供快速移動體驗變得越來越困難。 在優化效果差，內容過大的網站上，一個移動網頁平均發出214個伺服器請求，其中100個與廣告有關。 因此，在移動設備(4G)上載入頁面平均需要15.3秒。 一些競爭更為激烈的零售商可以將移動頁面載入時間降至僅3-5秒，但仍有改進的餘地。 這不是5G可以解決的問題。
這是廣告，個性化，分析和跟蹤之間不可調和的折衷，以及卓越的用戶體驗
速度的基礎
提供快如閃電的首頁載入的第一個建置組塊是使用AMP進行搜尋流量，並使用SSR進行其他通路。 第二步是確保後續頁面載入速度極快。 這是通過為速度而構建的便攜式前端實現的，例如漸進式Web應用程式(PWA)。 最後一個支柱是具有邊緣計算功能的現代化CDN，可以在頁面載入中每毫秒內實現最大的壓力。
事實上，Google推薦了一個理想的客戶旅程，其中網站首先提供AMP頁面以搜尋用戶，然後在後續頁面上將他們轉換為完整的PWA版本。 由於近一半的零售商網站流量來自有機搜尋，因此支援AMP和PWA是有意義的。
此主題在Google I/O 2017上進行了廣泛討論。
借助PWA，開發人員可以提供與本機應用程式相媲美的極具吸引力和閃電般的快速體驗。 但是，對於搜尋生成的流量，AMP是最快的選項，中值載入時間為半秒。
因此，簡而言之，在SERP中越高，需要結合AMP和SSR來快速進行首次載入，而結合PWA來實現快如閃電的瀏攬過渡。 問題是說起來容易做起來難，因為它需要企業電子商務網站添加SSR支援，這本身是一項復雜的任務，並維護兩個單獨的網站，一個用於PWA (通常用React，Angular，Vue，Next或Nuxt編寫)，另一個用AMP HTML編寫。
AMP頁面速度如此快，因為它們是由CDN (內容交付網路)預取，預呈現和暫存的。 Google的AMP快取可提供大部分AMP頁面。
因此，網站速度的基礎由以下三個關鍵要素組成：
SSR + AMP可快速進行首次裝載
從SERP，用戶將被定向到AMP版本的頁面，以獲得超快的首頁載入速度。 SSR對來自其他通路(包括電子郵件，社交和推薦)的訪客也一樣。
PWA可攜式前端，提供快如閃電的瀏覽速度
當訪客瀏攬後續網站頁面時，PWA將接手提供即時瀏攬速度。 如此一來，消費者就能享受快如閃電的首頁載入體驗，以及超越第一頁的即時頁面轉換。
預測預取+現代CDN
預測性預取和具有邊緣計算功能的現代化CDN使您可以在用戶請求數據之前將動態數據流傳輸到邊緣，並從邊緣傳輸到用戶的瀏攬器。 這使您可以暫存和服務消費者等待的內容–可轉換為您庫存中的不同產品，價格和資訊的JSON數據。 這就是電子商務網站和其他數據庫驅動的網站如何提供即時體驗，並在消費者點擊之前保持5秒(例如，預取用戶在點擊鍊接之前最可能點擊的產品描述頁面)。
現在，我們已經了解構成網站速度基礎的三大支柱，我們可以深入探討每個支柱。
什麼是AMP及其工作原理
Google AMP是一個開放原始碼框架，用於創建移動網頁，載入時間中位數為500毫秒。 AMP通過簡化HTML並強制實施對CSS和JavaScript的嚴格限制，在移動Web上創建更好，更快的體驗。 然後，這些頁面將在Google伺服器上進行暫存和預呈現，這就是其快速交付的方式。
AMP的優點
AMP頁面可為來自Google SERP的流量提供500毫秒的中間頁面載入。 之所以能夠實現這些速度，是因為Google伺服器在單擊AMP頁面鍊接之前，會將AMP內容預先提取並預呈現到用戶的瀏攬器中。 對於一般的電子商務站點，Google搜尋(包括有機搜尋和付費搜尋)占其流量的大約50％，因此這些收益可以應用於您的大量流量。
使用AMP的站點還能看到降低跳出率的好處，因為通常在等待頁面載入時會跳出的用戶現在可以獲得閃電般的快速體驗。
AMP + PWA如何改變遊戲規則
AMP和Progressive Web Apps (PWA)的組合涵蓋了從搜尋到端的整個客戶歷程，使其實現快速的端到端 購物者從Google SERP載入AMP頁面，然後在瀏攬AMP頁面時，在後臺載入PWA版本站點所需的資源。 這樣，當用戶採取操作(例如，單擊站點上的任意位置)時，PWA已開始預載入後續頁面的內容，從該頁面開始，所有剩餘的轉換都是客戶端呈現的瀏攬轉換，而不是全新的導航。
為什麼不是每個人都使用AMP？
AMP和PWA的組合是速度的天堂，但在發展方面卻是一場噩咪。 有效支援該技術涉及創建站點的兩個版本—一個是使用您的前端所用的語言(通常是JavaScript密集型或CSS密集型)，另一個是遵循AMP項目標準的版本。 這只是一個開始：每個錯誤修復，布局更改，新功能等都可能需要傳播到AMP和PWA代碼庫。
React Storefront框架和Layer0使開發人員能夠更輕鬆地在其React應用程式中支援AMP。
零售的上升表現超過了他們數十億美元的競爭對手
通過利用Layer0 AMP技術，時裝零售商Akira不僅提供即時的第一次搜尋，還超越了Amazon，Nordstrom，Zappos和其他大品牌的關鍵詞。
在使用Layer0技術之前，Akira的第一頁平均載入時間為4.8秒，隨後的頁面載入時間為2.5秒。
Akira通過利用Edgio (Layer0)內置的先進技術改進了這些結果並實現了亞秒頁面載入：具有伺服器端渲染和AMP轉換的電子商務PWA，Layer0 CDN-AS-JavaScript為邊緣動態內容提供95％以上的暫存命中率(並使網站比購物者提前5秒)，以及用於前端優化伺服器和API的Layer0 Serverless JavaScript。
借助Edgio (Layer0)，零售商在許多領域立即獲得了提昇：
- 第一次加載時間下降了70.8％，接近一秒
- 瀏攬轉換降至驚人的500毫秒
- 現在，一半的網站頁面載入時間少於500毫秒
- 移動轉換率提高了37.25％
Lighthouse也很好地反映了這些改進—Akira的性能分數提高了36分，超過了Web上75％的站點，並提供了更好的客戶瀏攬體驗。
閱讀完整的Akira案例研究。
Annie Selke是另一個傑出的例子，說明投資網站速度如何幫助零售商登上搜尋引擎結果頁面。
在進入Edgio (Layer0)之前，家居和裝飾零售商Annie Selke甚至沒有出現在Google搜尋結果的上方。 如今，由於有機流量增加了32％，移動有機流量增加了40.41％，它超過了數十億美元的競爭對手。
如果您有興趣，我們網站上還有Annie Selke案例研究，我們會在其中探討一下這方面的問題。
對於Akira和Annie Selke等線上零售商而言，一個性能良好的移動網站是一種低調的成果。 這可能正是他們所需要的，能夠抵禦來自亞馬遜，Nordstrom和Zappos等電子商務巨頭的不懈競爭。
站點越快，其排名就越高，就像即時，有保證的SEO。 Edgio (Layer0年)產品組合中有很多實例證明瞭這一點。 Akira，Annie Selke和Shoe Carnival只是其中幾個在亞馬遜等眾多知名品牌中脫穎而出。
Layer0結合了先進的技術，使電子商務快速上手：
- 具有伺服器端渲染支援和AMP轉換的電子商務PWA
- 預測性預取
- CDN-AS-JavaScript為邊緣動態內容提供95％以上的高速暫存命中率，使網站比購物者領先5秒。
- 用於前端的Layer0 Serverless-JavaScript後端優化了伺服器和API。
計劃一對一演示
安排咨詢談話，了解Edgio (Layer0)如何幫助您實現次秒頁面載入。 單擊此處！
什麼是伺服器端渲染？它是如何工作的？
伺服器端渲染(又稱SSR)是一種常用技術，用於在伺服器上呈現通常僅用於客戶端的PWA頁，然後將完全呈現的頁面發送到瀏攬器。 然後，客戶端的JavaScript包可以接管，PWA可以正常運行。 SSR實質上將JavaScript頁面轉換為HTML，這是搜尋爬網程序和瀏攬器在伺服器上都能理解的一種語言。 這可確保瀏攬器和搜尋爬網程序可以輕鬆地傳遞頁面並為其編制索引。
使用SSR的一個主要好處是，每個搜尋引擎都可以正確地搜尋和索引應用程式。 這有助於SEO並向社交媒體通路提供元數據。
SSR的優點
SSR通常也有助於提高性能，因為在第一次請求時，伺服器會向下發送完全載入的應用程式。 不過，對於非普通應用程式，您的里程數可能會有所不同，因為SSR需要的設定可能有點復雜，並造成更大的伺服器負載。 值得慶幸的是，我們提供了多種服務和工具，例如異型前端和帶SSR的Layer0，即裝即用支援。
最後，是否對您的網站使用伺服器端渲染取決於您的特定需求以及哪些折衷方案最適合您的使用案例。
什麼是現代CDN和邊緣計算？
邊緣計算是一種網路理念，專注於使計算更接近數據源，並減少過程中的延遲和帶寬使用。 使用許多不同的技術可以實現這一點。 使計算更接近網路邊緣(用戶的計算機，物聯網設備或邊緣伺服器)，最大限度地減少了客戶端和伺服器之間必須進行的長距離通信量。
具有邊緣計算功能的CDN 通過將內容流化到最接近的CDN存在點(POP)給用戶，您可以縮短從網站伺服器到用戶瀏攬器的旅行時間(這樣，舊金山的用戶可以從舊金山南部的Pop發送內容，而紐約的用戶可以從布魯克林的Pop發送內容)。
CDN與邊緣運算的優勢
CDN將網站的暫存版本存儲在多個位置，以確保更快的頁面載入。 每個此類POP都包含多個暫存伺服器，負責向其附近的訪客提供內容。
Layer0的CDN-AS-JavaScript將這一概念提昇到另一個層次。 它是一種應用感知型CDN，它瞭解您的應用程序。 它使用的語言與前端開發人員已經知道的語言相同，讓您完全控制暫存。 因此，使用Layer0的網站在邊緣動態內容的暫存命中率超過95％。
Layer0 CDN-as-JavaScript的邊緣計算功能通過預先預取最可能的下一頁並在請求之前將其流化到邊緣，使您能夠在用戶點擊指向它們的鍊接之前超速暫存並準備好供用戶使用，從而使您能夠領先購物者5秒。
摘要
載入時間過長可能會破壞用戶的體驗和網站的搜尋排名。 AMP解決了這一問題的一部分–它使搜尋的第一頁速度非常快。 但這只是戰鬥的一半。 讓您的網站快速上手需要付出額外的努力和更全面的方法–包括加速移動頁面(AMP)，現代便攜式前端，伺服器端渲染(SSR)和具有邊緣計算功能的CDN等技術的組合。
Layer0可幫助復雜且動態的電子商務網站達到亞秒級速度，同時提高開發速度和利潤增長並降低DevOps成本。 它還包括CDN AS-JavaScript，可為動態內容提供95％或更高的暫存命中率，而其他CDN僅為15％。
Layer0始終為大型電子商務網站提供500ms以下的中位數頁面載入，其中包含數十個標籤和腳本，更不用說動態定價和實時庫存查詢了。 眾所周知，這些速度提昇可實現15到30 %的轉換提昇，更好的可見性，觸及率，最終實現更高的收入。
