Home 技術文章 超越優化—最快Magento 2商店背後的祕密
Download
Applications

超越優化—最快Magento 2商店背後的祕密

About The Author

Outline

原始來源:Layer0

優化電子商務網站以提高速度始終是一項關鍵戰略,使零售商能夠提高其可見性和轉化率。 現在,站點速度更爲重要。 Google最近宣佈推出一項即將推出的頁面體驗更新,該更新引入了一種新的排名算法,根據用戶對頁面的體驗對頁面進行評判。 這意味着當更新在2021年初上線時,慢頁的排名將低於當前排名。

這給Magento 2網站帶來了一個重大挑戰和機遇,他們希望超越肉和馬鈴薯優化策略,並通過一個在Google搜尋結果中排名前列的即時網站來打破他們的競爭。

什麼是Magento?

Adobe擁有的 Magento 是一個領先的電子商務平臺,全球超過250,000家線上零售商使用。 從觀點來看,網際網路上每四個電子商務企業都在使用平臺。

官方 支援Magento 1於2020年6月結束 ,遷移到Magento 2,最新的化身的平臺,需要完整的網站重寫。 對於許多零售商來說,這提供了一個很好的機會來重新考慮他們的速度優化策略,並實施一流的網路技術來提高網站性能和SEO。

每秒都很重要

在過去的幾年裏,網際網路已經大幅加速. 尼爾森的網際網路帶寬定律 表明,高端用戶的連接速度每年增長高達50%。 這一規則在過去36年中一直保持不變,從極慢的撥號連接到當今瘋狂的寬頻速度。 根據 Speedtest.net的數據,今天的美國人通過固定寬頻連接平均下載速度達到135 Mbps,上載速度達到52 Mbps。

令人印象深刻的是,這些數字是,這並不直接反映在更快的網站. 移動網際網路性能也是如此—儘管全世界都在追求超快的5G網路速度,但他們很少與電子商務商店和其他網站的速度有多快有關。 諷刺的是,移動頁面載入時間 實際上是 在過去幾年。

資料來源:nngroup.com

更快速,無摩擦的電子商務商店可以在一個會話中向用戶顯示更多產品。 這反過來又提高了轉換率。 在理想的情況下,商店及其界面應該遠離一切,只是一個偉大的購物體驗的背景.

此外,與大多數電子商務商店一樣,您最有可能在人們對價格非常敏感的市場中提供產品。 更糟糕的是,您的競爭對手可能以類似的價格提供相同的產品。 在這種情況下,你的SEO排名和網站體驗可能是少數幾種其他方式來區分你自己. 這兩個問題的聯繫比許多賣家意識到的要多。

谷歌支援快速網站

隨着 谷歌頁面體驗的不斷更新 ,密切關注網站的速度至關重要。 優化電子商務網站以提高速度已被確定爲2020年及以後許多零售商的首要舉措之一。 當頁面體驗算法更新推出時,速度較慢的網站將在搜尋排名和SERP位置快速下滑。 現在是採取行動的時候了。

Google搜尋結果的第一頁接收到幾乎95%的Web流量,剩餘的SEP頁面只剩下5%。 雖然谷歌一直對他們的RankBrain算法及其不同組件的加權方式非常模糊,但我們確信,2021開始的速度將在搜尋排名中發揮關鍵作用。 這很可能是歷史上第一次當谷歌打開和服對特定信號影響搜尋結果.

不優化你的Magento 2商店的速度,你有失去有機交通和潛在客戶的風險。 許多商店——甚至大品牌——在2020年未採取行動——可能會發現他們的搜尋流量減少,並遭受巨大的收入損失。 提供更流暢,更好,更快體驗的網站將開始主導最受歡迎的有機關鍵詞。

提供卓越的體驗,而不僅僅是產品

與其他許多電子商務平臺一樣,Magento 2最初採用後端和數據至上的方法構建,非常少關注實際的最終客戶體驗和網站速度。 他們的重點是SKU,而不是人員。 這給平臺的客戶,系統集成商,設計人員和開發人員帶來了網站速度優化的負擔。

無論您的商店是在Magento 2或任何其他流行的電子商務平臺上執行,還是在後端系統上執行,如果您想要在那裏提供最快的體驗,您都需要實施以速度爲中心的高級Web技術,爲此,您必須先無外設並構建便攜式前端。

要全面瞭解無頭電子商務是什麼以及它爲什麼是即時頁面廣告的基礎,請觀看此網路研討會。

繼續閱讀最快Magento網站背後的關鍵策略。

快速Magento 2商店背後的技術

網站速度對於電子商務尤其重要,因爲線上購物本質上是一種非常直觀的體驗。 商店通常是圖像密集的網站,購物者最後想要看到的是商品頁面載入緩慢,圖片粗糙和抖動。

當優化你的Magento 2商店的速度,你可以實施一系列策略,使它更快—使用輕量主題,優化圖像,刪除渲染阻止javascript代碼等 你可以有一個整個團隊優化你的網站,但問題是所有這些標準速度優化技術涉及調整事情通常發生 在點擊後. 使您的網站 真正 快速需要在客戶甚至點擊任何東西之前在機櫃下執行的技術組合 。 您需要從反應轉向分路到預測(稍後更多相關資訊)。

許多面向速度的Web技術要求將後端與前端分開,即使前端 可移植,或訂閱無頭商務架構。 無外設讓您可以更輕鬆地爲前端和後端單獨使用同類最佳的解決方案,從而在您選擇的後端提供最快的網站。

一旦你使用Magento 2電子商務網站無頭,你可以使用爲速度而構建的便攜前端,如Progressive Web App (PWA)。 執行無頭Magento 2商店與PWA前端需要可靠的API覆蓋和良好的文檔。

實現無外設還可讓您開始實施更多尖端技術,從而使您的網站變得極快,包括:

  • 可攜式前端,讓您快速瀏覽轉換
  • 伺服器端渲染(SSR)和AMP支援閃電般快速的首次載入。
  • 預測性預取
  • 採用邊緣計算技術的一流CDN,可優化邊緣動態內容的高速暫存命中率,並保持比購物者提前5秒

讓我們來看看Magento 2在實施這些技術和支援次秒電子商務網站方面的適用性。

1. Magento 2 API

無頭商店通過API將前端連接到後端電子商務平臺。 在無外設前,您應該檢查您的電子商務平臺是否具有良好的API覆蓋範圍,以及您是否可以輕鬆連接到第三方店面。

Magento提供API覆蓋範圍:所有版本均提供SOAP和REST端點,並且隨Magento 2更新添加了本機GraphQL支援。 PWA和無外設端點可以通過GraphQL API創建,但是,自定義平臺的代碼和/或數據庫架構可能會破壞API兼容性。

  • Magento 1 API格式: REST,SOAP
  • Magento 2 API格式: REST,SOAP和更現代的GraphQL

Magento 2使創建API以支援無頭網站和PWA相對容易,作爲其REST和SOAP Web API的替代方案,用於前端開發。

2.爲Magento構建PWA前端2.

現代的PWA便攜式前端在許多方面都像原生應用程式,其速度優勢顯而易見,因爲瀏覽網站的速度更快,人們在網上購物時會做很多事情。

Magento 2上的PWA具有原生的感覺, 速度更快。 但是,當在PWA上下文中提到速度時,它更多的是佈局 穩定性 而不是 速度。 當您在頁面之間切換時,這些頁面不會像傳統網站上那樣”反彈”。 用戶通常認爲這種”反彈”的頁面載入速度很慢。

您可能已經多次看到這種情況—您進入網站,幾秒鐘後就會載入廣告或橫幅,所有內容都會發生變化,上下移動整個佈景主題。 這會給購物者帶來意外的點擊,分心和挫折感。

PWA前端解決了此問題。 Magento PWA Studio是一組工具,讓開發人員在Magento 2上構建複雜的漸進式Web應用程式。 遺憾的是,PWA Studio僅適用於Magento 2.3或更高版本,大多數賣家尚未升級到的版本。

總結來說,這裏是建立一個PWA前端坐在你的Magento 2商店頂部的利弊.

Magento 2在支援的PWA中的優勢:

  • Magento提供一些PWA支援。 Magento 2帶有Base和Luma響應式主題開箱. 對於PWA,Magento 2.3提供了一個稱爲PWA Studio的工具包,其基本主題爲“Venia”。
  • 更好的佈局穩定性。 使用PWA前端Magento 2頁面渲染得更平穩,即圖像載入時不會”反彈”,即使在圖像密集的頁面上也是如此。
  • 速度。 如果正確構建PWA,它將使網站更快。

請注意,最後兩個優點依賴於伺服器端渲染,這是可能的,但並非始終可用於PWA Studio前端。 稍後再來。

在Magento 2上交付PWA前端的挑戰:

  • Magento原生提供的PWA並不是很快。 您需要適當的基礎架構才能快速實現。 有時,如果沒有支援該功能的正確技術(例如伺服器端呈現和具有邊緣計算功能的CDN),PWA甚至會減慢您的網站速度。 很多大商店都犯了這個錯誤。 這聽起來有點反直覺,但事實確實如此—您可以進入PWA以提高速度,但最終可能會降低網站的速度。 我們的分析顯示,美國500強提供PWA的電子商務網站的載入速度比非PWA的網站快得多,平均時間約爲4秒。
  • 如果沒有SSR和AMP,第一次點擊仍然很慢。 Magento PWA Studio不支援開箱即用的SSR或AMP,因此第一頁的載入並不太好。 此外,第一次載入速度並不是那麼快,因爲當您訪問PWA時,您將下載整個“應用程式”。 下一頁的PWA比傳統的多頁網站快得多。
  • Magento的PWA Studio與其他開源前端選項類似,但PWA Studio專門針對平臺而設計。 這意味着你仍然被鎖定在Magento生態系統,這會扼殺一些無頭商業的價值。
  • 使用原生PWA Studio在Magento上構建PWA需要與傳統Magento開發不同的技能組和工具鏈。
  • Magento PWA Studio僅適用於Magento 2.3或更高版本。 大部分Magento商店尚未升級到Magento 2.3。

總的來說,選擇開放原始碼,可移植的PWA框架(即,一個不是本地內置在平臺中,但提供自然的API連接的框架)是比供應商生產的在PWA Studio中提供的框架更好的選擇。

Magento 2的第三方前端框架

開放原始碼和供應商提供的前端選項是免費的,但供應商生產的前端是不可移植的。 當然,你可能可以把它帶到另一個平臺上,但它肯定不是爲了允許這樣做。 供應商提供的前端(如使用PWA Studio構建的前端)由電子商務平臺構建,以獲得PWA答案,而不是因爲他們打算讓您在重新平臺時隨身攜帶。

當您尋找可以與Magento 2商店搭配使用的PWA前端時,您最好是尋找一個等構架,即在兩個版本中呈現相同頁面的框架。 您不必寫兩次,只寫一次。 第一個頁面是伺服器端呈現,導航是客戶端呈現。

有一些同構無頭框架,你可以使用你的Magento 2商店一旦你去無頭:

  • next.js–Vercel爲PWA創建的一個很好的React框架,
  • Nuxt.js–與Next.js相同,但基於Vue,
  • React Storefront–基於Next.js,但具有更多的店面功能,小部件和連接到Magento,Shopify和SAP (Hybris)等特定平臺的連接器。 Layer0是開源PWA框架React Storefront的主要貢獻者。
  • Angular–通過伺服器端渲染創建便攜式PWA前端。

這四個框架提供客戶端和伺服器端呈現。 這意味着對第一次負載沒有速度取捨—門店中的第一次和所有後續負載都會很快。 此外,我們知道谷歌喜歡渲染時間短的頁面,這給像商店這樣的重度應用程式更少的機會來定位自己,沒有SSR。

複雜的電子商務網站通常是JavaScript密集型網站,需要Google做更多的努力來抓取和理解它們。 他們會說這並不重要,但Google不喜歡客戶端渲染。 如果您的內容未正確顯示,可能會出現錯誤和問題。 理想情況下,您應該查找一個能夠立即進行伺服器端渲染的PWA框架,而Magento的PWA Studio則沒有。

底線:在Magento 2.3上使用PWA Studio獲得的本地PWA體驗並不提供巨大的速度改進。 但在Layer0上啓動Magento PWA Studio將爲您提供更快的網站。

構建更快的Magento 2.

無外設,便攜式前端(如PWA)具有許多速度優勢。 一個好的PWA將帶你從慢到快,但它不會得到你即時. 爲此,您需要正確地結合尖端技術,例如:

1.伺服器端渲染(SSR)和AMP

Magento 2.3爲實現伺服器端渲染提供了有限的工具。 它是通過Moustache模板實現的,作爲Magento PWA Studio向上規格的一部分。 True SSR在伺服器上執行完整的客戶端代碼(不僅僅是Moustache模板)。 因此,向上的SSR僅限於特定區域(如應用程式shell),或者開發人員必須將代碼複製到需要支援SSR的每個頁面或區域的客戶端響應代碼和伺服器端Moustache模板中。

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

在Magento 2商店上實施SSR和AMP的挑戰:

  • Magento不提供AMP的內置支援。 支援AMP需要第三方擴展和/或重建您現有的主題,以便自己添加這些功能。 這嚴重阻礙了您在移動設備上優化首頁載入的能力。
  • 在Magento 2上,支援真正的SSR向上需要執行和維護Node.js伺服器的車隊。

2.現代CDN

內容交付網路(CDN)可以存儲媒體文件。 CDN旨在加快網站內容的載入速度(圖像,影片和代碼—JavaScript,CSS和網站的其他部分)。 當有人訪問您的網站時,CDN會縮短內容的訪問時間,因此不必從伺服器訪問整個國家/地區。 CDN將其放在每個主要城市,因此訪問該內容的時間要短得多。 有些人可能有CDN,但甚至不知道。

傳統CDN用於靜態網站—存儲圖像,文本和其他不經常更改的元素。 但現代商店,具有動態定價和實時庫存查找功能,需要的遠遠不止於此。

即使移動網路越來越快,而且我們擁有所有4G和5G速度,移動網站仍保持相同的速度,通常每頁載入3-5秒左右。 儘管如今幾乎每個主要的電子商務網站都使用CDN,但這一點仍未見改善

將CDN與Magento集成的挑戰2.

  • 雖然您仍可以使用您選擇的CDN,但Magento的內部部署版本並未隨附現成的CDN集成。
  • Magento Commerce (雲)有一個內置的暫存模塊,但它不是真正的CDN。 它缺少真正CDN所擁有的分佈式存在點(POPS)。

Layer0 CDN-AS-JavaScript可以替換CDN或與之一起使用。 我們擁有近100個POPS。 Layer0上的網站在邊緣的動態內容中的平均高速暫存命中率爲95%以上。

安排諮詢對話以瞭解Layer0如何幫助您在Magento 2上實現次秒頁面載入。

我們隨時爲您提供幫助

Layer0使擁有一個快速,無頭的Magento存儲超級簡單,從開發和部署到輕鬆回滾。 您可以爲任何現代無頭前端執行此操作:next,nuxt,react,sap/Spartacus,react Storefront, Vue Storefront—我們支援所有這些功能。

速度和轉換提升。 如果將轉化率提高和自然流量提升相結合,將爲您的電子商務網站帶來協同效應,這將直接轉化爲收入。 通過執行更快的存儲,您不僅可以在SERP中獲得更高的性能。 在更具競爭力的市場中,這意味着您的競爭對手正在失去您網站的流量。 Layer0上的網站的轉換率和搜尋流量平均提升15-30%。

簡單。 在Layer0,我們的目標是使Web即時而簡單—儘管我們支援的是無頭的趨勢,這不是一項簡單的任務。 Layer0上的網站只需使用我們的無伺服器JavaScript平臺將代碼置於其工作流的中心,即可將開發人員的速度和企業靈活性提高20%。

協作。 每次編寫新代碼時,都會自動生成預生產環境。 您的QA人員和業務利益相關者可以在代碼合併之前對其進行測試並提供反饋。

在12周內從Magento 1升級到Magento 2並獲得次秒網站。

真A/B測試。 A/B測試將減慢您的網站速度。 有一個網站優化速度,然後A/B測試破壞你的努力是沒有意義的。 使用Layer0 (Edgio),您可以在您的網站上進行實驗,但仍然可以瞬間完成。 例如,您可以爲5%的用戶執行Canary部署。 使用Layer0,您可以像編寫應用程式一樣編寫路由規則,並且可以完全控制流量拆分。

Layer0還附帶了性能監控和儀表板來跟蹤所有數據。

無限規模。 即使在黑色星期五,Layer0也會自動擴展,以吸收更多的流量進入你的商店。 每個月有三分之一的美國購物者訪問Layer0網站,您知道您是在良好的手中。

安全性。 Layer0是企業級的PCI 1級DSS認證,具備WAF,DDoS和爬蟲程序緩解功能,開箱即用。

如何成功的商店做到這一點:Akira的瞬間Magento 2商店在Layer0上

一個即時的電子商務網站可以對您的底線產生巨大的影響。 我們與客戶一起已經見過這種情況。 例如,禮品和鮮花巨頭,1-800-花看到了50%的轉換從其次秒網站. Venus Fashion是另一個例子,時尚零售商在不到一秒的時間裏從其網站載入量的15.25%上升到在Layer0的72.75%,導致24%的轉換率。

時尚零售商Akira在Layer0網站上的次秒網站上提高了37.25%的轉換率。 Akira立即結合了各種先進技術:

  • 使用React Storefront構建的速度驚人的電子商務PWA
  • 伺服器端渲染和AMP支援
  • 預測性預取
  • 具有邊緣計算功能的CDN即JavaScript

前兩個選項確保從着陸到結帳的頁面速度極快。 最後兩個選項可預測網站的下一次移動,從暫存的邊緣預取JSON數據並將其流式傳輸到瀏覽器,從而確保網站保持在購物者的前5秒。 這樣,用戶就感覺整個站點已經在電話上,不再有“頁面載入”的概念。

無摩擦AMP支援更快的搜尋流量和更好的SEO

Akira超越了亞馬遜,Nordstrom,Zappos和其他數十億美元的競爭對手的關鍵短語。 如何? 時裝零售商利用React Storefront的AMP轉換技術,從搜尋中立即提供首次載入。

零售商網站的每個頁面都會自動生成AMP版本。 這爲零售商提供了超越電子商務巨頭所需的競爭優勢,他們的團隊和預算都專門用於搜尋引擎優化。

SSR提供更快的非搜尋流量

Akira使用Layer0內置伺服器端渲染功能爲非搜尋通道提供即時首次載入。 顯示,社交,電子郵件,轉介和其他非搜尋流量的平均值僅在一秒的北部,後續頁面載入時間爲500毫秒。 在平均每頁載入3-5秒的市場中,這是相當具競爭優勢的。

從搜尋中即時載入第一頁,並在Layer0上內置自動AMP轉換

您可以在這裏閱讀完整的 Akira案例研究

摘要

現代消費者是敏捷和挑剔,可能離開你的電子商務網站,如果有經驗中最輕微的小問題. 隨着Google對網站速度的關注日益增加,線上零售商沒有藉口提供低於標準的網站性能。

如果您受到網站速度緩慢的困擾,現在是採取行動的時候了。 隨着頁面體驗更新在2021年初上線,較慢的網站將開始在搜尋排名中下滑。 不管怎樣,你的用戶應該得到更好的體驗,你應該得到更好的SEO . 速度將繼續對用戶和搜尋引擎的重要性,帶來交通和轉換升降機作爲次要勝利.

但是,爲什麼要花巨大的努力來優化您的網站速度,當你只是跳過競爭和立即去? 如果您在Magento 2上有PWA或SPA,我們保證Layer0 (Edgio)上的中間頁面速度低於500毫秒。 如果您在Magento (或任何其他電子商務平臺)上有一個傳統網站,我們仍將保證這種速度的提高。

這是可能的,因爲Layer0 (現在是Edgio)恢復了速度優化的概念,在購物者點擊之前執行所有重拾(通過預測預取和邊緣暫存),而不是在點擊後匆忙優化頁面渲染。 這樣,我們會讓您的網站比購物者提前5秒。

Tags

Just For You