21個有效的Magento 2網站速度優化方法

當流量下降、跳出率上升並且轉化率沒有增加時,Magento載入速度優化是每個網站管理員應該要採取的必要步驟之一。所有這一切都是因為網站效能是一個重要因素,它不僅會影響Magento網站的SEO排名和流量,還會影響購買決策。

Magento是最好的電子商務系統之一,人們因其更廣泛的靈活性和可擴展性而選擇它。Magento與其他系統之間的無縫整合使其更簡便,獨特的互連性功能能輕鬆打造卓越的客戶體驗。如果只是一個簡單的Magento Demo,那它的載入速度確實很快。但是一旦你開始添加額外的功能(例如定制的功能或第三方模組),那它的載入速度就會開始下降。

借助一些網站速度測試工具,你就能知道是什麼導致了Magento網站效能的下降。以下是我們整理的Magento網站速度優化的21個方法和技巧:

  1. 更新至最新版本的Magento (Update to the latest version of Magento)
  2. 選擇可靠的伺服器 (Choose Reliable Hosting)
  3. 檢查第三方模組 (Inspect Third-Party Modules)
  4. 使用輕量級的Magento主題 (Use Lightweight Magento Themes)
  5. 刪除不需要的字體 (Delete Unnecessary Fonts)
  6. 優化圖片 (Optimize Images)
  7. 使用Next-Gen文件格式 (Use Next-Gen File Format)
  8. 禁用平面目錄 (Disable Flat Catalogs)
  9. 禁用JS Bundling (Disable JS Bundling)
  10. 使用進階JS Bundling (Use Advanced JS Bundling)
  11. 啟用延遲JS加載 (Enable Deferred JS Loading)
  12. 合併和壓縮 JS/CSS 文件 (Merge and Minify JS/CSS Files)
  13. 使用Critical CSS (Use Critical CSS)
  14. 開啟Production模式 (Turn On Production Mode)
  15. 使用CDN (Use CDN / Content Delivery Network)
  16. 轉用HTTP/2 (Move to HTTP/2)
  17. 啟用緩存 (Enable Caching)
  18. 使用Varnish Cache (Implement Varnish Cache)
  19. 設置Redis (Configure Redis)
  20. 更新Indexers (Update Indexers)
  21. 清理數據庫日誌 (Clean Database Logs)

1.更新至最新的Magento版本 (Update to the latest version of Magento)

提高網站速度時,你可以採取的首要步驟之一是定期更新你的 Magento系統版本。Magento的新版本大概每三個月發布一次,新版本可以帶來許多新功能、錯誤修復,安全升級,當然還有速度改進。你不應該忽視它並繼續使用過時的版本,因為它遲早會導致重大問題。因此,請經常更新 Magento版本以確保你的網站能快速、流暢地工作。

2.選擇可靠的伺服器 (Choose Reliable Hosting)

Magento 是一個複雜的電子商務系統,具有特定的系統要求才能正常運行,因此必須要選擇一個快速、安全、可靠的伺服器服。最基本的配置要求是要有 SSL 和 2GB RAM,選擇最適合初學者的共享伺服器是很棒。但是,你不能指望通過共享伺服器和資源有限的最便宜的伺服器計劃能獲得快速的網站加載速度。

通常低價的共享伺服器計劃吸引了我們,但它日後會帶來巨大的時間和精力成本,因為我們最終都還是需要解決伺服器資源不足的問題。 我們強烈建議你條件允許的話直接選擇獨立伺服器服務,這樣你就可以無需擔心此二難題,而更專注於發展業務。

此外,你必須與伺服器服務供應商確保 Magento 系統要求,並查看你的伺服器是否滿足這些要求。 例如 PHP 8.x、MariaDB 10.x、MySQL 8.x、Elasticsearch 7.x、Composer 2.x 等。

3.檢查第三方模組 (Inspect Third-Party Modules)

使用Magento系統預設的功能基本已能滿足普通用戶的要求,但是若要跟上市場銷售的最新趨勢,就會需要整合一些新穎的功能,以讓自己能在市場競爭中脫穎而出。Magento的靈活性和可擴展性就能滿足用戶的個性化功能定制。Magento 模組的增加會令你的網站增加更多代碼並使其更加複雜,進而可能會導致你的網站加載速度變慢。

這時最好的解決方案是尋找專業技術人員對第三方模組進行檢查,找出可以優化或完全刪除的“濫用者”。以下是一些有用的命令,可用於禁用、啟用和管理 Magento 擴展的第三方模組:

bin/Magento module:status
bin/Magento module:enable
bin/Magento module:disable

4.使用輕量級的Magento模板 (Use Lightweight Magento Themes)

你可能會對Magento模板也會顯著降低你的網站速度感到驚訝,尤其是當它有很多widgets, sliders和custom blocks時,可以想像一下加載所有這些會花費多少時間。

對於網速度較慢的用戶來說,這是一場噩夢。它不僅會導致糟糕的客戶體驗,還會影響其他 Magento 功能並影響客戶的購買決策。所以在購買Magento模板前,你可以使用Google Page Speed對其進行速度測試和更詳細的分析,盡量確保它的運行速度要夠快。

5.刪除不需要的字體 (Delete Unnecessary Fonts)

當你嘗試為客戶提供更好的用戶體驗時,網頁設計方面會採用許多流行的設計、功能和字體。特別是最後一個字體,即使不被使用也會降低頁面加載速度。因為有時模板會在HTML代碼的 <head> 部分添加一些自定義字體。無論字體是否被使用,它仍然會被加載。

因此,要加快 Magento 載入速度,你還可以嘗試刪除不需要的字體。Google Page Speed也建議這樣做。透過以下Adobe Commerce(Magento)提供的操作指引,你可以輕鬆刪除不被使用的字體:

https://developer.adobe.com/commerce/frontend-core/guide/layouts/xml-manage/#remove-static-resources-javascript-css-fonts

6.優化圖片 (Optimize Images)

客戶訪問你的網站時,所有頁面的內容都會立即加載。網站上有很多不同大小的圖片,加載時間或多或少,通常也會導致頁面和網站加載延遲。

要優化Magento網站的載入速度,你需要優化圖片。最好的方法之一是通過延遲加載(lazy loading)。這是一種在客戶向下滾動頁面時逐漸加載圖片的方法,延遲加載消除了一次加載所有圖片並確定它們優先級的需要,它可以達到更快的頁面加載速度和獲得更好的用戶體驗。

7.使用Next-Gen文件格式 (Use Next-Gen File Format)

由於圖片通常在你的伺服器上佔據很多位置,因此延遲加載並不是通過圖片優化提高 Magento 網站速度的唯一選擇。要在不損失太多質量的情況下減小圖片的大小,你需要在 Magento 中使用 WebP 圖片。

它是由Google開發並被大多數瀏覽器支援的Next-Gen文件格式。它可以將文件大小減少 25-35%,在盡量保持圖片質量的同時也提升了 Magento 網站的載入速度。

由於 WebP 是一項相對較新的技術,Magento 不允許你將已經採用 WebP 格式的圖片添加到 Magento。相反,你可以使用像Magento WebP Images這樣的擴展來自動或手動轉換圖片。

8.禁用平面目錄 (Disable Flat Catalogs)

禁用Magento 平面目錄(Flat Catalogs)後會讓SQL查詢和數據整合變得更少,所以它可以被用來提高Magento的網站速度,但它通常只適用於Magento 1.xx和2.xx。實際上使用Magento 平面目錄會導致出現嚴重的依賴關係,並導致效能下降和其他索引問題,這就是為什麼由Magento.1開始使用平面目錄不是一個好的做法。

因此,優化Magento網站速度的方法之一是禁用平面目錄。以下為禁用平面目錄的操作步驟:

1) Stores > Configuration > Catalog > Catalog > Storefront。

2) 禁用Use Flat Catalog Category和Use Flat Catalog Product選項。

3) 點擊Save Config保存設置。

9.禁用JS Bundling (Disable JS Bundling)

JS Bundling可以將 JS 文件組合打包一起,進而減少加載頁面所需的對伺服器的 HTTP 請求數量。然而,它不能提高 Magento 網站的載入速度,反而恰恰相反。在瀏覽器下載所有JS bundles之前,網站頁面不會加載,即使該頁面使用來自一個或兩個bundles。此外,每次瀏覽器請求新頁面時,Magento都會加載JS bundles。

考慮到JS bundles平均大小約為5-10Mb,這不是提高Magento效能的最佳方法。因此,另一種優化Magento網站速度的方法是禁用JS Bundling,操作方法如下:

1) Stores > Configuration > Advanced > Developer > JS Settings。

2) 禁用JS Bundling

10.使用進階JS Bundling (Use Advanced JS Bundling)

由於效率低下,不推薦使用常規的Magento JS Bundling,因此有另一個替代方案 — Advanced JS Bundling。與常規JS Bundling相同,它允許你減少對伺服器的 HTTP 請求數量並減小JS文件的大小。但是,Advanced JS Bundling消除了為瀏覽器請求的所有頁面加載所有bundles的需要。

每個頁面都有一組特定的必需JS依賴項。為了滿足每個頁面的需要,你不需要所有的bundles,只需要其中的幾個。因此,要啟用Advanced JS Bundling,你需要按頁面類型(CMS 頁面、產品、類別、結帳)或目的(運輸功能、結帳功能、產品相關功能)定義bundles。

由於一頁只會加載一些特定的bundles,因此Magento的速度會顯著提高。但是,對於具有複雜模組結構和許多自定義的網站,可能需要更專業的設置。

11.啟用延遲JS加載 (Enable Deferred JS Loading)

除了CSS和HTML,在頁面加載過程中還會加載大量的JS文件。所有這些都會導致網站加載速度變慢,這是客戶和商家都不喜歡的。

要優化JS文件加載,可以使用延遲JS加載。它允許你在頁面解析後執行JS腳本,並相應地提高Magento網站的速度。這意味著所有腳本都將移至頁面底部,除了你不想移至底部的腳本。

12.合併和壓縮 JS/CSS 文件 (Merge and Minify JS/CSS Files)

還有一些其他方法可以通過JS和CSS優化Magento網站載入速度。Magento有一些用於合併和壓縮JS和CSS文件的內置工具。壓縮允許你通過刪除不必要的數據(如註釋、空行等)來保持你的JS和CSS文件“乾淨”。這使瀏覽器能夠更快地讀取它們並相應地更快地將頁面請求返回給客戶。另一方面,JS和CSS合併允許你通過將JS和CSS文件組合在一起來減少對伺服器的HTTP請求數量。眾所周知,這兩個選項可以提高 Magento 網站的載入速度。因此,建議將它們預設開啟使用。

以下是它們在管理界面中的設置方法:

1) Stores > Setting > Configuration > Advanced > Developer。

2) JavaScript Settings > 啟用Merge JavaScript Files和Minify JavaScript Files。

3) CSS > Settings > 啟用Merge CSS Files和Minify CSS Files。

13.使用Critical CSS (Use Critical CSS)

CSS樣式除了定義店鋪頁面的設計外觀,它們還決定頁面加載的速度。除了CSS文件的大小及其位置外,Magento網站載入速度還受其加載順序的影響。來自外部文件的CSS樣式會阻止頁面的呈現,因此在加載這些文件之前不會顯示頁面。這會導致頁面加載速度明顯延遲,更不用說用戶體驗了。

通過使用關鍵CSS,你可以定義應優先加載的CSS文件和可以延遲加載的CSS文件。通過這種方式,你可以消除render-blocking資源,並在非同步時重新加載非關鍵樣式的同時,大幅改進第一個meaningful paint。

設置Critical CSS的方法:

1) Stores > Settings > Configuration > ADVANCED > Developer。

2) 啟用Use CSS critical path。

Developer選項僅在開發模式下可見。若要在Production狀態下啟用Critical CSS,你可以運行以下命令:

bin/Magento config:set dev/css/use_css_critical_path 1

14.開啟Production模式 (Turn On Production Mode)

如果你是開發人員,那麼你一定知道有三種不同的Magento模式。其中Production模式的反應是最快的,它在網站上是實時啟用的。有時,由於啟用了Developer模式,網站無法按預期運行,因為它僅用於調試目的的,啟用Production模式可以提高Magento網站速度。

運行以下命令可以做到:

檢查你網站上已啟用的Magento模式的方法

php bin/magento deploy:mode:show

如果已被禁用,在Production狀態下啟用的方法

php bin/magento deploy:mode:set production

15.使用CDN (Use CDN / Content Delivery Network)

對於以銷售全球各地的客戶為目標的Magento網上商店,使用CDN((Use Content Delivery Network)後可以顯著提高Magento的網站速度。

CDN即是內容分發網路(Content Delivery Network),是一個由分佈在全球各地的伺服器組成的系統。它是由CDN架構在遠程伺服器上緩存圖片、媒體、JS和CSS文件而實現的。然後,CDN從離用戶位置最近的伺服器向用戶提供這些文件。簡單來說,CDN的主要作用都是希望令你的網站用户,不論身處何地都能夠以正常流暢的速度瀏覽到你的網站。

使用CDN的好處自不僅與速度有關,可令你的網站用户以更流暢的速度瀏覽到你的網站、應對突如其來的大流量、應對惡意流量攻擊、減少佔用頻寬、為你的應用提供防禦、提升SEO分數、最佳化用戶使用體驗、增加重覆訪問次數等等。

Magento 預設有CDN功能,但你需要手動配置它。如今,大多數Web內容都是通過CDN交付的。所以,你應該考慮使用CDN來提高Magento的網站速度。

16.轉用HTTP/2 (Move to HTTP/2)

HTTP/2是HTTP/1的升級版本,可提供更快的網站加載速度。如果HTTP/1為每個要處理的靜態文件創建新的伺服器連接,那麼HTTP/2可以同時執行此操作。HTTP/2能在一個連接中處理多個靜態文件,這樣網站加載和呈現速度就會更快,因為不需要浪費時間建立多個連接。

雖然大多數Web伺服器默認支持它,但你需要通過CDN或Web伺服器設置HTTP/2。

17.啟用緩存 (Enable Caching)

當你第一次進入一個頁面時,伺服器會加載它的內容並顯示給你,與此同時Magento也會自動複製頁面並緩存頁面內容。然後當你再次訪問該頁面時,伺服器必須重新生成頁面內容。緩存促進了這個過程,因為它預加載了頁面內容,這樣伺服器就不必再次生成頁面並想知道它應該是什麼樣子。

有時,當開發人員或設計人員在網站上編輯修改時,他們會禁用 Magento 緩存以方便實時工作。但是,如果他們在完成工作後忘記啟用緩存,則可能會導致網站加載緩慢,給你的客戶帶來糟糕的體驗。

要優化 Magento 網站速度,請確保已啟用所有緩存功能,方法可參考以下:

System > Cache Management > All Caches > Enable All of them and Submit.。

注意:要監控緩存,你可以啟用disabled cache notifications。

18.使用Varnish Cache (Implement Varnish Cache)

當你決定更進一步地使用Magento Caching時,你可以選擇使用Varnish,它是 Magento團隊推薦的開源解決方案。儘管Magento已經內置了full-page cache,但Varnish更先進。

Varnish充當Web應用程序的加速器,可“提升”HTTP流量、節省帶寬並顯著縮短伺服器響應時間。此外,它用於緩存動態和靜態內容。如果某些文件被頻繁請求,Varnish會將它們緩存到RAM中並優先於其他文件。因此,下次請求這些文件時,它們將以極快的速度加載。

Varnish是一個強大的Magento Caching解決方案,可以提高Magento網站的速度。但是Varnish的設置會有比較複雜,因此,請務必正確設置或諮詢專業人士。

19.設置Redis (Configure Redis)

另一個在使用頻率上與Varnish Cache並駕齊驅的Magento Caching解決方案是Redis,它是用於後端的緩存工具,允許你存儲會話和會話數據。它使你能夠快速訪問用戶狀態、設置和憑據。

Redis具有分佈式數據存儲結構,允許伺服器將頻繁使用的頁面內容移動到RAM中。由於內存數據存儲,Redis不需要持續的磁盤訪問。因此,許多執行的操作會增加和減少搜索數據庫或API 請求中的延遲。

此外,Redis不僅緩存會話,還緩存網頁、查詢結果和多個常用對象,以獲得更好的Magento效能和響應時間。

20.更新Indexers (Update Indexers)

Magento的體系結構允許它使用Indexers將大量商家數據(價格、目錄、商店、用戶)排列到表中。因此Indexers是一種在店面上轉換和顯示產品和類別數據的方法。

因此,不需要在Magento中不斷地計算一些具體的數據和進行複雜的MySQL查詢。由核心系統重新索引Indexers,你需要確保它們的設置正確。如果你發現某些產品沒有出現或網站速度突然下降,你可以通過CLI reindex或從管理面板reindex Magento。

21.清理數據庫日誌 (Clean Database Logs)

Magento 將數千MB的數據保存在具有不同數據條目的日誌中。如果你不清理日誌,數據庫可能會因不必要的數據而變得沉重,並導致響應和處理請求的延遲。因此,建議清理數據庫日誌以提高 Magento 網站速度並減少加載延遲。但是,不要忘記在清理日誌之前要創建備份。

尋求專業技術人員的Magento網站速度優化服務

Magento網站速度優化不是小菜一碟,它需要時間、技術、決心,最重要的是需要堅持不懈。 從上面的列表中可以看出工作量是巨大的,然而這可能還不夠。 有時禁用JS Bundling、使用最新的Magento版本和優化圖片不會為你帶來預期的理想結果。不是因為你做得不夠,而是可能有些問題隱藏得太深,你看不到。這就是為什麼有時候最好能將你的網站交給專業人士,讓他們幫忙優化你的 Magento網站速度。

馬上與我們聯絡,我們一起討論遇到的問題和需要處理的工作,協助你的網站能快速載入。