如何修复WooCommerce页面加载缓慢问题

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页面加载缓慢的问题？
1. 仅在您网站的首页禁用cart fragmentation
2. 仅停用首页和文章上的cart fragmentation
3. 禁用除商店页面外的所有页面上的所有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 等缓存插件，这些插件具有缓存页面片段以提高页面速度的高级选项。