Magento 2 速度優化：簡單 + 高級方法

要知道，頁面速度會極大地影響商店的成功，因為性能緩慢的商店必然會降低轉化率並因此輸給競爭對手。 而且由於我們定期為客戶進行速度優化，我們認為我們有能力為您提供最新的 Magento 2 速度優化技術。

速度優化以及為什麼很難做到正確

顯然，如果 Magento 2 網站中的速度優化只是簡單地安裝和啟用擴展，您就不會發現自己在性能優化上苦苦掙扎。 它比這複雜得多。

很多變數

您需要考慮頁面速度測量中涉及的各種變量。 可能是您的頁面速度在理想條件下實際上非常出色——也就是說，如果用戶的設備能夠呈現您向其發送的所有內容。 或者可能是您的頁面速度並沒有那麼糟糕，但是由於糟糕的累積佈局偏移，用戶感知到的性能很糟糕。

在優化商店績效時需要考慮很多變量，這就是為什麼您應該始終首先確定具體問題的原因。

優先

即使您做了功課並確定了您的商店當前存在的所有運行問題，嘗試修復所有這些問題仍然不是一個好主意。 根據我們的經驗，微優化對提高實際性能幾乎沒有任何作用，您應該只優化您認為是阻礙您的商店提供您想要的購物體驗的主要障礙的問題。

權衡

當你真正投入其中時，速度優化是功能和性能之間的不斷權衡——你總是需要犧牲一些東西來獲得更好的性能。 有時它是一個誘人的 Magento 主題，有時它是一個有用的擴展，對您的商店的性能不利。

一般優化技術

這些通用的優化技術是無痛的，並且不需要太多的技術知識來實現。

1. 檢查您當前的主機和 Magento 版本

託管在網站速度中起著至關重要的作用，因為託管計劃越好，您的商店就越能保持快速，儘管流量增加或目錄很大。

對於 Magento 網站來說，擁有體面的託管以促進其強大而復雜的結構更為重要。 雖然 Magento 託管至少需要 2GB RAM 才能運行，但合適的託管計劃取決於網站規模。

因此，如果您當前的 Magento 網站速度很慢，並且您使用的是低端主機，那麼是時候升級以顯著提高速度了。

>> 查看更多：12 家最佳 Magento 託管服務提供商

2.使用CDN服務

（照片/WPbeginner.com）

在物流供應鏈中，如果在買方位置附近有倉庫，物品的發貨速度會更快。 同樣，CDN（內容交付網絡）通過將內容緩存在用戶地理位置附近的邊緣服務器中來幫助更快地交付內容。

CDN 最適合擁有國際訪客的大型商店，以及在桌面和移動設備上具有大量動態內容的網站。 由於這些原因，它完全適合許多 Magento 站點。

雖然許多託管服務提供商都提供 CDN 服務，但您也可以選擇自己的 CDN 提供商，例如 Fastly 或 Stackpath。 設置服務後，您需要在 Magento 後端配置 CDN，然後才能看到任何更改。

3. 延遲加載圖片

在熱門網站請求的所有類型資源中，圖像是最常被請求的資源類型，其請求數量平均佔頁面請求總數的 35.6%（桌面）。 在頁面權重方面，圖像資源平均佔頁面權重中值的 46.6%，這使其成為速度優化中唾手可得的果實，如果你做得對，就會產生令人印象深刻的結果。

延遲加載是提高商店性能的有效方法，因為它消除了一次加載所有圖像的需要。 通過延遲加載，圖像會在用戶需要時在稍後的時間點加載，從而有效地減少加載頁面所需的時間，而不會影響用戶體驗。

在 Magento 2 中，您可以使用諸如用於 Magento 2 的延遲加載之類的擴展來實現延遲加載圖像到您的 Magento 網站。在 Magento 市場上可以免費獲得更多類似的擴展。

4. 使用 WebP

WebP 經常被比作圖像格式中的瑞士軍刀，它是一種新的靈活的圖像格式，正在迅速普及，有望取代 PNG、JPEG 和 GIF。 與 PNG 和 JPG 圖像相比，WebP 圖像通常小 25 – 35%，圖像質量損失幾乎為零。

因為這仍然是一種相對較新的圖像格式，所以 Magento 2 默認不支持 WebP，您需要安裝像 Magento 2 WebP Images Extension 這樣的 3rd-party 擴展來啟用自動圖像到 WebP 的轉換。

5.使用輕量級主題

僅從印像中，您就可以判斷出一個沉重的主題何時會顯著減慢您的商店，而互聯網連接速度慢和/或硬件功能過時的用戶只會受到進一步的影響。

為了解決這個問題，您需要有選擇地選擇您的 Magento 主題，並將重點放在性能上。 但是，我們知道很難準確地確定一個主題是否真的是輕量級的，這就是為什麼您通常應該檢查主題的演示版本是否讓您感覺很快，閱讀更多用戶評論，以及您是否想確定它，使用 PageSpeed Insights 徹底測試主題。

6.禁用平面目錄

過去，如果您想減少進行 SQL 查詢所需的時間，那麼啟用平面目錄是一種可行的方法。 但是，從 Magento 2.1 及更高版本開始，這不再是最佳實踐，您應該避免使用任何涉及使用平面目錄的擴展，因為已知此功能會導致性能下降和其他索引問題。

要禁用平面目錄，請確保在商店 > 設置 > 配置 > 目錄中將使用平面目錄類別/使用平面目錄產品設置為否。

7.減少不必要的第三方擴展

與往常一樣，堆疊第三方擴展並不總是一個好主意，如果從不受信任的來源下載/購買第三方擴展，可能會導致更多問題。 為了消除任何潛在問題，最佳做法是將擴展數量保持在必要數量，定期更新它們，並且只從受信任的來源下載/購買第三方擴展。

8. 關閉 Javascript 捆綁

Javascript 捆綁將您的許多 Javascript 文件組合成一個包。 因此，服務器需要請求更少的 Javascript 文件，從而花費更少的時間。 從理論上講，這應該有助於提高性能。

然而，實際上，Magento 中內置的基本 JS Bundling 工具並不能完全滿足這一期望，而且往往會導致加載速度變慢。 根據 Magento 堆棧交換成員的測試，啟用 JS Bundling 後，他的網頁平均加載時間從 5 秒增加到 15 秒。

默認情況下，JS 捆綁是關閉的。 但是，您可以檢查它之前是否啟用並通過導航到再次禁用它

商店>>配置>>高級>>開發人員>> JavaScript 設置並將啟用 JavaScript 捆綁設置為否。

9.優化 Magento Datalog

Magento 網站的日誌文件列出了數據庫中所做的所有更改。 隨著時間的推移，它們可能會堆積到幾 GB，這會降低您網站的性能。

刪除不再與您網站當前活動相關的舊大日誌是保持良好速度性能的必要步驟。

此外，Magento 會自動且頻繁地生成新的日誌文件，因此刪除舊日誌文件不會給您帶來任何問題。

對於非技術商家，您可以導航到Store >> Configuration >> Advanced >> MySQL Message Queue Cleanup 。

清理將在特定時間後自動刪除舊的日誌文件。

Magento 已經為上面的這些屬性設置了默認值，但是您可以根據需要更改它們。

進階一點

10.使用Varnish整頁緩存

Varnish Cache 是一個開源 Web 應用程序加速器，根據您的架構，它可以將內容交付速度提高 300 – 1000 倍。 這就是 Magento 自己強烈推薦 Varnish 的原因，因為它比內置的整頁緩存更好。 此外，由於 Varnish 旨在加速 HTTP 流量，因此您可以顯著降低重複請求的服務器響應時間和網絡帶寬消耗。

要配置和使用 Varnish，請按照詳細的分步指南讓您的 Magento 2 網站運行起來。

由 Varnish 提供支持，Fastly 可幫助您實現更多成本

特別是對於 Magento Commerce Cloud，在暫存和生產環境中使用需要Fastly。 與單獨使用 Varnish 相比，它是一種功能更豐富的方法，因為除了 Varnish 支持的快速緩存功能之外，它還為您的 Magento 2 網站和雲基礎架構提供了 CDN 和安全增強功能。

歡迎使用 Magento Open Source 的商家使用 Fastly，但您仍應注意，與 Varnish 不同，Fastly 不是免費的解決方案，並且會根據帶寬和請求按地區的使用情況收費。

要快速設置，請參閱 Magento DevDocs 的官方指南。

11. 配置 Memcached/ Redis

眾所周知，緩存是優化速度和大幅減少加載時間的有效解決方案。

Varnish 是一種用於前端的緩存解決方案，而 Memcached 和 Redis 則有助於後端緩存，強烈建議將其用於具有動態數據庫的大型 Web 應用程序。

Redis 比 Memcached 更強大、更靈活，它可以做 Memcached 能做的一切。 因此，它是開發人員中更受歡迎的選擇。 但是，Memcached 設置和使用更簡單，在特定情況下它可能比 Redis 更有優勢。

建議在嘗試配置 Memcached、Redis 或兩者兼有之前，深入挖掘以找出最適合您的網站環境的方法。

12. 遷移到 HTTP/2

HTTP/2 於 2015 年 2 月發布，是對現有 HTTP 協議的新改進。 它現在被 49.9% 的網站使用，並且從現在開始只會看到更多的採用，特別是因為測試表明 HTTP/2 在頁面加載和其他好處方面提供了高達 14% 的改進。

例如，在下面的視頻演示中，您可以看到 HTTP/2 在推到極限時如何實現更高的性能：

在本視頻中，我們將每張圖像拆分為 379 個小圖塊，因此需要與服務器建立 379 個單獨的連接。 這是一個極不可能發生的情況，但它確實讓我們深入了解了 HTTP/2 多路復用的工作原理，以及與 HTTP/1 相比它如何帶來更快的性能。

要為您的 Magento 網站啟用 HTTP/2，您需要通過您的 CDN（例如，Fastly）或通過您的 Web 服務器（Apache）對其進行配置。 例如，這裡是如何在 Apache 和 Nginx 中執行此操作。

13. 縮小

顧名思義，縮小是一種縮小頁面代碼的方法。 在縮小的過程中，您的 HTML、JavaScript 或 CSS 文件中所有不必要的部分都將被刪除，從而確保您的頁面資源盡可能保持精簡。 縮小是當今的一種標準做法，每個網站都應該在其基礎架構中應用它，因為它本質上是一種免費的性能提升。

要為您的 Magento 網站啟用縮小，您可以依賴現成的擴展，例如 Minify HTML CSS JS，或者直接通過 Magento 後端啟用 CSS 和 JavaScript 縮小。 使用後一種方法，您需要：

• 將您的 Magento 2 商店設置為生產模式
• 然後轉到商店 > 配置 > 高級 > 開發人員
• 將縮小 HTML/縮小 CSS 文件/縮小 JavaScript 文件設置為是
• 記得之後通過System > Cache Management刷新緩存

14. 使用 PWA 店面去無頭

由於我們現在擁有的大多數 Magento 網站仍然基於傳統架構，因此您更受使用的基礎架構的限制，因為傳統架構本身是僵化的、保守的，並且隨著時間的推移容易出現減速。 無頭架構或多或少地解決了這個問題，因為它是一種尋求為店面帶來更多靈活性、更多可擴展性和更多性能改進的方法。

這就是為什麼你會看到品牌選擇 PWA 店面（這是一個無頭店面）作為帶來更多性能提升的一種方式，而且它確實是一個沉睡者，只會在不久的將來獲得更多認可。

由於無頭化通常涉及對您的網站進行重大基礎架構更改，因此我們建議您只應依賴可信賴的 Magento PWA 解決方案提供商來為您執行整個過程。

 推薦閱讀：PWA 對您的業務的好處

15.刪除未使用的字體

在決定哪些字體在您的網站上看起來最好之前嘗試不同的字體是很常見的，然後忘記它們。 但是，這些字體仍會添加到您的“default_head_blocks.xml”中，並且仍在下載中。

如果您想優化 Magento 站點的速度，則必須刪除所有未使用的字體。

同樣，如果您使用自定義字體，您應該刪除主題的其他默認字體（例如 Open Sans、Helvetica 等）。

您可以通過覆蓋主題中的 _typography.less 來解決此問題。

只需搬遷

/vendor/magento/theme-frontend-blank/web/css/source/_typography.less

至

/app/design/frontend/Vendor/Theme/web/css/source/_typography.less

然後刪除新的 _typography.less 文件中所有不必要的字體。

此外，您需要刪除 default_head_blocks.xml 文件中的字體，以便不再下載它。

 <頭部>
...
<remove src="fonts/helvetica/regular/helvetica-400.woff2"/> 
<remove src="fonts/helvetica/bold/helvetica-700.woff2"/> 
...

16. 使用高級 Javascript 捆綁

在第 8 步中，我們建議關閉 Magento 的原生 JS 捆綁，因為它缺乏效率。 但是，如果知道如何自定義 JS Bundling，它仍然是實現更好的 Magento 2 速度的有效做法。

但首先，讓我們談談默認的 Magento JS 捆綁與高級捆綁的不同之處：

對於 Magento 的基本 JS 包，您只能將所有 JS 文件捆綁或合併到一個巨型包中。 結果，當需要一個頁面時，瀏覽器需要加載這個又大又重的 JS 包，這不可避免地增加了加載時間。

同時，通過高級 JS 捆綁，您可以自定義自己的捆綁包，這樣瀏覽器只需下載與每個頁面內容相關的捆綁包。 由於這些捆綁包更小更輕，它們不會導致進一步的速度問題。

您可以靈活地為每種頁麵類型或不同目的創建捆綁包。

例如，為類別頁面定制一個捆綁包，為結帳頁面定制另一個捆綁包。

至於詳細說明，您可以依賴 Magento 的官方高級 JS bundle 指南。

17.使用延遲JS加載

當瀏覽器加載頁面時，它會從上到下加載頁面的所有 Javascript、HTML 和 CSS 文件。 通常位於頂部的 Javascript 文件首先被加載。 加載 Javascript 後，瀏覽器會繼續呈現 HTML 和 CSS 文件。

但是，Javascript 是一種更複雜的語言，加載時間通常比 HTML 更長。 因此，為了優化 Magento 2 的速度，建議將 Javascript 移到底部，以便僅在呈現 HTML 和 CSS 文件後加載。

您可以按照 Magento 的官方指南或使用 Magento 2 的 JS defer 擴展來完成。

18.啟用CSS關鍵路徑

編碼人員將 CSS 存儲在外部文件中是一種常見的做法。 但是，根據 Magento 的說法，來自外部源的所有 CSS 樣式都會阻止渲染。 換句話說，如果所有這些文件都沒有加載，您的頁面將不會顯示任何內容。

結果，它增加了 Google 頁面速度洞察中的第一個有意義的繪製指標，並使頁面加載速度變慢。

CSS 關鍵路徑允許選擇關鍵 CSS，同時推遲所有不重要的樣式。 這些關鍵的 CSS 樣式隨後被縮小並組裝在 <head> 中。

因此，它有助於縮短第一次呈現頁面所需的時間。 通過啟用此功能，Magento 的 First Meaningful Paint 從 3.5 秒下降到了 2.3 秒，您可以按照他們的 CSS 關鍵路徑指南了解他們是如何做到的。

19.確保它處於生產模式

Magento 具有三種操作模式：默認、開發人員和生產模式。

生產模式通過啟用整頁緩存、JS 包等來優化性能，最好推薦給所有 Magento 實時站點。 它是更快的 Magento 模式，比開發者模式快 20%-30%。

通過運行以下命令檢查您的當前模式：

 bin/magento 部署：模式：顯示

你會收到這樣的消息：

當前應用模式：{mode}。 （注意：環境變量可能會覆蓋此值。）

如果當前模式不是生產模式，您可以通過運行以下命令更改為生產模式：

 bin/magento deploy:mode:set {mode} [-s|--skip-compilation]

結論

使用所有這些技術，您現在可以努力使您的 Magento 更快，從而獲得比競爭對手更好的競爭優勢。 但是，您應該注意，性能優化並不總是值得一路走下去，因為微優化在大多數情況下都是浪費精力，並且在實際使用中並不明顯。 根據我們的經驗，最好的策略是首先確定有影響力的問題，然後只關注它們，直到你得到你想要的結果。

對於在性能上苦苦掙扎的 Magento 商家，在 SimiCart 我們提供廣泛的服務，包括為您的業務優化速度。 立即開始探索您的選擇，實現行業領先的商店業績。