On-demand loading is a very important principle in website front-end optimization, but this principle is not well followed in the front-end resources provided by WooCommerce. Although WooCommerce has separated CSS, it is unreasonable, which leads to many unnecessary CSS in the page.
For websites that use the default WooCommerce style, this setting may not be a problem. However, if we need to customize the website more carefully, we will inevitably add a lot of CSS. If we put these CSS in one file, the file will soon become very large, which will affect the rendering speed of the page.
Load CSS code on demand using WooCommerce judgment function.
In order to avoid this problem, we can separate the CSS used in WooCommerce site by page and load it according to the displayed page. On the shopping cart page, load the CSS required by the shopping cart, and on the settlement page, load the CSS required by the settlement page, so as to separate. On the homepage of the website, the product list page and the product details page, you don’t need to load these unused CSS. This can speed up the opening of these pages to a certain extent.
WooCommerce provides us with some practical judgment functions to help us judge what kind of page is currently displayed. The following are the template codes we use in some topics, which can be referenced by friends in need.
//commodity list page
if (is_product() || is_shop() || is_product_category() || is_product_tag()) {
wp_enqueue_style(‘_s-woocommerce-checkout’, _s_asset(‘styles/products.css’));
}
//Product details page
if (is_singular(‘product’)) {
wp_enqueue_style(‘_s-woocommerce-review’, _s_asset(‘styles/review.css’));
}
//Shopping cart page
if (is_cart()) {
wp_enqueue_style(‘_s-woocommerce-cart’, _s_asset(‘styles/cart.css’));
}
//checkout page
if (is_checkout()) {
wp_enqueue_style(‘_s-woocommerce-checkout’, _s_asset(‘styles/checkout.css’));
}
//Account Page and Order Received Page
if (is_account_page() || is_order_received_page()) {
wp_enqueue_style(‘_s-woocommerce-account’, _s_asset(‘styles/account.css’));
}
Similar to WooCommerce, in fact, we can also do this in WordPress, and load the CSS required by each page on the home page, list page and article page. The premise is that we need to reasonably separate the CSS of these pages. In addition to loading CSS on demand through the back end, there are also some front-end methods to realize this function, which will not be discussed in detail. Interested friends can search and study it themselves.