Home 技術文章 背後的祕密-快速Shopify Plus商店
Applications

背後的祕密-快速Shopify Plus商店

About The Author

Outline

Shopify Plus是一個受歡迎的SaaS電子商務平臺,吸引了一些世界上最大的品牌,如Tesla,Victoria Beckham Beauty,Staples,Oreo/Mondelez和Red Bull. 這份清單一直在繼續,廣泛採用並不令人驚訝–Shopify Plus易於使用和自定義。 它提供了大量插件和API,並由響應速度令人難以置信的支援團隊提供支援。 您還能從電子商務平臺期待什麼呢? 無論是與Shopify商店或其他,答案保持相同:次秒頁面載入和SEO擊敗您的競爭對手.

即使是最沉悶和最美麗的Shopify Plus網站,也不會有機會反對來自大零售商的破碎競爭-除非經營者加倍努力優化網站的次秒速度。

讓你的Shopify Plus商店儘快成爲最簡單的方法之一,讓你的商店在SERPS排名更高,並提高你的轉化率,這得益於一個卓越的,無縫的購物體驗.

Shopify讓您能夠交付產品,而不是體驗

許多電子商務平臺(如Shopify Plus,Magento或Salesforce Commerce Cloud)都採用後端和數據至上的方法構建,幾乎不注重實際客戶體驗。 他們的重點是SKU,而不是人員。 這會給平臺客戶,系統集成商,設計人員和開發人員帶來網站速度優化的負擔。

無論您的商店是在Shopify Plus或任何其他流行的電子商務平臺或後端系統上執行,如果您想要提供最快的體驗,您都需要實施以速度爲中心的高級Web技術。 爲此,你必須首先去無頭。

無頭電子商務的好處

無頭電子商務架構是站點的前端設計(即表示層)與後端基礎架構分離的架構。 這有點像使用WordPress來管理移動應用程式的內容(對於它的價值來說,使用WordPress的REST API是可能的)。

傳統的單一電子商務架構

無外設已被認爲是2020年及以後許多零售商的首要舉措之一。 它使零售商能夠獨立於後端爲其前端選擇最佳的解決方案,從而使商店能夠更快地執行,提高轉化率和排名。 無外設電子商務(也稱爲微服務架構)幾乎是一種在競爭中獲得優勢的故障安全方法。

API層允許站點前端與其後端分離

更具體地說,無頭電子商務提供了幾個好處:

1.速度更快

無外設是實施許多以速度爲中心的技術的先決條件。 這是通過將顯示邏輯轉移到客戶端並簡化後端以獲得最佳性能來實現的。 通過專注於快速交付內容,前端可以更快,響應速度更快,超過一個把辛苦工作留給瀏覽器.

2.自由選擇

許多電子商務平臺爲用戶提供專有前端。 Shopify Plus也沒有什麼不同,它有一系列基於Shopify的Liquid templating語言的響應主題。 通過無外設,您可以完全擺脫供應商束縛的束縛,超越平臺前端工具。 這將提高靈活性,並使您能夠獨立於電子商務平臺的路線圖開發前端。

3.後端獨立性

在無頭網站上的投資,以適應未來的商店。 您擁有前端代碼,並且可以自信地開發和投資它。 這允許你把它移動到另一個,更便宜或更好的電子商務平臺,無論何時你想要. 在這種情況下,即使您的商店與第三方工具集成了數十種,它們也不需要爲新的電子商務平臺重寫,您只需將舊平臺的API與新平臺的API交換。

4.更好的SEO

無頭網站不僅更快,而且還具有更好的SEO。 通過無頭網站,您可以選擇如何處理URL,元數據,robots.txt文件以及技術SEO的其他方面。 Shopify Plus不支援此開箱即用。

5.支援未來的使用案例和端點

藉助Progressive Web Apps (PWA)/單頁應用程式(SPA)等無頭前端,營運商可以滿足未來需求,自由添加新的端點,並開發其他功能。 您只需連接到API即可。 您幾乎可以添加任何設備或平臺作爲端點,並通過無頭方式爲您的商店結帳。

最快Shopify Plus商店背後的祕密

無外設是實施多種高級Web技術和優化技術的基礎,這些技術有助於開發更快,響應更快的店面。 結合起來,他們可以幫助優化任何Shopify Plus網站,以實現最大速度, SEO和收入。

便攜式PWA前端

通過無頭連接Shopify Plus和PWA便攜式前端,您可以在移動設備上獲得網站上的超快瀏覽速度。 有了PWA,您的客戶將享受即時頁面轉換的增強體驗。 儘管PWA的瀏覽轉換速度很快,但其首次載入的時間往往比傳統的多頁網站要長。 爲了應對這一問題並提供從登陸到結帳的極速體驗,請考慮爲PWA添加伺服器端渲染和AMP支援。

伺服器端渲染(SSR)

伺服器端渲染是一項關鍵的Web技術,它與快速PWA一起提供。 如果沒有伺服器端呈現,瀏覽器必須下載,解析和執行所有JavaScript代碼,然後才能在顯示器上呈現任何內容。 沒有SSR的PWA很難在類比3G上實現低於2.5秒的首次有意義塗料(TTFMP)。 結合具有邊緣計算功能的現代化CDN,使用SSR的站點可以實現幾乎即時的TTFMP時間。

SSR確保來自電子郵件,社交媒體和推薦的訪客快速首次載入。 憑藉SSR支援,PWA可提供超快的首頁載入體驗,以及超越第一頁的即時頁面轉換。

伺服器端渲染也會導致更好的SEO。 電子商務企業依賴於SEO,唯一的方法是將您的網站翻譯成HTML,才能100%確保您的網站將被搜尋和社交爬蟲程序理解。

如果您爲Shopify Plus構建了一個JavaScript密集型電子商務PWA前端,這一點尤爲重要。 您必須在伺服器上呈現頁面,因爲爬蟲程序和爬蟲程序無法可靠地索引JavaScript內容。

Shopify Plus不提供內置SSR支援。

加速移動頁面(AMP)

Google AMP是一個開源框架,通過簡化HTML並對CSS和JavaScript實施嚴格的限制,創建超快的移動網頁。 從搜尋到的平均AMP頁面載入時間爲500毫秒。 這些頁面在Google伺服器上暫存並預渲染,這就是它們快速交付的方式。

Shopify Plus不提供AMP或真正的SSR開箱即用支援,這嚴重妨礙了您優化移動設備上的首頁載入的能力。 您需要自行將這些功能添加到您的網站。 對於AMP和SSR,您需要前端後端。 下面是更多關於這一點的資訊。

前端後端(BFF)

BFFs在使用無頭電子商務和基於微服務的架構API方面發揮着核心作用。 它是應用程式堆棧中的一個獨立層,允許單個客戶端(例如PWA或原生Android或iOS移動應用程式)更高效地使用共享API,而無需爲每個客戶端優化它們。 ‘透明地攔截’API調用,並轉換傳遞的參數,使其被特定端點理解。

BFF是進行前端伺服器端渲染和AMP轉換的完美場所。 BFF還爲Shopify商店帶來了許多其他好處:

BFF和速度
您的前端可能需要協調對多個服務的呼叫和/或重新格式化響應數據以最適合頁面設計,並且此代碼需要在某個位置執行。 BFF允許您將此代碼保留在前端捆綁包中,使其小而快。 在大多數情況下,響應都是可暫存的,因此,它不是在每個用戶的設備上執行此shim代碼,而是在雲上執行,它可以擴展以滿足需求,並且只有在暫存丟失時才執行。

對於移動客戶端,過多的HTTP請求在時間方面成本高昂,每次調用都會增加不必要的毫秒數。 爲了儘量減少請求的數量,前端通常傾向於通過單個API獲取相關數據。 這意味着有時後端將負責與UI相關的邏輯處理以滿足每個客戶端的需求。 這是一種效率低下的方法。

通過實施前端後端,前端(移動,網路)只通過BFF訪問後端微服務,每個客戶端都獲得單獨的BFF服務。 有了BFF,微服務之間的相互呼叫就會減少。 這是因爲某些UI邏輯是在BFF級別處理的。

BFF和開發速度
BFF允許不同的開發團隊獨立工作,從而提高開發人員的速度。 它允許開發人員添加新功能,而無需更改核心API。 如果API由Shopify Plus提供且無法更改,則此功能特別有用。

最大限度地減少供應商束縛
如果您需要將Shopify切換到另一個電子商務平臺,前端後端可以減少工作量和成本。 這以無頭架構的靈活性爲形式提供了巨大的優勢。

基於BFF的前端和後端去耦

具有邊緣計算功能的預測性預取和CDN

預測性預取是一種高級功能,用於預暫存和呈現訪問者在單擊頁面之前最有可能訪問的頁面。 具有邊緣計算功能的現代CDN允許您在用戶請求動態數據之前將動態數據流到邊緣,然後流到用戶的瀏覽器。 結合這些技術,您的Shopify Plus商店無論在哪裏點擊,都能比購物者提前5秒。

通過預取動態數據並將其流式傳輸到邊緣,您可以暫存並即時爲瀏覽Shopify商店的消費者提供服務,即JSON數據,這些數據可轉換爲您現有的不同產品,其價格和資訊。 但要做到這一點,您需要能夠理解您的應用的成熟CDN。

Layer0 CDN-AS-JavaScript將暫存命中率優化爲未聽說的級別,並將智能帶到邊緣。 這有助於企業主通過對類似的頁面(例如PDP,PLP和Cart)進行分類來分析趨勢和優化機會,而不僅僅顯示無盡的URL列表。 這使您可以採取行動並查看網站載入時間的差異。

Layer0 CDN-AS-JavaScript對邊緣動態內容具有95%以上的暫存命中率,而平均電子商務網站的暫存命中率爲15%。 這種差異以及預測性預取功能,使大型電子商務網站在購物者的前面5秒,無論他們點擊哪裏。

使用Shopify Plus無頭有多難?

選擇一個電子商務平臺來營運您的商店應該考慮到平臺對無頭網站的支援以及支援次秒網站的技術。 許多電子商務平臺都是開箱即用的單片平臺(即,它們將前端與後端結合在一起)。

雖然不明確支援無頭架構,Shopify Plus允許零售商執行無頭商店,並使用不同的前端框架(如React Storefront )或無頭CMS (如Contentful ),這是許多無頭Shopify內部版本使用的。

Shopify Plus提供可靠的專有店面API集合,通過支援對平臺的內容和組件的訪問,使其無外設成爲可能。

請注意,Shopify Plus並不正式支援無頭網站,也不提供許多開箱即用的快速功能和技術。 這並不奇怪–該平臺旨在管理您的庫存,定價和數據,而實施這些技術通常需要大量的努力。 但是,如果有一些警告,Shopify Plus仍然是一個很好的選擇,因爲它使零售商相對容易做到無頭,並實施以速度爲中心的關鍵策略。

Shopify Plus專業人員

  • 出色的API用於產品資訊 藉助Storefront API,Shopify Plus爲產品和訂單處理提供了一個體面的參考,並且這些API都有很好的記錄。
  • GraphQL API格式 Storefront API提供現代,面向未來的GraphQL格式。

Shopify Plus缺點

  • 沒有現成的PWA框架 Shopify Plus在本機不支援PWA。 然而,有些商戶在平臺上執行PWA。 爲了實現這一點,商店可能需要一個後端前端(BFF),它允許您在StoreFront API和PWA前端之間執行微服務。 這是一種優化API並避免爲每個客戶端創建單獨API的方法(並最小化客戶端邏輯量)。
  • 沒有AMP即開即用 的Shopify Plus不提供任何專有的加速移動頁面(AMP )解決方案(儘管可以通過Shopify App Marketplace的付費應用實施AMP )。
  • API覆蓋範圍 雖然Shopify對產品具有體面的API,但對許多其他東西也沒有完全的API覆蓋。 例如,雖然Shopify Plus控制面板允許賣家在網站導航菜單中設定項目,但沒有API可以獲取這些菜單項。 無頭Shopify Plus實施不提供一種簡單的方法來訪問它們,而不需要進行一定的ARM摔跤和變通方法。
  • 限制 Shopify Plus限制作爲單個用戶可以發出的請求數。 Shopify Plus具有用於API調用的特殊標頭,因此BFF層不計爲單個用戶。 但是,由於上述API覆蓋問題,請求可能並不總是實際的API調用,BFF層仍會將其視爲來自單個用戶。 即使該層是許多用戶的通信的代理層,也會發生這種情況。

Edgio (Layer0)如何簡化流程

我們瞭解到,閱讀所有PWA,SSR,AMP和BFF三字母技術縮寫詞可能會讓您感到頭疼,更不用說獨自實施這些技術可能會有點麻煩。 Edgio (Layer0)以性能卓越,可擴展的方式爲您處理所有這些問題,幾乎無需DevOps或維護。

Edgio (Layer0)致力於通過唯一的平臺來確保數據庫驅動的電子商務網站的次秒頁面載入,幫助我們的客戶贏得可見性,覆蓋率,收入和客戶滿意度。

我們幫助複雜,動態的電子商務網站實現次秒速度,同時提高開發速度和利潤增長,並降低DevOps成本。

除非我們的客戶這樣做,否則我們不會贏得勝利。 我們的產品組合中有即時的Shopify商店,從而實現了信心的飛躍,以確保他們在競爭激烈的電子商務領域中的地位。

Planet Blue如何成功地在Moovweb XDN上推出了一個即時Shopify Plus商店

Planet Blue在Layer0 (Edgio)上從16秒瀏覽轉換到500毫秒

Planet Blue已經從一家零售店採購有機服飾的供應商發展成爲一家國際設計師和全通路服裝零售商。 他們在n ü ç 上的即時Shopify商店使他們能夠提供卓越的購物體驗。

在tayer0上啓動之前,Planet Blue的移動網頁載入時間爲10秒。 70%以上的零售商移動流量嚴重影響了他們的轉換率。 Planet Blue瞭解到,爲了滿足客戶需求並保持競爭力,需要對其移動體驗進行徹底改造。 在Layer0上啓動將導航時間縮短了95%(桌面上爲16秒→0.5秒,移動上爲10秒→0.5秒),給人一種線上目錄的印象,在用戶瀏覽網站時不會產生任何摩擦。

Planet Blue使用Layer0的結果:

  • 與Layer0上的即時站點的轉換率相比,有31%的同比提升
  • 16秒→0.5秒的轉換 ,臺式機的速度降低了97%
  • 10秒→0.5秒的轉換 ,移動設備的速度降低了95%
  • 平均每臺設備的首頁載入減少60%以上
  • 客戶滿意度評級提高20%以上 ,只需一眨眼就能載入頁面

  • 使用React Storefront構建的速度驚人的電子商務PWA
  • 伺服器端渲染和AMP支援
  • 預測性預取
  • cdn-as-JavaScript可優化邊緣動態內容的高速暫存命中率,從而使商店可以提前5秒預測購物者的點擊量。

摘要

過渡到無外設商務架構是許多零售商的首要舉措—梅西百貨,沃爾瑪,Target,Nike,Airbnb, 還有更多的人已經做好了這一轉變。 這一趨勢正逐漸得到重視,原因有三個:它提供了擺脫電子商務平臺前端工具限制的自由,允許實施一流的Web技術來提高網站速度和SEO,並允許輕鬆實施未來的使用案例。

在上面討論的一些警告中,Shopify Plus非常有助於建立一個無頭商店和實施以速度爲中心的關鍵技術。 你能承受得起被拋在後面嗎?