DE{CODE}：用於構建快速電子商務網站的 6 個 WooCommerce 開發技巧

除了銷售額，站點速度可能是電子商務網站最重要的指標。為什麼？ 快速電子商務網站獲得更多流量、更高轉化率、更低跳出率並產生更多回訪者。 在本次會議中，WP Engine 高級產品經理 Jeremy Benoit 和工程經理 Catherine Kelly 探討了開發人員技巧、WP Engine 功能和其他工具，以使您的 WooCommerce 商店更快。

會議幻燈片

全文抄本

JEREMY BENOIT ：大家好，歡迎來到DE{CODE} 2022，這裡是電商賽道。 我是 WP Engine 的高級產品經理 Jeremy Benoit，我們在這裡討論提高 WooCommerce 性能的六個技巧。 今天加入我的是我的同事 Catherine Kelly，讓我們開始吧。

因此，我將首先分享我們的一位軟件工程師 Chris Weigman 的引述。 正如他所說，據谷歌稱，如果頁面加載速度超過三秒，53% 的用戶將離開網站。 這意味著您只有三秒鐘的時間讓他們獲得該產品頁面上的所有數據，您發送給他們的所有圖像，所有相關信息，所有小部件和廣告，它會向您展示我們為什麼今天我們談論速度，因為購物者體驗的速度至關重要。

頁面速度是加載單個頁面的時間，可以通過多種方式進行測量。 兩種關鍵方法是第一個字節的時間，Google PageSpeed Insights 使用的，或全頁加載時間或最後一個字節的時間，這通常反映了購物者的體驗。 頁面速度也會影響您購物網站的轉化率，它還會影響您電子商務網站的搜索引擎優化。

速度的一個關鍵部分是卓越的託管服務，以確保您的購物者體驗質量。 在 WP Engine 的計算優化平台上，我們提供增強的電子商務體驗，以提高您所有靜態或動態購物內容的性能。 我們將在一秒鐘內討論這兩種不同的內容類型，因為我們將介紹 6 個提示和技巧。 現在我將把它交給我的同事凱瑟琳。

凱瑟琳·凱利：乾杯。 謝謝你，傑里米。 今天我們將介紹與 WooCommerce、其配置和設置電子商務商店相關的六個技巧。 對於一些經驗豐富的開發人員來說，這些提示和建議對您來說相當熟悉，但對於一些新手開發人員來說，您可能會獲得一些有用的見解。

所以今天我們將介紹 WooCommerce 和緩存、媒體優化、搜索優化、Ajax 購物車片段、自定義訂單表和無頭速度。 因此，對於第一個，我們要介紹的是 WooCommerce 和緩存。 在我們開始之前，我們想了解您有哪些與緩存相關的不同選項，它是什麼，然後我們可以處理我們將如何對其進行改進。

因此，緩存給人的印像是與性能問題相關的聖杯。 事實上，緩存最初的創建與性能無關，而是讓計算機對同一個請求一遍又一遍地自動響應，而不是每次都重新計算。 緩存是一種技術，用於臨時存儲對請求的響應，然後在稍後的時間點將對完全相同的請求的相同響應傳遞到相同的資源。

所以這有點像那些煩人的孩子中的一個——你的煩人孩子會一遍又一遍地問你同樣的問題，每一天，比如為什麼，為什麼，為什麼，你只想給出一個自動的回答。 這可以很好地工作，並且在為靜態站點提供靜態信息時，您總是會給出相同的響應。 然而，這種方法在電子商務方面不太適用，因為它會在工作中造成麻煩，因為每次提交給服務器的請求並不總是相同的，你必須處理和控制與購物車相關的、同時來自不同用戶的不同請求。

您還想記住與客戶相關的先前交易，他們的購物車中有什麼，您還想記住商店中不再提供的東西，以便購物車可以準確地反映正在為該用戶提供的服務。 您還想確保與緩存相關的是您不會將與客戶 A 相關的購物車提供給客戶 B，並且他們實際上可以看到其他人實際訂購的東西，基本上是洩露信息，這是您不希望看到的. 在緩存方面，您可以擁有一個有限的平衡點——當您試圖為客戶提供個性化的服務以便他們繼續訪問您的網站時，要做到這一點非常棘手。 所以我們擁有不同級別和類型的緩存——服務器緩存。

服務器緩存通常與任何其他緩存一樣。 它基本上是在您構建頁面並將其提供給特定請求時服務器上的緩存。 當您站在該服務器旁邊並發出請求時，您的響應可能是即時的。 然而，當您在 1,000 公里之外時，就像您的電子商務個人或用戶一樣，響應可能需要很長時間才能到達他們。

然後你有應用程序緩存。 WordPress 和 WooCommerce 中的應用程序緩存，您可以使用插件來管理它。 W3 Total Cache、WP Rocket 等插件都有管理應用程序內緩存的選項，這些插件基本上存儲請求頁面的臨時版本和服務器上的文件。 這可能是——但是，這可能是一種非常低效的緩存方式，如果您有能力在服務器本身或加速域或 Cloudflare 等服務中緩存，則不應使用這種緩存方式，後者會在全球範圍內分發緩存。

然後你有瀏覽器緩存。 瀏覽器緩存基本上是最終用戶的緩存。 例如，您是否經歷過網站上的某些內容，您已經更新，但當您正在開發和審查您的網站時，您不會自動在前端看到它？ 這是因為它已被緩存到實際的瀏覽器中。 它基本上是該頁面或資產的臨時版本，存儲在您計算機或手機上用戶的瀏覽器中。

它就在那裡，因此您不必多次下載相同的頁面或資產來加速該頁面的顯示，當您​​有一個靜態站點時，它再次工作得很好。 但是，當您擁有電子商務網站等動態網站時，我們總是會嘗試提供產品、描述和信息。 它可以——它沒有你想要的那麼有效。

然後你就有了所謂的代理 CDN 緩存。 代理 CDN 緩存是位於您的原始服務器（即開發和呈現第一個原始頁面的服務器）和實際用戶的瀏覽器本身之間的緩存。 它是加速域，而 Cloudflare 是一種代理 CDN。 在到達原始服務器之前，所有請求和響應都經過它們的域。

它本質上是一組戰略性地分佈在全球各地的服務器，目的是加速為您的用戶交付靜態內容。 因此，當他們在 1,000 英里之外時，就好像他們就站在原始服務服務器旁邊一樣。 所以它加快了該頁面的服務。 一旦您的靜態資產緩存在特定位置的所有邊緣服務器上，所有後續訪問者和對靜態信息的請求都會從所謂的邊緣服務器而不是原始服務器傳遞，從而減少負載並提高性能，並提高了可擴展性。

因此，對於提到的靜態站點，這一切在一般情況下都非常有效。 但是電子商務緩存在工作中投入了扳手。 而電子商務——工作中存在扳手的原因與您的登錄頁面、您的購物車、您的結帳、您的願望清單有關，它們一直在動態更新。 因此，它們不像您在正常網站（例如博客網站）上所要求的那樣是靜態的。

通常，您可以緩存 GET 請求。 使用 GET 請求，或者顧名思義，請求獲取一些資源。 儘管 GET 請求通常可以安全緩存，如前所述，您不希望再次緩存登錄頁面、購物車和結帳。 您希望始終為客戶提供盡可能新鮮的服務，以便它是最新的和準確的。

所以你不想從購物車中交付一些東西而不寫——不要用緩存寫它。 通常，當您的購物車中有東西時，大多數服務器會完全繞過緩存。 因此，您又回到了從原始服務器而不是 CDN 提供服務的問題。 所以你必須做的是你必須聰明地弄清楚，好吧，我怎樣才能從我的 CDN 提供商提供靜態元素，但始終應用我實際原始服務器的動態元素，這樣一切都是最新的和準確的？

所以要注意的事情——對於服務器緩存，由於是服務器生成網頁，服務器緩存可以讓它記住整個頁面上的部分頁面，而不是每次都從頭開始生成。 通過瀏覽器緩存，這有助於瀏覽器記住網頁的外觀，因此它不必花時間與服務器交換數據。 如前所述，這對於訪問多個頁面的訪問者很有用，因為可能存在靜態文件。 例如，styleSheets、JavaScript 文件都可以存儲在瀏覽器中。

因此，對於緩存方面的最佳實踐，始終有選擇地緩存 HTML。 基本上，作為第一級，緩存所有內容以充當靜態匿名內容——用於靜態匿名內容。 然後尋找繞過 cookie 上的緩存並緩存購物車中的所有內容，在您的願望清單中使用 cookie 繞過緩存的特定元素。 然後始終根據您的 Cloudflare 配置設置您的年齡緩存、您的生存時間。 這應該確保您的緩存始終保持最新狀態並與原始來源相匹配。

所以我們從與我們的電子商務客戶交談中了解到的一件事是，這是一個通常開發人員必須自己去解決的問題。 因此，作為我們在 WP Engine 中開發的一部分，我們實際上正在研究一個特定於電子商務的解決方案，該解決方案默認情況下允許提供和安裝 WooCommerce，並默認設置所有這些緩存規則。 所以我們緩存所有靜態的東西，然後不緩存所有動態的東西，所以它總是新鮮的。 它總是為你不斷刷新。 因此，您不會為用戶帶來購物車碎片化等衝突。

媒體優化——關於將內容從您的服務器傳送到您的電子商務網站上的最終用戶的另一件重要事情是媒體優化。 首先要考慮的是，什麼是媒體優化？ 我們對於它可以做些什麼呢？ 我們如何確保客戶在瀏覽和使用他們的網站時擁有快速、有效和動態的體驗？

因此，對於圖像和視頻，它們需要不同類型的優化，再次根據他們實際使用的設備為您的客戶提供最佳體驗。 所以媒體優化是一個使用最好的工具、先進的策略和實驗的過程，因為您總是希望通過實驗來提供電子商務網站的性能。 你想要資產優化。 它力求在效率和可靠性之間找到平衡點。

因此，您希望始終以盡可能最快的方式為您的客戶提供內容，而不會最終損害您網站的性能。 您希望在最短的時間內提供最好看的內容，方法是考慮可能使用媒體的不同平台和資產，例如筆記本電腦、PC 或移動設備，並且，正如我們進入無頭世界，多種不同類型的設備，如電視屏幕、iPad 等，內容也可以從電子商務商店交付和消費。

因此，您要考慮的是改進圖像優化以改善網絡——網站的性能以吸引更多流量、增加這些轉化、為您的店主、您的品牌或您的商家增加收入。 作為網站優化最關鍵的方面之一，它會影響搜索和優化。 因此，如果您的圖像和視頻速度很快，那麼您實際上會在搜索引擎優化方面獲得更好的評價。

優化資產不僅可以使您的產品對潛在客戶更具吸引力和可見度，還可以使它們更頻繁地出現在搜索結果中，再次是搜索引擎優化。 要記住的關鍵是查看圖像和視頻的延遲加載。 延遲加載基本上是一種識別非阻塞或非關鍵資源並僅在需要時加載這些資源的策略。 因此，內容（基本上是首屏）被加載並優先顯示給用戶，然後我們延遲所有剩餘的渲染，以顯示此屏幕下方的所有內容，以便他們向下滾動到任何內容。

這種優化技術允許首先顯示——用戶將首先看到的圖像和內容。 然後我們不會浪費資源下載他們實際上還不會查看和查看的內容。 谷歌本身推薦延遲加載，基本上將其稱為延遲屏幕外圖像。 然後我會說不要費心加載它。

作為開發人員，您可以根據需要手動標記每張圖像或將視頻標記為延遲加載。 但正如您可以想像的那樣，對於一個電子商務網站，這樣做將是一項艱鉅的工作。 而且，如果您不習慣手動標記這些圖像中的每一個，您可以使用插件來完成。 如果您在 Google 中快速搜索 WordPress 的最佳加載插件，那裡有一些推薦使用的最佳插件。

但是對於我們和電子商務，我們建議將它們粘貼到 WP Rocket 中。 它提供了 Adob​​e 延遲加載優化。 您還需要考慮的事情是永遠記住您的移動用戶。 它們的屏幕和性能更小，因此您無需加載大量圖像。 你想縮小規模。

你想對所有圖像使用壓縮，因為這將節省 40% 的帶寬，而且顯然加載特定屏幕和文件格式是圖像的關鍵。 例如，JPEG 中有 600 x 600 的圖像是 100 KB，PNG 是 216，而 WebP 只有 56 KB。 所以你要非常小心地考慮，好的，我要為所有這些將要提供的圖像使用什麼文件格式？ 尤其是在電子商務網站上，我可能擁有數千種產品、數千張圖像和數百個視頻來備份這些圖像和內容。

你總是想調整你的圖像大小。 您可以查看 Imagify、Youoptimizer、TinyJPG 等在線工具，並查看那些用於在 WordPress 中優化圖像的工具。 Imagify 與 WP Rocket 由同一個團隊製作，它是一個非常直觀的插件，可以使用三種不同類型的級別自動壓縮圖像——正常、激進和超級。 它允許您定制適合最終用戶的圖像尺寸。

還要注意縮略圖的大小。 保持它們小，因為它們無論如何都很小。 保持背景簡單。 使用 remove.bg 和 Slazenger 等工具刪除背景並更新背景以簡化它們。 然後使用 CDN 進行更快的全球交付。 同樣，對於您的圖像，請始終為這些圖像附加其他有用的標籤。

這有助於 SEO，搜索引擎優化。 並始終確保您的標籤確實反映了您的圖像或視頻的內容。 作為開發人員，有時我們可以使用 RDHD 之類的縮寫，或者直接使用 Y 波段。 我們知道那是一頂帶黃色帶子的紅色帽子。 但是 SEO 不會知道那是什麼，因此請嘗試在圖像呈現方面更加真實或語言。

所以視頻優化也是如此，使用數據壓縮工具。 同樣，請記住您的移動用戶。 如果可能，將所有內容轉換為 HTML5 格式。 對於任何沒有聲音的視頻，請完全刪除音頻。 沒有意義，因為它只會消耗帶寬。 再次使用，內容分發網絡。 指定您的視頻網站，同樣關於延遲加載，始終推遲加載這些圖像，直到您的頁面完全下載。

搜索引擎優化——正如我們所知，搜索優化基本上是一種方法，我們稱之為將您的搜索卸載到這方面的專家的特定服務提供商，因為他們可以提高您的搜索效率，從而增加您的商家的銷售額和用戶。 正如我們所知，默認情況下，WooCommerce 確實帶有內置搜索功能。 但它在產品屬性、自定義字段和描述的匹配功能方面還有很多不足之處。 它非常慢。 它沒有提供良好的用戶體驗。 歸根結底，這是非常無效的。

如果您搜索有關 WooCommerce 的產品搜索，這是一個常見的功能，因為它要么沒有像您想要的那樣有效。 實際上，您想要做的是擁有一個具有強大容錯性的搜索功能，這樣它就不會中斷客戶的旅程。 您希望他們能夠擁有強大的查詢自動完成功能，並在自然語言處理中獲得更好的結果，而 WooCommerce 搜索中缺少所有這些。

然後，您還希望擁有一個圍繞綜合分析的功能，以便輕鬆改進報告，這樣您就可以實際查看並查看您根據對它的響應、您的客戶在搜索什麼以及效果如何而構建的搜索的有效性這是否與產品相匹配，然後您可以在配置中做哪些更改以真正幫助實現這一點？ 基本上，幫助您的客戶更快地找到他們正在尋找的東西。

那麼我們能做什麼呢？ 正如我提到的，我們所做的是為了減少搜索體驗中的摩擦並幫助客戶找到他們想要的東西，我們使用搜索卸載。 所以這是一個基本上由第三方執行的過程。 它改進了 WooCommerce 的搜索功能，因為它與 Woo 集成在一起。 它基本上具有用於根據需要進行過濾的小部件。 它向用戶提供結果，這有助於提高品牌信任度。

它具有自動建議功能，您可以配置和定制權重。 您可以為客戶提供結果——自定義結果。 正如我提到的，您可以擁有即時自動搜索和搜索分析，這很重要。 如果您不能分析搜索以了解它的有效性，那麼進行搜索就毫無意義。 它還有助於微調您的 SEO 集成，以確保客戶可以找到他們想要的東西。 當他們去搜索谷歌時，他們會根據您正在尋找的內容在這個特定的網站上進行搜索。

它還有助於發現客戶意圖並揭示有關客戶興趣的數據。 他們在找什麼？ 他們想買什麼？ 是什麼吸引他們訪問您的網站？ 他們在尋找什麼？

我們關於搜索的建議是尋找自動完成。 因此，就此提出建議。 並始終啟用糾錯。 因此，如果有人輸入了與產品相關的錯誤內容，請盡量不要記住。 嘗試並始終記住與產品相關的正確拼寫或描述。 永遠不要，當您在您的網站中啟用搜索時，讓用戶進入死胡同。

總是有一個頁面。 即使他們正在搜索您網站上沒有的東西，也可以將他們引導到一個頁面，上面寫著我們目前找不到該特定產品。 請聯繫我們的銷售部門等，我們可以幫助您做到這一點。 這對那個特定用戶來說是更好的體驗，也會產生對那個客戶的信任。

始終優化。 當您根據客戶搜索的內容進行分析研究時，針對這些條款進行優化，這樣當其他客戶回來尋找他們時，他們才能真正發現他們。 在您的所有產品上使用標籤、標題和描述。 它們是您搜索的基礎。

因此，請確保您的所有數據都是準確的，它反映了產品是什麼，並始終盡可能多地描述特定商家網站上的單個產品。 配置您的移動搜索。 容我們說，就網站而言，移動搜索與筆記本電腦搜索略有不同。 只需確保您已在搜索中配置並啟用它。 並始終參考您的分析。

在 WP Engine 方面，我們已經與 ElasticPress 合作，基本上，我們認為這是一個高級搜索插件，它會自動默認並作為我們電子商務產品的一部分安裝。 它提供所有自動建議、權重、客戶結果等等。

現在我已經完成了關於 WooCommerce 的建議和指導的三個技巧，我將把它轉回給 Jeremy。 好了，傑里米。 謝謝。

JEREMY BENOIT：另一個需要關注的領域是 AJAX 購物車片段。 AJAX 購物車片段是一段需要的代碼。 它以產生延遲、導致服務器峰值和不必要地運行而聞名。 但是 AJAX 購物車片段真的那麼糟糕嗎？

嗯，它的目的是用新產品、新產品價格、新產品數量更新購物車，計算價格而不強制重新加載頁面。 不過，購物車片段代理腳本會在每個頁面上運行——主頁、產品頁面，甚至沒有添加到購物車操作的頁面。 這可能是您的關於我們頁面，甚至是您的聯繫我們頁面。

現在，這種運行或這種執行通常是造成服務器峰值或使用不必要的資源的罪魁禍首，這些資源會中斷您網站的性能和購物者的體驗。 現在理想情況下，購物車片段 AJAX 應該只在您有添加到購物車操作的地方運行，或者如果您的網站上有一個動態購物車，其中一個操作可用於打開購物車或與購物車動態交互。 那麼可以對 AJAX 購物車片段做些什麼呢？

好吧，大多數時候，人們像我們一樣建議禁用該購物車片段，有兩種方法可以禁用 AJAX 購物車片段。 A，您想要添加一個具有購物車片段禁用功能的插件。 有很多插件可以禁用您的購物車片段。 但另一種方法是，如果您熟悉編輯 php，則可以通過編輯主題的 functions.php 文件來禁用購物車碎片。

有一些風險。 當您禁用購物車片段時，某些購物車小部件可能會遇到問題。 因此，您想在禁用購物車小部件後對其進行測試，以確保它們按預期運行。

現在，下一個技巧或技巧是在自定義訂單表發布後加以利用。 你可能會問，你是什麼意思？ 稍後，在 DE{CODE} 中，您將從 WooCommerce 了解到將於今年晚些時候發布的新自定義訂單表。 而 WooCommerce 表是——訂單表有一個結構困境。 你們中的許多人都知道，這通常被認為是縮放比例不佳的原因。 但是，在涉及處理產品的交互或處理訂單的交互，有時甚至是插件數據時，它也可能成為速度問題。

現在，WooCommerce 使用存儲各種數據實體的 post 元表，包括訂單和產品，以及一些添加的插件數據，任何時候調用這些實體中的任何一個，它們都會點擊同源。 因此，您可以想像通過創建自定義訂單表來緩解交通擁堵將增加真正電子商務引擎的 WooCommerce 結構完整性，並提高任何訂單活動的速度。 這將是一個很好的支持，特別是對於具有高流量和高訂單量的站點，甚至是具有非常大的產品目錄的站點。

通過這三種不同類型的表，用於核心訂單信息的新核心表，專門用於插件數據的新插件表，以及用於開發人員需要存儲的任何類型的自定義元數據的新元表，這將減輕post 元表之前和當前對您的訂單交互的瓶頸。 這些表也將有專門的索引，這將有助於加快在每個表中檢索這些特定實體的速度。 稍後您將在 DE{CODE} 中聽到更多關於自定義訂單表的信息。

那麼我們來看看第三個提升，headless的速度。 所以這個技巧是無頭的，因為無頭，無頭堆棧，將速度提高幾個數量級。 無頭基礎設施前端的 JavaScript 代碼將比傳統的 WordPress 基礎設施快得多，在某些情況下快 10 倍。 我們甚至有客戶在我們的 Atlas 基礎設施上看到所有 Lighthouse 指標增長了六倍。

在 WP Engine，我們有一個名為 Atlas 的無頭基礎設施。 該基礎設施允許 - 還有一個稱為我們的內容引擎的組件，它大大提高了在您的 WooCommerce 實例中檢索各種靜態和動態內容的速度。 無頭基礎架構還允許您自定義後端集成，並為您的 WooCommerce 網站需要集成的第三方應用程序創造閃電般快速優化的機會。 這是我今天的最後一個提示。