超越優化—速度最快的Magento 2商店背後的祕訣

資料來源：nngroup.com

速度更快，無摩擦的電子商務商店可以在一個會話中向用戶展示更多產品。 這反過來又增加了轉換率。 在理想的情況下，商店及其界面應該遠離喧囂，只是為您提供絕佳購物體驗的背景。

此外，與大多數電子商務商店一樣，您很可能在人們對價格非常敏感的市場中提供產品。 更糟的是，您的競爭對手可能會以相似的價格提供相同的產品。 在這種情況下，您的SEO排名和網站體驗可能是少數幾種讓您與眾不同的方法之一。 這兩種方式的聯繫比許多賣家所認識到的要緊密。

Google喜歡快速網站

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

Google搜尋結果的第一頁幾乎占Web流量的95％，剩下的SERP頁只剩下5％。 儘管Google一直非常模糊他們的RankBrain算法以及其不同組件的加權方式，但我們確信開始的2021速度將在搜尋排名中起關鍵作用。 這很有可能是有史以來第一次Google針對影響搜尋結果的特定信號打開和服。

如果沒有優化Magento 2商店的速度，您將面臨失去有機流量和潛在客戶的風險。 許多在2020年沒有采取行動的商店，甚至是大品牌，他們的搜尋流量可能會減少，並蒙受巨大的收入損失。 提供更流暢，更好和更快體驗的網站將開始主導最受歡迎的有機關鍵詞。

提供出色的體驗，而不僅僅是產品

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

無論您的商店是在Magento 2還是任何其他流行的電子商務平臺或後端系統上運行，如果您想要提供最快的體驗，您需要實施以速度爲中心的高級Web技術，爲此，您必須首先採用無頭技術並構建可移植的前端。

要全面了解什麼是無外設電子商務以及為什麼它是即時頁面廣告的基礎，請觀看此網路研討會。

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

Speedy Magento 2商店背後的技術

網站速度對於電子商務尤其重要，因為線上購物本質上是一種視覺體驗。 商店通常都是圖片繁多的網站，購物者最不想看到的是緩慢載入產品頁面，顆粒狀圖片和廣告。

在優化Magento 2存儲以提高速度時，您可以實施一系列策略來提高速度—使用輕量主題，優化圖像，刪除渲染阻止javascript代碼等 你可以讓整個團隊優化你的網站，但問題是所有這些標準速度優化技術都涉及微調通常發生在tap後. 要使您的網站真正快速，就需要在客戶點擊任何內容之前，先將各種技術結合在一起。 您需要從反應轉變為輕觸來預測(稍後會有更多關於這一點的資訊)。

許多面向速度的Web技術都要求將後端與前端分開，即使前端可移植，或訂閱無外設商業體系結構。 無外設使您可以更輕鬆地為您的前端和後端分別使用同類最佳解決方案，以便您可以在您選擇的後端提供最快的網站。

當您使用Magento 2電子商務網站時，您可以使用專為速度而構建的便攜式前端，如Progressive Web App (PWA)。 使用PWA前端執行無外設Magento 2商店需要可靠的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相對容易，而GraphQL是用於前端開發的REST和SOAP Web API的替代方案。

2為Magento 2建造PWA前端

現代PWA便攜式前端在許多方面與本機應用程式相似，其速度優勢明顯體現在瀏攬網站的速度更快—人們在線上購物時會做很多事情。

Magento 2上的PWA讓您感覺更快。 但是，當PWA上下文中提到速度時，更多的是布局穩定性而不是速度。 當您在頁面之間移動時，這些頁面不會像在傳統網站上那樣“跳動”。 而且用戶通常認為這種“反彈”是頁面載入緩慢的。

您可能已經看到這種情況多次發生—您進入網站後，幾秒鐘後便會載入廣告或橫幅廣告，然後一切都會發生變化，將整個主題向上或向下移動。 這會導致意外點擊，分散注意力，並使購物者感到沮喪。

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

總結一下，以下是在Magento 2門店頂部構建PWA前端的優缺點。

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

• Magento提供一些PWA支援。 Magento 2隨附Base和Luma Responsive主題，開箱即用。 對於PWA，Magento 2.3提供了一個名為PWA Studio的工具包，其基本主題名為“Venia”。
• 更好的布局穩定性。 使用PWA前端Magento 2頁面更平滑，即圖像在載入時不會“反射”，即使在圖像較重的頁面上也是如此。
• 速度。 如果PWA構建正確，它會使網站速度更快。

請注意，最後兩個優點依賴於伺服器端渲染，這是可能的，但並非始終可用於PWA Studio前端。 稍後將詳細介紹。

在Magento 2前端交付PWA的挑戰：

• Magento原生提供的PWA速度並不快。 您需要適當的基礎架構才能快速實現。 有時PWA甚至可能會在沒有適當技術支援的情況下減慢您的網站速度(例如伺服器端渲染和採用邊緣計算的CDN)。 很多大型商店都犯了這個錯誤。 聽起來有點不直覺，但事實確實如此—您進入PWA以提高速度，但最終可能會降低網站速度。 我們的分析顯示，提供PWA的前500大美國電子商務網站的載入速度比非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更好。

Magento 2的第三方前端框架

開放原始碼和供應商提供的前端選項是免費的，但供應商生產的前端不可移植。 當然，您可能需要付出一些努力就可以將它帶到另一個平臺上，但它的設計當然不允許這樣做。 供應商提供的前端，就像使用PWA Studio構建的前端，是由電子商務平臺構建的，旨在提供PWA答案，而不是因為它們打算讓您在重新平臺時隨身攜帶。

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

您可以在Magento 2商店中使用幾種異型無頭框架，一旦您進入無頭狀態：

• next.js–Vercel為PWA創建的一個很好的反應框架，
• Nuxt.js–與Next.js相同，但基於Vue，
• React Storefront–基於Next.js，但提供了更多店面功能，小部件和連接器，可連接到Magento，Shopify和SAP (Hybris)等特定平臺。 Layer0是開放原始碼PWA框架React Storefront的主要貢獻者。
• 角度–支援創建具有伺服器端渲染的便攜式PWA前端。

這四個框架同時提供客戶端和伺服器端渲染。 這意味著第一次裝載時不會有速度權衡，直營店中的第一次裝載和所有後續裝載都會很快完成。 此外，我們也知道Google喜歡渲染時間短的頁面，這使得存儲等繁重應用程式在沒有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)，或者開發人員必須將代碼復制到客戶端React代碼和伺服器端Moustache模板中，以用於每個需要支援SSR的頁面或區域。

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集成的挑戰

• Magento的內部部署版本不提供開箱即用的CDN集成，儘管您仍然可以使用自己選擇的CDN。
• Magento Commerce (雲)具有內置暫存模塊，但它不是真正的CDN。 它缺少真正CDN所能具備的分布式存在點(POP)。

Layer0 CDN-AS-JavaScript可以取代您的CDN或與其配合使用。 我們有將近100個POP。 Layer0網站的邊緣動態內容平均快取命中率超過95 %。

安排咨詢談話，了解Layer0如何幫助您在Magento 2上實現次秒頁面載入。

我們隨時為您提供幫助

Layer0使快速，無頭的Magento存儲從開發和部署到輕鬆的回滾都變得非常簡單。 您可以為任何現代無頭前端執行此操作：Next，Nuxt，React，SAP/Spartacus，React Storefront，Vue Storefront，我們為所有這些產品提供支援。

速度和轉換提昇。 如果結合使用，轉換率的增加和有機流量的提高會為您的電子商務網站帶來協同效應，這將直接轉化為收入。 通過更快地執行商店，您不僅可以在SERP中獲得更高的性能。 在競爭更激烈的市場中，這意味著您的競爭對手正在失去您網站的流量。 Layer0網站的轉換率和搜尋流量平均提高了15至30％。

簡單。 在Layer0，我們的目標是使Web即時而簡單——即使我們支持“無頭”趨勢，這不是一項簡單的任務。 Layer0網站的開發人員速度和企業敏捷性提高了20％，只需使用我們的無伺服器JavaScript平臺將代碼置於工作流程的中心即可。

協作。 每次編寫新代碼時，都會自動生成預生產環境。 您的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在Layer0上的即時Magento 2商店

即時電子商務網站可以對您的盈利產生巨大影響。 我們已經與客戶一起看到了這種情況。 舉例來說，禮品與花卉巨頭50，800花的轉化率比亞秒網站提高了25%。 Venus Fashion是另一個例子，這家時尚零售商在Layer0上的網站載入量從15.25％下降到72.75％，結果轉換率提高了24％。

時裝零售商Akira在Layer0網站上提高了37.25％的轉換率。 Akira立即體驗了各種先進技術的組合：

• 使用React Storefront構建的超快電子商務PWA
• 伺服器端渲染和AMP支援
• 預測性預取
• CDN-AS-JavaScript，具有邊緣計算功能

前兩種方式確保從登陸到結帳的頁面速度快如閃電。 最後兩個選項通過預測購物者的下一次移動，從暫存的邊緣預取JSON數據，並將其流化到瀏攬器，確保網站保持領先於購物者5秒。 這樣，用戶就感覺整個站點已經在他們的手機上，不再有“頁面載入”的概念。

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

在關鍵詞句中，Akira優於亞馬遜，Nordstrom，Zappos和其他數十億美元的競爭對手。 怎樣做？ 時裝零售商利用React Storefront的AMP轉換技術，從搜尋開始立即提供第一次載入。

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

SSR可加快非搜尋流量

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