隨着電子商務領域的競爭日益激烈，零售商們正在尋找新的方式脫穎而出，競爭前沿穩步向技術邁進。 多通路的出現使客戶旅程變得非常複雜，但有一點是肯定的—速度比以往任何時候都更重要。 谷歌最近發佈的 網頁體驗更新,一個新的排名算法,旨在根據用戶如何看待與他們互動的體驗來判斷網頁,這是一個明顯的跡象,搜尋巨頭強調感知速度 用戶將頁面視爲已載入的速度。
電子商務的新客戶旅程是即時的。 如果載入時間超過三秒，53%的訪客將放棄移動網站。 同時，載入時間的每一秒延遲都與轉換次數下降7%相關聯。 新技術現在實現了以前不可能實現的網站速度。 藉助現代便攜式前端，伺服器端渲染(SSR)，加速移動頁面(AMP)和現代CDN技術的組合，次秒頁面載入不只是可能的，它們正成爲 電子商務的新競爭戰場 。
目錄
- 網站速度對電子商務的重要性
- 速度=金錢
- 什麼是AMP以及它如何工作
- 零售啓動的表現超過了他們的數十億美元競爭對手
- SSR是什麼？它是如何工作的？
- 什麼是現代CDN和邊緣計算？
- 摘要
網站速度對電子商務的重要性
網站速度影響整個數字戰略,從可見性( SEO和SEM ),到流量,用戶體驗,最終轉化和收入。 這直接源於Google對移動和速度的日益關注。
搜尋巨頭已在十年的努力中澄清網站速度的重要性。 他們推出了多個以移動爲中心的更新，以鞏固移動網站速度對於搜尋結果和SEM排名的重要性。
這些努力包括2016年移動第一次索引，2017年的AMP和移動廣告，2019年的速度更新以及即將 於2021年初上線的頁面體驗 排名更新。 最後但同樣重要的是,谷歌的恥辱徽章將很快推出,並標記出臭名昭著的緩慢網站,並警告用戶從搜尋引擎結果頁面(SERP)導航到該網站。
公平地說,除了引入算法更改和羞辱網站強調網站速度的作用外,Google還創建了一系列工具,使更快的網站成爲現實。 這包括各種工具來促進和測量網站速度,如PageSpeed Insights，AMP，Impact Calculator和Mobile Speed Scorecard等等。
來源： 測試我的網站
Google的”測試我的網站”是一種工具，它允許您快速審覈網站，並在實施網站速度建議時估算對年度收入的潛在影響。
創建這些工具的努力符合Google的利益，因爲58%的搜尋和65%的公司廣告收入來自移動設備。
安排1對1演示
安排諮詢對話，瞭解Edgio (Layer0) XDN如何幫助您實現次秒頁面載入。 單擊此處！
速度=金錢
衆所周知，網站速度會影響客戶體驗和收入，特別是移動設備的體驗和收入—70%的消費者 表示網站速度會影響他們的購買意願。 亞馬遜計算出，頁面載入延遲一秒將導致 每年收入損失1.6B美元。 爲了銷售更多商品，您必須確保無論訪問者在哪裏(例如，您的商品資訊或商品描述頁面)，內容都能快速輕鬆地載入。 同樣,付款過程應該是快速和簡單的。 這爲重新接洽奠定了基礎，並使買家傾向於退貨並向您購買更多產品。
然而，隨着現在的發展，提供快速移動體驗變得越來越困難。 除了優化不良，膨脹的網站上的超大圖像和混亂的代碼, 移動網頁平均提出214個伺服器請求,其中100個與廣告相關。 因此，在移動設備(4G)上載入平均頁面需要15.3秒。 一些競爭較爲激烈的零售商可以將移動頁面載入時間縮短到3-5秒，但仍有改進的餘地。 這不是5G可以解決的問題。
這是廣告，個性化，分析和跟蹤以及出色的用戶體驗之間不可調和的折衷方案
速度的基礎
第一個構建塊提供閃電般快速的第一頁載入是使用AMP進行搜尋流量和使用SSR進行其他通道。 第二步是確保後續頁面載入速度驚人。 這是通過爲速度而構建的便攜式前端來完成的，如Progressive Web Apps (PWA)。 最後一個支柱是具有邊緣計算功能的現代CDN，可將頁面載入的每一毫秒縮短到最小值。
事實上,谷歌已經推薦了一個理想的客戶旅程,其中網站首先提供AMP頁面來搜尋用戶,然後在後續頁面上將他們轉換爲完整的PWA版本的網站。 由於近一半的零售商網站流量來自有機搜尋，因此支援AMP和PWA都很有意義。
藉助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是一個開源框架,用於創建移動網頁,中間載入時間爲500ms。 AMP通過簡化HTML並對CSS和JavaScript實施嚴格限制，在移動Web上創建更好，更快的體驗。 這些頁面隨後被暫存並預渲染在Google伺服器上,這就是它們如此快速的交付方式。
AMP的好處
AMP頁面爲來自Google的SERP的流量啓用了500ms的中間頁面載入。 這些速度是可能的，因爲Google伺服器在單擊AMP頁面鏈接之前將AMP內容預提取並預呈現給用戶的瀏覽器。 對於平均的電子商務網站谷歌搜尋(有機和付費)約佔其流量的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不僅提供即時的首次搜尋,還提供了亞馬遜，Nordstrom，Zappos和其他大品牌的關鍵短語。
在使用Layer0技術之前，Akira的第一頁平均載入4.8秒，後續頁面載入2.5秒。
Akira利用Edgio (Layer0)內置的先進技術改進了這些結果並獲得了次秒頁面載入： 具有伺服器端渲染和AMP轉換功能的電子商務PWA，Layer0 CDN AS-JavaScript爲邊緣動態內容提供95%以上的高速暫存命中率(並使網站保持在購物者的前面5秒)，Layer0的無伺服器JavaScript後端用於前端以優化伺服器和API。
藉助Edgio (Layer0)，零售商在許多領域立即得到了提升：
- 首次載入時間下降了70.8%，接近一秒
- 瀏覽切換效果下降到驚人的500毫秒
- 現在，一半的網站頁面在不到500毫秒的時間內載入
- 移動轉換率上升37.25%
Lighthouse也很好地反映了這些改進—Akira的性能得分提高了36分，超過了Web上75%的網站，並提供了更好的客戶瀏覽體驗。
閱讀完整的 Akira案例研究。
安妮·塞爾克 是另一個出色的例子,說明如何投資網站速度可以幫助零售商爬上搜尋引擎結果頁面。
在跳過Edgio (Layer0)之前,家居和裝飾零售商 Annie Selke 甚至沒有出現在谷歌搜尋結果的封面上方。 如今，隨着有機流量增長32%，移動有機流量增長40.41%，它超越了其數十億美元的競爭對手。
如果您有興趣,我們的網站上還有一個 Annie Selke案例研究 ,我們進入nitty-gritty。
對於像Akira和Annie Selke這樣的線上零售商來說,一個性能良好的移動網站是一個低懸的水果。 它可以只是他們需要的,以抵抗來自電子商務巨頭如亞馬遜, Nordstrom和Zappos的無情競爭。
網站越快,它的排名就越高,就像一個瞬間,保證的SEO。 Edgio (Layer0)產品組合中有很多例子證明了這一點。 Akira，Annie Selke和 Shoe Carnival 等衆多知名品牌，包括亞馬遜。
Layer0提供了先進技術的組合，使電子商務達到最高速度：
- 具有伺服器端渲染支援和AMP轉換的Ecommerce PWA
- 預測性預取
- CDN即JavaScript爲邊緣動態內容提供95%以上的高速暫存命中率，使網站比購物者提前5秒。
- Layer0 Serverless-JavaScript前端後端優化伺服器和API。
安排1對1演示
安排諮詢對話，瞭解Edgio (Layer0)如何幫助您實現次秒頁面載入。 單擊此處！
什麼是伺服器端渲染？它是如何工作的？
伺服器端渲染(Server Side Rendering ,簡稱 SSR)是一種常用的技術,用於渲染伺服器上通常只有客戶端的PWA頁面,然後將完全渲染的頁面發送到瀏覽器。 然後，客戶端的JavaScript捆綁包可以接管，PWA可以正常執行。 SSR基本上將JavaScript頁面轉換爲HTML，這是一種搜尋爬網程序和瀏覽器在伺服器上都能理解的語言。 這可確保瀏覽器和搜尋爬網程序可以輕鬆地傳遞和索引頁面。
使用SSR的一個主要好處是,每個搜尋引擎都可以對應用程式進行爬網和索引。 這有助於SEO和提供元數據到社交媒體通路.
SSR的好處
SSR通常也有助於提高性能，因爲在第一次請求時，完全載入的應用程式會從伺服器發送下來。 不過，對於非瑣碎應用程式，您的里程可能會有所不同，因爲SSR需要的設定可能會變得有點複雜，並且會產生更大的伺服器負載。 值得慶幸的是，有一些服務和工具，如異構前端和具有SSR開箱即用支援的Layer0。
最後,是否爲您的網站使用伺服器端渲染取決於您的特定需求,以及哪種取捨最適合您的使用案例。
什麼是現代CDN和邊緣計算？
邊緣計算 是一種網路理念，專注於使計算更接近數據源，並減少過程中的延遲和帶寬使用。 使用許多不同的技術可以實現這一點。 使計算更接近網路邊緣(用戶的計算機，物聯網設備或邊緣伺服器)，最大程度地減少了客戶端和伺服器之間的遠程通信量。
具有邊緣計算功能的CDN 通過將內容流化到與用戶最接近的CDN線上狀態(POP)，您可以縮短從網站伺服器到用戶瀏覽器的傳輸時間 (因此，舊金山的用戶從南舊金山的流行音樂中交付內容，而紐約的用戶則從布魯克林的流行音樂中交付內容)。
CDN具有邊緣計算的優勢
CDN將您網站的暫存版本存儲在多個位置，以確保更快地載入頁面。 每個這樣的Pop都包含幾個暫存伺服器,負責向其附近的訪問者交付內容。
Layer0的 cdn-as-JavaScript 將該概念提升到另一個級別。 它是一種應用感知CDN，可瞭解您的應用。 它使用的語言與您的前端開發人員已經知道的語言相同,並使您可以完全控制暫存。 因此，使用Layer0的網站會看到邊緣動態內容的高速暫存命中率達到95%以上。
Layer0 CDN AS-JavaScript的邊緣計算功能可預測地預取最可能的下一頁並在請求之前將其流式傳輸到邊緣，從而使您在購物者之前保持5秒的領先地位，從而在用戶點擊指向它們的鏈接之前暫存並準備就緒。
摘要
載入時間過長可能會破壞用戶的體驗和網站的搜尋排名。 AMP解決了這一問題的一部分–它使搜尋的第一頁快速得驚人。 但這只是戰鬥的一半。 要讓您的網站快速上手，需要加倍努力，採取更全面的方法–結合加速移動網頁(AMP)，現代便攜式前端，伺服器端渲染(SSR)和具有邊緣計算功能的CDN等技術。
Layer0幫助複雜和動態的電子商務網站達到次秒的速度，同時提高開發速度和利潤增長並降低DevOps成本。 它還包括一個CDN即JavaScript，可爲動態內容提供95%或更高的高速暫存命中率，而其他CDN僅爲15%。
Layer0始終爲大型電子商務網站提供低於500ms的中間頁面載入，其中包含數十個標籤和腳本，更不用說動態定價和實時庫存查找。 衆所周知，這些速度的提高會導致15-30%的轉換提升，更好的可見性，覆蓋範圍，最終， 更高的收入。
安排與網站速度專家進行諮詢性對話 ，瞭解我們如何通過即時電子商務網站幫助您獲得競爭優勢！
