我如何與WP Rocket上的WooCommerce上的100個Google PagesPeed移動分數

您的目標是通過WooCommerce商店在Google的PagesPeed Insights上獲得完美的100？

在本文中，我將準確地向您展示我們如何使用Femme-fatale.gr（最初在Magento上運行的美容電子購物）實現。當時，移動頁面負載花費了5到15秒，儘管35,000個產品目錄中有500個產品類別和450個產品屬性，但該網站的銷售額仍在出血。

我是牛津元數據的創始人Dimitris Vayenas。在過去的三十年中，我一直沉迷於每毫秒的網絡性能。 2022年初，我的朋友尼科斯·奧爾法諾斯（Nikos Orfanos）要求我為他的在線商店提供幫助，我們開始工作。

在遷移到WooCommerce並完全專注於速度（使用WP Rocket作為我們的秘密武器）之後，我們以99至100/100分的分數粉碎了移動PagesPagesPagesPagesPagesPagesPagesScores。更重要的是，該網站從停滯不前轉變為收入機器。

繼續閱讀，您將了解我們如何設法獲得這樣的結果，以及WP Rocket如何幫助我們達到95+的得分，以及最終的調整，將我們推向了一個完美的100。更重要的是，您會發現一旦網站開始加載僅300毫秒，就會發現隨後的業務影響。

為什麼要專注於性能，尤其是移動

在femme -fatale.gr上，超過90％的購買發生在移動設備上。從第一天開始，這使移動性能成為我們的首要任務。

移動設備是任何網站的最終壓力測試。有限的CPU，內存和不穩定的連接也可以使最瘦的頁面加載速度慢10倍。這就是每個優化重要的原因。

速度意味著效率。清潔代碼，較小的資產和更精簡的DOM轉化為每個訪問者，尤其是在移動設備上的平滑體驗。

正如我想說的那樣： “如果您的移動體驗不是瞬時的，那麼每毫秒就會損失真實的錢”。

轉折點：從Magento遷移到WooCommerce

2021年12月，尼古斯（Nikos）面臨著一個明確的挑戰。 “我的商店在鎖定期間達到頂峰，每次會議0.81歐元。然後銷售額降至每次會議0.15歐元。我們可以回到鎖定高點嗎？”

我們知道第一步是更改平台。

首先，我們選擇了WooCommerce的敏捷現代堆棧。它提供了一個插件和主題創建者的生態系統，這些生態系統涵蓋了可以想像的每個功能，以及最大的具有性能的網絡工程師社區。

我們於2022年3月上線，沒有更改產品數據或增加營銷支出。唯一的區別是速度。我們將頁面負載從5秒鐘降低到僅1到2秒。

這是GTMetrix屏幕截圖，顯示了從Magento遷移到主頁的5.8秒之前的加載時間結果，該類別的7.9秒為7.9秒，在我們仍在開發新網站之前被捕獲。

另一方面，這是當前的表現，所有核心網絡生命都為綠色：

WooCommerce的速度真正價值是什麼？

業務對績效的影響是不可能忽略的，而且數字使它變得清晰。

在遷移之前，femme -fatale.gr被困在表演車轍中。在Magento上，每月營業額從7,000歐元到10,000歐元不等，大約40,000次會議，平均每節僅0.15歐元至0.20歐元。即使在2020年的鎖定峰值期間，交通激增至62,500次會議，最好的表現以每節課0.81歐元。

到2022年2月，就在我們遷移到WooCommerce之前，該網站略有提高到每次會議0.29歐元，但它的潛力仍然很遠。

更快的性能的影響是立即的。 2022年3月，即移民後的第一個整個月，儘管暫時下降了，但機器人加熱了卡希斯，但每次會議的收入翻了一番，達到0.58歐元。

收益並沒有止步於此。到2023年12月，我們匹配了每節課0.81歐元的鎖定峰值。如今，這個數字攀升得更高：該網站現在每次訪問40,000歐元賺取1.11歐元。

nikos是femme -fatale.gr的所有者，最好：

通過匹配並超過了我們的共同峰，我們證明了速度是我們業務中最大的槓桿。

績效基礎每個WooCommerce網站都需要

在WP Rocket能夠發揮其全部性能潛力之前，需要建立堅實的基礎。這些早期的決定對我們的結果產生了重大影響，這也是我強烈建議經營WooCommerce商店的任何人：

1. 選擇一個性能的主題：我們在解決最佳選擇之前測試了數十個主題。 Athemes和Ray主題（基於Elementor）的Botiga （位於Gutenberg）在供應商演示中都獲得了90+的得分。有70歲以下的東西嗎？我們避免了它。

2. 選擇一個真正快速的主機：我們在倫敦，法蘭克福，阿姆斯特丹，米蘭和斯德哥爾摩等主要地區使用Linode，Vultr和Digitalocean支持的Cloudways 。它為我們提供了一鍵式的PHP和數據庫升級，內置的清漆和Redis以及無縫的移動設備檢測。這樣可以確保未經間接的API呼叫總是擊中優化的內容。我們在三年內的停機時間為零，他們的支持團隊出色。
   
   在電子商務中，與您的客戶接近是不可談判的：每個產品查詢，購物車更新和庫存檢查都觸及您的來源。在雅典或希臘群島的購物者，以及沒有本地節點的Cloudways，我們必須部署FastPath 。它直接與所有希臘主要的移動運營商和Cloudflare同行，提供了不足的TTFB和真正的本地體驗。

3. 與支持供應商的合作：我們選擇了提供可靠，快速支持的供應商來回答問題並在您身邊進行故障排除，從Athemes和FiboSearch到Welaunch ， Pixel，您的網站， Gravility Forms ， Aioseo和WP Rocket本身。

4. 優化您的內容：我們將所有圖像轉換為WebP，並將它們組織到基於日期的文件夾中，以確保每個文件夾包含不到10,000個文件。對於字體，我們自託管WOFF2文件並將其子集以僅包括我們需要的字符。這使字體文件大小降低了70％至80％。在本地服務並提前預加載有助於消除外部查找並避免佈局變化。

5. 使用手術插件加載並維護數據庫衛生：我們使用插件組織器和手動過濾器僅加載每個頁面所需的插件。我們還每周清潔瞬態，並為大型WP_Options條目進行自動加載。

WP火箭功能使我們在PagesPeed上達到99/100

基金會成立後，WP Rocket幫助我們提高了速度並迅速取得了出色的性能結果。這些功能在使我們在Mobile上的Google PagesPeed上獲得95+分數發揮了關鍵作用：

• 移動緩存和站點地圖預緊力： WP Rocket自動檢測移動設備並為其構建專用的緩存。這意味著智能手機用戶總是會獲得預加載的HTML快照。基於站點地圖的預加載器還會在任何緩存清除後立即爬行您的頁面，從而消除了第一次訪問時經常發生的延遲。
  
• CSS和JS縮小： WP Rocket剝離空格並評論以縮小文件大小。它還可以將JavaScript文件組合為一個，從而減少HTTP請求的數量。對於較慢的網絡上的移動用戶而言，這尤其重要。  
  
• 刪除未使用的CSS（RUCSS）： 與簡單的縮小不同，RUCSS分析了您的頁面的HTML，並刪除了前端從未使用的每個CSS規則。該拆卸的樣式表通常會切割數十千字節，因此瀏覽器的字節更快。我們親眼目睹了單獨促進RUCSS的主頁有效載荷200 kb，從而產生了更快的裝載頁。
  
• 延遲JavaScript執行：分析，聊天工具或第三方小部件之類的腳本通常不需要立即運行。 WP Rocket延遲它們，直到用戶滾動，輕按或單擊。這使得頁面交互式更快，並改善了下一個油漆的互動，以及Page對用戶交互的總體響應能力。

啟用這些功能後，我們獲得了99個移動頁面性能得分：

獎金：特殊情況下的WP火箭件附加組件

有時，盒子設置需要一點提高。對於像我們這樣的精選設置 - 具有復雜的調度程序，自定義字體規則或不尋常的設備檢測 - 我們在諮詢WP Rocket高級工程師之後安裝了五個免費的WP火箭件：

• 更改RUCSS參數：我們調整了WP Rocket運行的頻率和深度刪除未使用的CSS。這對於與諸如AutomateWoo之類的插件的兼容是必不可少的，該插件可能會超載任務調度程序。
• 停用WooCommerce推車片段：由於我們的數據庫已經進行了優化，因此我們禁用WP Rocket的CART-FRAGMENT CACHE，以進一步加快結帳通話。
• 禁用使用的CSS字體預付：我們使用具有手動預緊規則的自定義自託管WOFF2字體。此附加組件確保了這些規則不會被WP Rocket的自動字體預付。
• 刪除HTML到期規則：我們的CDN和服務器已經處理了緩存標頭，因此我們刪除了WP Rocket的默認HTML HTML到期，以避免衝突。
• 將平板電腦設置為移動設備：我們將平板電腦像移動設備一樣處理，以確保它們從移動緩存和響應式優化中受益。這對於依靠WP_IS_MOBILE（）檢查的自定義功能很重要。

除了平板電腦插件外，這些附加組件中的大多數僅在高複雜商店中需要。對於典型的電子商務設置，WP Rocket開箱即用。

100/100的秘密：完美懶惰和LCP圖像

在Google的PagesPeed Insights上達到99是一個很大的里程碑，但我們不滿意。一點點站在我們和完美之間。

首先，我們解決了元素膨脹，這意味著減少頁面上的HTML元素數量。 Google懲罰了超過810個DOM元素的頁面，我們的菜單，滑塊和頁腳僅將我們推向了1,000次。

這是我們所做的：

• 懶惰的靜態內容：我們推遲了非關鍵元素，例如標頭菜單，產品類別滑塊，品牌旋轉木馬和頁腳，直到最初的油漆後。

• 刪除了不必要的元素：我們修剪了深層菜單級別，並在移動設備上進行了殘疾的小部件區域。這有助於我們在Google的罰款閾值下方獲得總數。

即使有一個更清潔的頁面，我們仍然無法破解100個。最後一個問題是英雄圖像。

最初，它是一個350×622 PX圖像，帶有疊加層，陰影和文本 - 太複雜了，無法快速加載。我們將其簡化為350×350 PX WebP，並使用以下代碼優先考慮它：

 add_action('wp_head','ff_preload_mobile_image',1); function ff_preload_mobile_image(){ if(!is_front_page()||!wp_is_mobile()) return; echo '<link rel="preload" as="image" href="/uploads/lcp-simple.webp" importance="high">'; }

這就是通過簡化和預上英雄圖像的方式，我們從移動設備獲得了完美的100/100 PSI得分。

業務影響：速度作為增長引擎

正如我所解釋的那樣，速度不僅提高了我們的PagesPeed分數。它直接提高了我們的底線。

在優化了性能並利用WP火箭功能之後，我們看到了結果可測量的增長：

• 轉化率躍升了33％。

• 每個會議的收入增長了五倍以上，從0.20歐元增加到1.11歐元。

這些結果在移民後的頭18個月中轉化為額外的384,000歐元的收入。

這些並不是較小的改進。他們匹配並最終超過了我們的峰值鎖定性能，證明了現場速度是增長的關鍵槓桿。

正如我想說的那樣： “每毫秒剃光，都為底線增加了真正的歐元。”

企業主的3個實用技巧

如果您經營一家電子商務商店，我想分享一些其他實用技巧可以幫助您充分利用自己的性能工作 - 無論您是否技術上。

1. 跟踪真實用戶：使用真實的用戶監視（朗姆酒）來關注現場數據。實驗室分數很有用，但真正重要的是您的網站對實際訪問者的表現方式。只需確保在運行PagesPeed Insights測試時將其禁用，以避免偏斜的結果。
2. 地理位置您的來源：託管您的網站靠近客戶。當您的原始服務器靠近受眾群體時，從產品搜索到結帳的所有內容都變得更快，更可靠。
3. 靠在WP Rocket上：從默認設置開始。他們會立即自動處理大多數性能問題。一旦基線固定，您可以通過啟用一些其他功能來微調調整，例如優化CSS和JS文件。而且，如果您不精通技術，請記住： “更快的網站意味著減少挫敗感，更多的銷售和更快樂的客戶。”

總結

我們從Magento轉移到WooCommerce，將我們的移動PagesPeed分數從55提高到了100個，每次會議的收入從0.20歐元提高到1.11歐元。這段旅程清楚地證明了一件事：速度不僅僅是技術里程碑。這是業務增長的真正驅動力。

我們專注於性能，建立了強大的技術基礎，並使用WP火箭快速解鎖結果。如果您的WooCommerce商店感覺緩慢或表現不佳，那麼現在是時候採取行動了。更快的網站意味著您的訪客體驗更平滑，並為您的業務帶來真正的收益。