WooCommerce是使您的WordPress網站成為線上商店的流行外掛之一。大多數流行的主題都在WooCommerce外掛的幫助下提供整合商店功能。我們還在我們的一些網站上使用WooCommerce。
最近，當我們對GTmetrix和pingdom進行頁面速度檢查時，我們發現元件“wc-ajax=get_refreshed_fragments”需要大約一秒鐘才能載入。經過分析，我們發現在大多數其他情況下，頁面載入甚至需要5到10秒。
如果您在使用WooCommerce Ajax呼叫時遇到頁面速度問題，那麼這裡有解決不同場景問題的解決方案。
修復WooCommerce AJAX問題
我們在本文中介紹了有關WooCommerce的wc-ajax=get_refreshed_fragments的以下主題：
- 什麼是wc-ajax=get_refreshed_fragments？
- admin Ajax呼叫的頁面載入問題
- 如何使用admin Ajax修復WooCommerce頁面載入緩慢的問題？
- 僅在您網站的首頁禁用cart fragmentation
- 僅停用首頁和文章上的cart fragmentation
- 禁用除商店頁面外的所有頁面上的所有WooCommerce樣式和指令碼
- 使用外掛停止WooCommerce的admin Ajax呼叫
- 測試頁面速度
- 停用WordPress Heartbeat API
1.什麼是wc-ajax=get_refreshed_fragments？
我們花了一些時間才理解實際上頁面速度圖表中的重新整理片段是從WooCommerce外掛呼叫的。由於我們的網站託管在高效能獨立伺服器上，因此影響較小，WooCommerce Ajax呼叫大約需要一秒鐘。如果您託管在像Bluehost這樣的共享主機上，那麼您可能會注意到頁面載入的延遲時間更長，從3到10秒不等。
下面是來自pingdom的螢幕截圖，顯示了在頁面上載入“wc-ajax=get_refreshed_fragments”的漫長等待時間。您還可以看到此指令碼將列在Google PageSpeed Insights工具中的渲染阻塞問題下，並在GTmetrix的瀑布圖下找到它。
WooCommerce Ajax頁面載入問題
基本上，WooCommerce會嘗試通過呼叫指令碼來收集購物車詳細資訊，並且需要很長時間才能完成任務。該外掛通過呼叫admin Ajax獲取每個頁面上未快取的購物車詳細資訊以顯示最新的購物車專案。您可以在網站的每個頁面上看到類似下面的指令碼：
<script type='text/javascript'>
/* <![CDATA[ */
var wc_add_to_cart_params = {"ajax_url":"\/wp-admin\/admin-ajax.php","wc_ajax_url":"\/?wc-ajax=%%endpoint%%","i18n_view_cart":"View Cart","cart_url":"http:\/\/localhost\/shop\/cart\/","is_cart":"","cart_redirect_after_add":"yes"};
/* ]]> */
</script>
這是在localhost環境中，您應該會看到帶有您自己的URL的程式碼。
頁面源上的WooCommerce Ajax片段
2. 管理Ajax呼叫和頁面載入
WooCommerce使用cart fragmentation admin Ajax呼叫來更新購物車中的專案和總數，而無需重新整理頁面。在每個頁面上呼叫admin Ajax會大大延遲您的頁面載入時間，並且還會消耗大量伺服器資源。另一個問題是，即使在沒有購物車或產品相關詳細資訊的頁面上，外掛也會執行此操作。
上面的螢幕截圖顯示“關於我們”頁面上沒有可用的WooCommerce元件存在問題。因此，刪除頁面上的購物車無助於提高頁面載入速度。我們需要的是在沒有顯示購物車或產品的情況下禁用購物車更新。
3. 如何解決wc-ajax=get_refreshed_fragments的問題？
該問題需要通過修改主題的functions.php檔案使指令碼出隊來解決。 您可以通過WordPress管理面板或使用FTP修改functions.php。不要修改functions.php檔案，而是建立一個子主題並在子主題中新增額外的功能。這將幫助您在更新主題時保留更改。將WooCommerce Ajax cart fragmentation指令碼出隊有三個選項。
- 僅在您網站的首頁禁用cart fragmentation
- 僅停用首頁和文章上的cart fragmentation
- 禁用除商店頁面外的所有頁面上的所有WooCommerce樣式和指令碼。
讓我們詳細討論所有三個選項，只為您做一件事。
3.1。在首頁禁用cart fragmentation
在WordPress管理面板中，導航到“外觀 > 編輯器”並找到functions.php檔案。在檔案末尾新增以下程式碼。
/** Disable Ajax Call from WooCommerce */
add_action( 'wp_enqueue_scripts', 'dequeue_woocommerce_cart_fragments', 11);
function dequeue_woocommerce_cart_fragments() { if (is_front_page()) wp_dequeue_script('wc-cart-fragments'); }
它應該在編輯器上如下所示，貼上程式碼後單擊“更新檔案”以儲存您的更改。
修改主題函式PHP檔案
如果您想使用FTP，請使用FTP帳戶登入到您的伺服器。轉到“ /wp-content/your-theme/ ”並找到“ functions.php ”檔案。編輯並在檔案末尾新增上述程式碼並將修改後的檔案上傳回伺服器。
檔案更新後，導航到“ WooCommerce > Setting”選單並轉到“Products”選項卡下的“Display”部分。啟用選項“Redirect to the cart page after successful addition”的覈取方塊。
啟用重定向到購物車頁面
這將幫助客戶進入購物車主頁面，而不是在將商品新增到購物車後等待很長時間。否則，儘管新增了商品，但當您在同一頁面上時，您的購物車可能不會顯示更新的詳細資訊，因為購物車碎片指令碼被禁用。
3.2. 在首頁和文章上禁用Cart Fragmentation
上面的程式碼將只在靜態首頁禁用購物車片段指令碼。如果您想禁用所有文章上的指令碼，請嘗試在主題的function.php檔案中新增以下程式碼。
/** Disable Ajax Call from WooCommerce on front page and posts*/
add_action( 'wp_enqueue_scripts', 'dequeue_woocommerce_cart_fragments', 11);
function dequeue_woocommerce_cart_fragments() {
if (is_front_page() || is_single() ) wp_dequeue_script('wc-cart-fragments');
}
3.3. 禁用站點範圍內的所有WooCommerce樣式和指令碼
WooCommerce是一個資源密集型外掛，它可能會佔用您的伺服器資源來載入所有相關的樣式表和指令碼。如果您的產品很少有成千上萬的部落格文章，那麼將部落格文章中的所有WooCommerce相關內容出列或禁用是有意義的。換句話說，您只能在商店相關頁面上允許WooCommerce指令碼，以便所有其他頁面載入速度更快。
根據Github gist在您的functions.php檔案中新增以下程式碼。該程式碼將首先檢查您的網站上是否存在WooCommerce外掛，然後禁用除產品、購物車和結帳頁面之外的所有頁面上的樣式和指令碼。這將有助於從除WooCommerce相關頁面之外的所有文章/頁面中刪除“wc-ajax=get_refreshed_fragments”呼叫。
/** Disable All WooCommerce Styles and Scripts Except Shop Pages*/
add_action( 'wp_enqueue_scripts', 'dequeue_woocommerce_styles_scripts', 99 );
function dequeue_woocommerce_styles_scripts() {
if ( function_exists( 'is_woocommerce' ) ) {
if ( ! is_woocommerce() && ! is_cart() && ! is_checkout() ) {
# Styles
wp_dequeue_style( 'woocommerce-general' );
wp_dequeue_style( 'woocommerce-layout' );
wp_dequeue_style( 'woocommerce-smallscreen' );
wp_dequeue_style( 'woocommerce_frontend_styles' );
wp_dequeue_style( 'woocommerce_fancybox_styles' );
wp_dequeue_style( 'woocommerce_chosen_styles' );
wp_dequeue_style( 'woocommerce_prettyPhoto_css' );
# Scripts
wp_dequeue_script( 'wc_price_slider' );
wp_dequeue_script( 'wc-single-product' );
wp_dequeue_script( 'wc-add-to-cart' );
wp_dequeue_script( 'wc-cart-fragments' );
wp_dequeue_script( 'wc-checkout' );
wp_dequeue_script( 'wc-add-to-cart-variation' );
wp_dequeue_script( 'wc-single-product' );
wp_dequeue_script( 'wc-cart' );
wp_dequeue_script( 'wc-chosen' );
wp_dequeue_script( 'woocommerce' );
wp_dequeue_script( 'prettyPhoto' );
wp_dequeue_script( 'prettyPhoto-init' );
wp_dequeue_script( 'jquery-blockui' );
wp_dequeue_script( 'jquery-placeholder' );
wp_dequeue_script( 'fancybox' );
wp_dequeue_script( 'jqueryui' );
}
}
}
警告：請記住只新增上述三個選項中的一個程式碼塊。不要在您的functions.php檔案中新增多個或所有程式碼。當您禁用指令碼時，還要禁用“ WooCommerce > Setting”選單的“Display”部分下的“Enable Ajax add to cart buttons on archives”選項。
4. 使用外掛停止WooCommerce admin Ajax呼叫
如果您不熟悉修改主題檔案或建立子主題，那麼有外掛可以為您完成工作。第一種選擇是使用高階WP Rocket外掛。您可以購買WP Rocket，從您的WordPress管理面板安裝和啟用外掛。該外掛對WooCommerce沒有任何特殊設定。只需啟用外掛即可禁用您網站所有頁面上的 WooCommerce cart fragmentation。它適用於檢查您的頁面是否在原始碼中包含Ajax片段呼叫的邏輯。
如果是，那麼它會在載入頁面時檢查購物車是否為空。當這兩個條件都滿足時，WP Rocket會暫時快取頁面，並在下次載入頁面時提供服務。如果您發現任何問題，您可以使用幫助外掛來停用Ajax片段的快取。
W3 Total Cache等外掛也提供片段快取作為高階擴充套件。但是，您需要每年支付99美元才能獲得高階功能。相反，WP Rocket每年只需49美元，安裝簡單。
5. 測試頁面速度
如果您手動新增了程式碼，請確保清除快取外掛的快取並清除伺服器上的清漆快取（如果可用）。同樣，如果您已安裝WP Rocket外掛，請清除所有級別的快取。之後，檢查Google PageSpeed Insights，你應該不會在渲染阻塞JavaScript部分看到“ wc-ajax=get_refreshed_fragments ”指令碼。當阻塞時間為0毫秒時，您也可以在移動和桌面輕鬆獲得100分。
閃電博Google PageSpeed Insights評分
同樣在pingdom上，呼叫“wc-ajax=get_refreshed_fragments”的 WooCommerce 指令碼不應在“檔案請求”部分下可見。禁用 WooCommerce Ajax 指令碼後，您的頁面速度得分應該會顯著提高。
小廣告：閃電博提供網站效能優化服務，有需求的朋友可以提交需求。
6. 停止WordPress Heartbeat API
WooCommerce外掛新增了許多有吸引力的儀表盤小工具，顯示實時銷售和統計資料。但是，這會拖慢網站的載入速度，從而使您付出高昂的代價。儀表盤小工具使用類似於WooCommerce中的購物車碎片的管理 Ajax 呼叫動態更新內容。這是在稱為心跳 API 的標準 WordPress API 的幫助下完成的。
通常，我們不建議在儀表盤上使用這些動態小工具。您可以簡單地禁用 admin-ajax 呼叫或 WordPress 心跳 API以減少伺服器負載並提高 WordPress 站點的頁面載入速度。像WP Rocket這樣的外掛可以幫助您從管理面板禁用心跳 API。
小結
WooCommerce 是在 WordPress 中建立線上商店的簡單方法之一。但是線上商店需要某些基本功能，例如動態購物車更新。根據我們的經驗，我們看到 90% 的 WooCommerce 使用者銷售簡單的數字商品。他們的商店只是大型部落格或內容網站的附加元件。在這種情況下，我們強烈建議禁用管理員 Ajax 呼叫，以便網站上的所有其他頁面載入速度更快，而不會影響使用者體驗。
如果您有完整的商店，那麼您將需要購物車碎片功能來動態更新購物車專案而無需重新整理頁面。在這種情況下，請確保擁有高質量的託管伺服器以及 WP Rocket 或 W3 Total Cache 等快取外掛，這些外掛具有快取頁面片段以提高頁面速度的高階選項。
評論留言