Tải có điều kiện các file JS và CSS của plugin WooCommerce

Tải có điều kiện các file JS và CSS của plugin WooCommerce.

WooCommerce là một trong những plugin hỗ trợ xây dựng shop bán hàng online trên nền tảng WordPress phổ biến nhất và tốt nhất hiện nay. Theo mặc định, nếu website WordPress của bạn có cài đặt WooCommerce thì tất cả các trang đều sẽ tải file JS và CSS của plugin này. Điều đó vô tình khiến cho page-size cũng như lượng request của mỗi trang đều tăng lên đáng kể, làm website của bạn tải chậm hơn, khách hàng phải đợi lâu hơn và nguy cơ mất khách cũng tăng rõ rệt.

Tham khảo thêm:

• Tinh giản WooCommerce giúp website của bạn nhẹ hơn
• Loại bỏ các file CSS mặc định của WooCommerce

Danh sách các file CSS và JS mặc định của WooCommerce

Lưu ý: danh sách file JS và CSS có thể thay đổi tùy theo từng phiên bản WooCommerce khác nhau.

JS của WooCommerce

Thường bao gồm một số file JS như sau:

/wp-content/plugins/woocommerce/assets/js/frontend/add-to-cart.min.js
/wp-content/plugins/woocommerce/assets/js/jquery-blockui/jquery.blockUI.min.js
/wp-content/plugins/woocommerce/assets/js/frontend/woocommerce.min.js
/wp-content/plugins/woocommerce/assets/js/jquery-cookie/jquery.cookie.min.js
/wp-content/plugins/woocommerce/assets/js/frontend/cart-fragments.min.js

CSS của WooCommerce

Thường bao gồm một số file CSS như sau:

/wp-content/plugins/woocommerce/assets/css/woocommerce-layout.css
/wp-content/plugins/woocommerce/assets/css/woocommerce-smallscreen.css
/wp-content/plugins/woocommerce/assets/css/woocommerce.css

Để nhìn thấy danh sách các file này, các bạn chỉ cần view-source của site trên trình duyệt web hoặc sử dụng các công cụ kiểm tra tốc độ. Nhớ tắt plugin minify hay combine CSS và JS (nếu có) trước khi xem nhé.

Tải có điều kiện các file JS và CSS của WooCommerce

Tải có điều kiện các file JS và CSS của WooCommerce nghĩa là chỉ cho phép chúng tải trên những trang do WooCommerce tạo ra, chẳng hạn như Shop (Cửa hàng), Cart (Giỏ hàng), Checkout (Thanh toán), My Account (Tài khoản)… Không cho phép chúng tải trên các trang khác (không cần đến CSS và JS của WooCommerce) để tránh làm chậm trang.

Đối với các theme khác

Tất cả những gì các bạn cần làm là chèn đoạn code sau đây vào cuối file functions.php của theme (hoặc child theme) mà bạn đang sử dụng:

//* Conditional load WooCommerce's JS and CSS
function conditionally_load_woc_js_css() {
     if (function_exists('is_woocommerce')) {
           if (!is_woocommerce() && !is_cart() && !is_checkout() && !is_account_page() && !is_product() && !is_product_category() && !is_shop()) {
                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');
			wp_dequeue_script('wc_price_slider');
			wp_dequeue_script('wc-single-product');
			wp_dequeue_script('wc-add-to-cart');
			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');
             }
      }
}
add_action('wp_enqueue_scripts', 'conditionally_load_woc_js_css');

Các bạn cũng có thể sử dụng plugin Code Snippets để chèn.

Lưu lại, xóa cache website (nếu có), xóa cache trình duyệt web và xem kết quả.

Đối với theme Paradise

Theme Paradise được phát triển bởi WP Căn bản đã mặc định được bổ sung thêm code này từ phiên bản 4.2.2 nên các bạn không cần phải thực hiện thao tác kể trên nữa. Tất cả những gì các bạn cần làm là truy cập Giao diện => Tùy biến => Tối ưu tốc độ => chuyển mục [WooCommerce] Tải JS và CSS có điều kiện sang trạng thái Có rồi lưu lại.

Xóa cache website (nếu có), xóa cache trình duyệt web và kiểm tra kết quả. Thật đơn giản phải không nào? Chúc các bạn thành công!

Mọi thắc mắc và góp ý liên quan đến việc tải có điều kiện các file JS và CSS của plugin WooCommerce xin vui lòng gửi vào khung bình luận bên dưới để được giải đáp.

Nếu bạn thích bài viết này, hãy theo dõi blog của tôi để thường xuyên cập nhật những bài viết hay nhất, mới nhất nhé. Cảm ơn rất nhiều. :)