WooCommerce 性能優化:14 條提示和最佳實踐

創建 WooCommerce 商店非常簡單:安裝 WooCommerce 插件,添加一兩個產品,設置價格,然後就可以了 – WooCommerce 商店。但是經營一家成功的 WooCommerce 商店則大不相同。規劃和優化電子商務網站並非易事,但您可以實施許多 WooCommerce 優化技巧和最佳實踐,以獲得更快的頁面速度、更高的轉化率,並最終從您的商店獲得更多收入。

為什麼 WooCommerce 優化很重要

與如今互聯網上的所有其他內容一樣,優化您的 WooCommerce 商店完全與用戶體驗 (UX) 有關。用戶在網上購物時希望獲得一定程度的潤色、可用性和速度。如果您的商店不提供,他們會去其他地方。他們會很快去別處。當這種情況發生時,潛在收入就會變成收入損失。

2012 年,亞馬遜估計載入時間增加一秒,他們每年可能會損失16 億美元從那以後的幾年裡,這個數字一直在增長。雖然我們都沒有帶來數十億美元的收入(如果你是,讓我們恭喜你!),WooCommerce 優化肯定會影響你的底線。無論是數百、數千還是數十億美元。

1.優化WooCommerce設置

WooCommerce 優化的起點絕對是 WordPress 儀錶板中的 WooCommerce 設置。轉到 WooCommerce – 設置並找到產品選項卡。

woocommerce-performance-optimization-14-tips-best-practices-1-1

檢查您的添加到購物車行為 [原文如此] 並確保選中在檔案上啟用 AJAX 添加到購物車按鈕。這將使您只進行特定的伺服器調用,而不是大塊。

在佔位符圖像下,確保具有文件大小較小的小圖像(可能是 WEBP 或 SVG)圖像的唯一 ID。這樣,您就不會因為沒有太多用途的巨大佔位符而佔用伺服器空間和用戶載入時間。

啟用評論部分是首選項,但如果您正在尋找可能的最快載入時間,請禁用它們。這只是頁面的一部分,其實用性不會超過其性能成本。並非每個網站都需要用戶評論,如果有大量未經評論的產品,較小的網站可能看起來不專業。此外,產品評論是許多 WooCommerce 商店的垃圾郵件來源。

最後,即使您允許評論,也應該禁用產品評級。星級評分很好並且有一定的用途,但它們只有幾千位元組,對於您商店的 UX 的整體效用來說並不是必需的。

2. 使用 WooCommerce 優化託管

您可以控制很多關於您的網站和元素的事情,您可以為您的 WooCommerce 商店優化。然而,有一些完全不在你的掌握之中。這包括伺服器端穩定性、速度和託管優化。如今,許多託管公司確實提供WooCommerce 優化託管,這可能是提高商店績效的最佳(也是最簡單的)方式。

Liquid Web 提供了一個出色的託管選項,專門設計用於充分利用 WooCommerce。您可以閱讀我們的完整概述以了解它提供的具體內容此外,Kinsta 擁有堅如磐石的託管平台,可幫助您充分利用商店。

如果您是 Divi 用戶,那麼我們的Divi 優化託管合作夥伴(如SiteGroundFlywheelPressable )絕對不會出錯

不過,公平地說,如果您使用任何類型的託管 WordPress 主機,它們將針對 WooCommerce 進行一些優化,提供全面的最佳支持和更新。

最重要的是,如果您使用折扣計劃的廉價主機,他們極不可能為您提供 WooCommerce 的最佳性能。如果您對 WooCommerce 優化計划進行了一次更改,則應該使用可靠的託管主機。

優化你自己能做的

雖然您無法採取任何措施來真正提升不良主機的性能,但您可以採取一些措施來確保您的網站在該主機上儘可能高效地運行。

緩存您的網站

首先,您需要確保您的網站被緩存。您會發現許多不同的WordPress 緩存插件,但在我們的測試中,WP Rocket 的性能比我們使用過的其他插件要好。這並不是說別人不好。您將在LiteSpeed CacheW3 Total CacheWP Fastest Cache等方面取得好運WPMU Dev 也有一個很棒的工具,叫做Hummingbird(他們的成員還包括我們在本文下一節中介紹的圖像壓縮工具)。

安裝一個好的主題

所有主題都不是平等的。我們不只是作為一家主題公司這麼說。WordPress.org 主題存儲庫充滿了可供您免費安裝的主題,但並非所有主題都能為您提供最佳性能。

我們顯然認為Divi將為您提供最佳的用戶體驗和性能(WooCommerce 或其他)。特別是當您考慮到我們的構建器中包含的 WooCommerce 模塊時。

但是,如果您需要免費主題,Storefront由 Automattic 設計為WooCommerce 特定主題如果您是開發人員,您可以做很多事情來擴展店面以進行 WooCommerce 優化。但即使沒有,它也比許多其他免費主題選項要好。

3. 壓縮和優化您的圖像顯示和交付

你已經聽過這首歌一千次了。但是,如果您想降低網站載入速度並獲得最佳性能,則需要確保您的圖像已針對可能的最快載入進行了優化您可以使用Imagify 之類的服務來處理它,或者您可以手動花時間上傳優化的文件格式以開始使用.

在 WordPress 5.8 中,開發人員默認包含WEBP支持,這可以提供很多幫助。因此,確保您已升級到最新版本的 WordPress 始終是重中之重。

選擇合適的尺寸

雖然 WordPress 在幫助您自動縮小網站規模方面取得了長足的進步,但如果您正在尋找頂級性能,請確保您上傳到 WooCommerce 商店的產品圖片是正確的解析度。如果您的產品頁面顯示 800×800 像素的預覽圖片,請上傳 800×800 像素的圖片文件。

這樣做可以減少瀏覽器載入您網站的時間,因為它不會即時調整圖像大小。

選擇正確數量的圖像

WooCommerce 產品沒有正確數量的產品圖片。有些產品需要六張或更多的圖片來展示它的一切。但是,有些人可以通過一張圖片來解決。花時間確保圖像適合容器而無需調整大小,這將始終為您的客戶帶來更好的體驗。

使用 CDN

與許多 Web 技術一樣,多年來,使用內容交付網路 (CDN) 變得更簡單、更容易和更便宜。今天,許多主機提供免費的 CDN 選項(例如SiteGround 將免費版本的 Cloudflare內置到他們的計劃中)。Jetpack 等插件甚至還有用於圖像傳輸的免費 CDN 選項

顯然,除了這些之外還有更多選擇,我們已經分解了與 WordPress 一起使用的最佳 CDN

4. 關注核心 Web Vitals

Core Web Vitals不僅在頁面排名和 Google 的頁面速度指數方面對您的網站很重要,而且還是定量衡量網站用戶體驗的最佳方法之一。簡而言之,Core Web Vitals 是 Google 用來確定您的網站如何適應真實用戶場景的一系列指標。

儘管 Google 確實認為其權重最大的 Core Web Vitals 會隨著時間的推移而發生變化,但我們提供了一系列指南來引導您了解提高分數和降低 UX 摩擦的基礎知識。

Core Web Vitals 通常關注您的網站,但他們測試的每一個指標都直接適用於您的 WooCommerce 商店。您希望您的產品頁面和店面在這些測試中得分特別高。正如我們一開始所說,糟糕的用戶體驗會導致銷售損失。這些指標直接衡量您網站的用戶體驗。

優化您網站的代碼

不必要的臃腫代碼會導致網站載入緩慢。就像上面的 WooCommerce 設置一樣,您可以在不需要評論時刪除評論,確保縮小、推遲和優化您網站的 JavaScript、HTML 和 CSS 代碼對於您的網站在 Core Web Vitals 和將用戶轉化為客戶。

許多緩存插件都可以選擇縮小您的代碼,我們強烈建議您利用這一點。縮小只是刪除任何不必要的字元的過程,這通常意味著使其易於閱讀的間距。Divi 現在會自動執行此操作,因此如果您是Elegant Themes 會員,您甚至不需要選擇加入。

其他一些主題也提供了縮小代碼和延遲渲染阻止腳本的選項,但通常需要啟用它。檢查您的主題選項以查看是否支持該功能。

5. 定期更新 WooCommerce

這是不費吹灰之力的。您需要儘可能頻繁地更新 WooCommerce,這對您的網站來說是安全的。在更新 WooCommerce 文件之前遵循一些最佳實踐,當然,以確保為您和您的客戶提供最流暢的體驗。隨著 WooCommerce 的發展,更新修復了痛點,改進了 UI,並消除了錯誤。更新通常包含與其他主題和插件的兼容性問題,以及利用核心 WordPress 更新。如果您運行舊版本的 WooCommerce,您幾乎肯定會失去銷售額。

6. 監控您的客戶旅程

如果您從未對商店的客戶旅程進行過審核,那麼現在是時候進行審核了準確了解您的用戶如何查看您的網站和瀏覽您的產品,可以讓您深入了解在何處應用優化以獲得最大影響。除了進行全面審核之外,您還可以在用戶的​​帳戶頁面和結帳流程中執行一些操作以增加轉化次數。

簡化您的結賬流程

WooCommerce 優化的最終目標是增加轉化率。也就是把訪客變成顧客。最簡單的方法是消除它們與最終銷售之間的用戶體驗摩擦。他們需要採取的步驟越少,他們需要點擊和載入的屏幕就越少,他們必須做出的選擇越簡單(可能越少),他們轉化的可能性就越大。

一種方法是使用諸如Divi Woo 模塊WooCommerce 塊之類的軟體來設計存在於單個頁面中的結帳流程。通過使用條件邏輯將 [woocommerce_cart] 和 [woocommerce_checkout] 等 WooCommerce 短代碼與產品頁面上的塊和模塊相結合,您可以在單個頁面上完成從發現到發貨的整個過程。

在與移動設備上的用戶打交道時(大多數電子商務銷售來自移動設備),保持簡單意味著更多的轉化。

追加銷售 追加銷售

追加銷售是在一個人接近結帳時提供附加組件和附加產品的做法。在實體店中,這些通常是在收銀台旁邊的衝動購買,例如糖果或玩具或較小的便利物品。在 WooCommerce 商店中,這些可以是任何東西。

您可以在結帳屏幕上添加「您可能也喜歡」塊以提示客戶添加更多項目,這只是一個小的優化調整,但會對轉化率產生巨大影響。例如,Divi 用戶可以通過我們的Woo Upsell 模塊在構建器中使用此功能 通過使用 Divi條件選項可以進一步優化加售模塊,以完美顯示加售出現的方式和時間。

woocommerce-performance-optimization-14-tips-best-practices-2

此外,您可以將特色產品添加到任何默認的 WooCommerce 頁面,包括用戶的我的帳戶頁面通過這樣做,您可以直接使用相關項目定位他們。

結束 WooCommerce 優化

優化 WooCommerce 是一項多方面而複雜的工作。但是,通過將其分解為單獨的任務和實踐,隨著時間的推移,您可以看到您的網站有了很大的改進。從自定義您的產品頁面以僅包含必要的信息,跟上 Core Web Vitals,到為您的客戶創建正確的追加銷售/結帳工作流程,WooCommerce 優化有很多特定的地方,無疑會對您的底部產生影響線。

您為網站做了哪些 WooCommerce 優化?

朱莉婭蒂姆/shutterstock.com 的文章特色圖片

來源

相關文章