ThemesCorners
博客
12 分钟阅读作者 ThemesCorners

WooCommerce 性能优化清单——让你的商店快一倍

一份不掺水的清单，按真实影响（而不是标题党程度）排序，列出真正能改善 WooCommerce Core Web Vitals 的改动。

绝大多数关于「WooCommerce 速度」的文章都是 cargo cult 建议加「装个 WP Rocket 就行」。下面这份清单是我们实际做的事——按我们实际执行的顺序——当客户告诉我们商店慢时。数字来自过去 18 个月里对约 40 家商店的真实审计。

0. 先测量

对三个页面跑 Lighthouse：

  • 首页
  • 一个产品页（你销量最高的）
  • 购物车

记下 LCP、INP、CLS 与 Total Blocking Time。没有这些数字，你无法判断后续任何动作是否有帮助。

1. 把购物车和结账切到 WooCommerce 区块版（≈ LCP 提升 30%）

旧的基于短代码的购物车和结账早就被重写为区块了，但出乎意料地有大量商店没有迁移。区块版本跳过大量 jQuery、延迟非关键脚本，在我们的测试里能让结账的 TTFB 减少约 200ms。

// 在你主题的 functions.php 中——新装默认就是
add_filter('woocommerce_use_blocks_cart_checkout', '__return_true');

然后到后台：Pages → Cart → 把内容从 [woocommerce_cart] 换成 Cart 区块。Checkout 同理。

2. 在上传时就优化产品图（≈ 产品页 LCP 提升 20%）

产品图是 80% 产品页的 LCP 元素。如果你上传 4000×4000 的 PNG，连 WP 的自动裁剪都救不了你——srcset 在高 DPI 屏上会引用原图。

我们用的组合：

  • 上传不超过 2000×2000。
  • 上传时强制转 AVIF + WebP（ShortPixel 或 Imagify，挂 wp_handle_upload 过滤器）。
  • 在 设置 → 媒体 把最大图片宽度设为 1600。
  • 除 LCP 图外全部懒加载。WordPress 自 5.5 起自动处理——但 LCP 图需要 fetchpriority="high"，大多数主题没设。遵循当前 WP 规范的区块主题会设。基于短代码的旧主题经常不设。

3. 用 AJAX 端点替换 ?add-to-cart=（≈ 体感速度提升 1.5 秒）

旧的查询参数 ?add-to-cart=123 会触发整页刷新。WC 8 新增的 AJAX 端点让用户留在产品页，并弹出迷你购物车。新店默认开启，但许多老店关着：

WooCommerce → Settings → Products → AJAX add to cart on archives

这是性价比最高的改动之一——影响大，工作量小。

4. 在非购物车页面禁用 cart fragments（≈ TTFB 减少 200ms）

wc-cart-fragments 脚本每次页面加载都发一次 AJAX 请求，只为更新迷你购物车计数。如果迷你购物车只在特定页面可见，其它地方可以直接跳过：

add_action('wp_enqueue_scripts', function () {
    if (! is_woocommerce() && ! is_cart()) {
        wp_dequeue_script('wc-cart-fragments');
    }
}, 11);

5. 启用对象缓存（≈ 查询量减少 40%）

WooCommerce 在繁忙的商店里每页要打数百次数据库查询。Redis 或 Memcached 能把它们缓存进内存。在托管主机上（Kinsta、WP Engine、Pressable）默认就开；在裸 VPS 上自己装：

sudo apt install redis-server php8.4-redis
wp plugin install redis-cache --activate
wp redis enable

然后到 WooCommerce → Status → Tools → Redis status 确认。

6. 延迟非必要 JS（≈ TBT 减少 50%）

WooCommerce 标配栈：Stripe、Klaviyo、Google Tag Manager、Hotjar、聊天 widget、邮件弹窗、点评插件。每一个都给 TBT 加 50–200ms。解法不是删——市场团队不答应——而是把它们延后到 LCP 之后：

add_filter('script_loader_tag', function ($tag, $handle) {
    $defer = ['klaviyo', 'hotjar', 'gtm-js', 'tawk', 'crisp'];
    foreach ($defer as $h) {
        if (str_contains($handle, $h)) {
            return str_replace(' src=', ' defer src=', $tag);
        }
    }
    return $tag;
}, 10, 2);

聊天 widget 尤其推荐用 requestIdleCallback 模式——只在浏览器空闲时才加载它。

7. 精简 WooCommerce 后台 AJAX

WC 后台会轮询 admin-ajax.php 取库存、订单数与 Marketing Hub 数据。在多管理员并发的店里，这会冲击数据库。不用 Marketing Hub 的店，关掉：

add_filter('woocommerce_admin_features', function ($features) {
    return array_diff($features, ['marketing']);
});

8. 上 CDN——但小心购物车

Cloudflare 免费版覆盖 90% 的 WooCommerce 站点。设置页面规则绕过缓存：

  • /cart/*
  • /checkout/*
  • /my-account/*
  • /wp-admin/*
  • 任意查询字符串中含 add-to-cart 的 URL

漏掉这一步会出现著名的「所有人看到同一个购物车」bug。

9. 把重型报表移出主库

WooCommerce Analytics 的表（wc_order_stats、wc_order_product_lookup）膨胀很快。挺过第一个假日季后，一条分析查询可能锁住订单表几秒。解法：

  • 最简单： 把 analytics 重新生成放到非高峰时段。
  • 更好： 把 analytics 移到只读副本。
  • 最佳： 关掉 WC Analytics，改用 Glew、Polar Analytics 这类从 API 拉数据的专用工具。

10. 审计主题与模板

主题是单一最大变量。一个就算页面是博客也把每个产品块都发出去的 WooCommerce 主题，会把你的评分拖到地板。测试顺序：快速主题的子主题 → 更快的主题 → Storefront 的自定义子主题 → 经过审计的自定义主题。

我们的主题默认发不超过 50KB 的 CSS，并对所有 WC 相关 JS 做了懒加载。如果你从零开始，这是一个站得住脚的基线。

不要做这些事

  • 不要装三个缓存插件。 它们会冲突。选一个（WP Rocket、LiteSpeed Cache 或 W3 Total Cache）认真调。
  • 不要在 header 显示购物车计数的店里全局禁用 cart fragments。 你会丢失更新。
  • 不要懒加载 LCP 图片。 这会破坏 fetchpriority，整体反而更慢。
  • 不要折腾那些把图压成 JPG 的「图像优化」插件。 AVIF/WebP 在我们做过的每一个测试里都赢。

现实预期

按这十步全部走完，在一个典型的 WooCommerce 商店（500 件商品、月单量 5k）上，我们通常看到：

  • LCP：4.2s → 1.9s
  • INP：380ms → 110ms
  • CLS：0.18 → 0.04
  • Lighthouse 移动端：38 → 87

你不会拿到 100。任何告诉你他们在真实的 WooCommerce 商店（带营销像素、聊天 widget）上拿到 100 的人，要么在撒谎，要么测试时把网络节流设成了「fast 4G」——Google 是用慢速 4G 测量的。

87 已经足以通过 Core Web Vitals。通过 Core Web Vitals、把你的转化率拿回来、继续做生意。

相关文章