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:
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
CSS của WooCommerce
Để 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:
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. :)
Bạn có đang phát triển import demo Shop Style, Blog Style và Magazine Style với 1 click không? Có vậy thì sẽ hoàn hảo và tiện lắm luôn!
Để mình nghiên cứu. Sẽ bổ sung sớm. :D
Theme mình có thể hỗ trợ giao diện full width Layout luôn trong tương lai không? À còn thiếu Porforlio Style nữa?
Full-width có hỗ trợ sẵn rồi mà bạn. Trong phần tùy chọn Layout của từng post/page đó. Portfolio thì để mình nghiên cứu đã. Đã có bản 4.2.4 fix lỗi Landing Page nhé. Bạn update xem sao. :P
Sẵn bạn nghiên cứu tích hợp tùy chỉnh Custom CSS trong customize theme luôn!! :D Mỗi lần update theme là mất hết chỉnh sửa trong style.css.
Cái này mình đang nghiên cứu. Tích hợp tính năng chọn màu rồi. Nhưng chỉ áp dụng được trên file style.css mà không áp được vào file style.min.css. Đang bí. :P Tạm thời bạn tùy biến CSS ở chỗ nào thì copy vào paste vào phần Additional CSS ấy. Update sẽ không bị mất. :P
Lên giao diện 1 menu trên điện thoại trông sáng đẹp hẳn :D
Cái Landing Page nhìn chuyên nghiệp thật, dùng nó để chém nội dung chạy Ads cũng ngon.
Quất 1 bộ ủng hộ mình đi bạn ơi. Hôm nay 15/02 là hạn cuối cùng của khuyến mãi rồi. Giá chỉ 450k – 500k – 600k tùy theo gói thôi. Sau hôm nay về giá gốc là 500k – 600k – 700k. :P
Cảm ơn bạn nhé. Cần ngâm cứu thêm phần này
Cảm ơn bạn nhé. Cần phải nghiên cứu thêm phần này để site chạy nhanh hơn
có cách nào ngoại lệ một js hay css nào trong số đó không bạn?
Bạn bỏ đi đoạn code tương ứng với file JS hoặc CSS đó là được mà. :P
Có thẻ điều kiện nào chỉ áp dụng cho các bài viết ở page 1 không ảnh nhỉ?
Quả này chệu luôn. :D
Em muốn xóa những file js này thì làm sao ạ?
Bạn xóa đi thì WooCommerce hoạt động kiểu gì?
Xóa file css không cần thiết, js hover, slider hình ảnh cho nhẹ ạ! @@
Cái đó là do theme hoặc plugin khác chèn vào chứ WooCommerce mặc định không có đâu bạn nhé.
Đường dẫn là “wp-content/plugins/woocommerce/assets/js/zoom/jquery.zoom.min.js” anh ạ?
Bạn thử dùng plugin Asset CleanUp: Page Speed Booster xem sao.
Cám ơn bạn nhé!