How can we help you?

View Categories

WooCommerce 按需加载前端资源 提高页面打开速度

< 1 min read

Table of Contents

按需加载是网站前端优化中很重要的一条原则， 而 WooCommerce 为我们提供的前端资源中，却没有很好的遵循这一原则，WooCommerce 虽然对 CSS 进行了一些分离，但是分离得并不合理，这就导致了页面中出现很多不必要的 CSS。

对于使用默认 WooCommerce 样式的网站来说，这样的设置可能没有什么问题。但是如果我们需要对网站进行较为精细的定制，就避免不了要添加很多 CSS，如果把这些 CSS 放在一个文件了，这个文件很快就会变得很大，影响页面的渲染速度。

使用WooCommerce判断函数按需加载CSS代码 #

为了避免这个问题，我们可以对 WooCommerce 站点中使用的 CSS 按页面进行分离，根据显示的页面加载。在购物车页面，加载购物车需要的CSS，在结算页面，加载结算页面需要的 CSS，如此进行分离。在网站首页，商品列表页，商品详情页，就不需要加载这些用不到的 CSS。这可以在一定程序上加快这些页面的打开速度。

WooCommerce 为我们提供了一些很实用的判断函数来帮助我们判断当前显示的是哪种类型的页面，下面是我们在一些主题中使用的模版代码，需要的朋友可以参考。


// 商品列表页面
if (is_product() || is_shop() || is_product_category() || is_product_tag()) {
    wp_enqueue_style('_s-woocommerce-checkout', _s_asset('styles/products.css'));
}

// 商品详情页面
if (is_singular('product')) {
    wp_enqueue_style('_s-woocommerce-review', _s_asset('styles/review.css'));
}

// 购物车页面
if (is_cart()) {
    wp_enqueue_style('_s-woocommerce-cart', _s_asset('styles/cart.css'));
}

// 结账页面
if (is_checkout()) {
    wp_enqueue_style('_s-woocommerce-checkout', _s_asset('styles/checkout.css'));
}

// 账户页面和订单已收到页面
if (is_account_page() || is_order_received_page()) {
    wp_enqueue_style('_s-woocommerce-account', _s_asset('styles/account.css'));
}

类似 WooCommerce，其实我们还可以在 WordPress 中进行这样的处理，在首页、列表页、文章页加载各自页面需要的 CSS。前提是我们需要对这些页面的 CSS 进行合理的分离。除了通过后端按需加载 CSS，也有一些前端方法来实现这个功能，具体就不再展开讨论了，有兴趣的朋友可以自己搜索研究一下。

您的感觉是什么