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

按需加载：WooCommerce前端优化

您好，很高兴为您提供一些WooCommerce前端优化的实用技巧和经验。

遵循按需加载原则

按需加载是网站前端优化中很重要的一条原则。然而，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'));
}

除了通过后端按需加载CSS，我们还可以使用一些前端方法来实现这个功能。当然，这需要我们对这些页面的CSS进行合理的分离。详见WordPress官方文档，或者您也可以自己进行一些尝试和研究。

扫码添加UTHEME微信为好友

· 分享WordPress相关技术文章，主题上新与优惠动态早知道。
· 微信端最大WordPress社群，限时免费入群。