Tại sao website WooCommerce của bạn chậm hơn nó đáng có?
Mình có thằng bạn mở shop bán hàng online bằng WooCommerce. Một hôm nó than: “Sao web tao chậm quá mày, khách vào toàn bỏ đi, chắc do hosting rẻ quá”. Mình kiểm tra thì hosting cũng không phải quá tệ, nhưng phát hiện ra một thủ phạm thầm lặng mà ít người để ý: Cart Fragments.
Nếu bạn đang chạy WooCommerce mà chưa biết Cart Fragments là gì, thì bài này dành cho bạn. Và tin mình đi, hosting xịn không phải lúc nào cũng là giải pháp.
Cart Fragments là cái quái gì vậy?
Cart Fragments là cơ chế của WooCommerce để cập nhật giỏ hàng theo thời gian thực. Khi bạn thêm sản phẩm vào giỏ, nó tự động cập nhật số lượng ở góc màn hình mà không cần reload trang. Nghe có vẻ tiện, đúng không?
Vấn đề là: nó chạy mỗi khi có người truy cập website, kể cả khi người đó chưa thêm bất cứ thứ gì vào giỏ hàng. Cứ mỗi lần load trang, trình duyệt lại gửi một AJAX request tới server để hỏi “có gì trong giỏ không?”. Hàng ngàn request vô nghĩa mỗi ngày, âm thầm đốt tài nguyên server.
Cộng đồng phát triển WooCommerce cũng đã nhận ra vấn đề này. Trên GitHub của WooCommerce, có một pull request đang được thảo luận khá sôi nổi về việc skip cart fragments AJAX cho khách chưa có giỏ hàng – tức là những người chỉ vào xem, chưa mua gì thì không cần chạy cart fragments làm gì cho tốn.
Tác hại của Cart Fragments đến hiệu năng
Mình thử tưởng tượng một website có 10.000 lượt truy cập mỗi ngày:
- 80% trong số đó là khách mới, chưa mua gì
- Mỗi người load trung bình 3 trang
- Tức là có tới 24.000 request Cart Fragments vô ích mỗi ngày
24.000 request mà chẳng đem lại giá trị gì, chỉ ngồi đó hỏi “có gì trong giỏ không?” và nhận câu trả lời “không có gì”. Ngốn băng thông, ngốn CPU, ngốn thời gian xử lý của server. Còn nếu bạn dùng shared hosting rẻ tiền thì coi như … xác định.
Cách tắt Cart Fragments cho khách vãng lai
Có nhiều cách để xử lý vấn đề này. Mình sẽ chỉ bạn cách đơn giản nhất – thêm code vào file functions.php của theme (hoặc tốt nhất là child theme).
Nếu bạn chưa biết child theme là gì, thì nên tìm hiểu nhé. Còn đây là code:
// Tắt Cart Fragments cho khách chưa đăng nhập và chưa có giỏ hàng
add_action('wp_enqueue_scripts', 'chiasehay_disable_cart_fragments', 99);
function chiasehay_disable_cart_fragments() {
if (is_user_logged_in() || WC()->cart->is_empty()) {
return;
}
// Hủy đăng ký script cart-fragments
wp_dequeue_script('wc-cart-fragments');
wp_deregister_script('wc-cart-fragments');
}Đoạn code này kiểm tra: nếu user chưa đăng nhập VÀ giỏ hàng đang trống thì sẽ hủy tải script cart-fragments. Đơn giản mà hiệu quả!
Các mẹo tối ưu WooCommerce khác
Ngoài Cart Fragments, đây là mấy mẹo mình đã áp dụng và thấy hiệu quả rõ rệt:
- Dùng plugin cache: RabbitLoader có sẵn trên site mình, giúp cache trang động và giảm tải server đáng kể.
- Tối ưu ảnh sản phẩm: ShortPixel Image Optimizer nén ảnh mà không mất chất lượng. Ảnh nặng là kẻ thù số 1 của tốc độ.
- Giới hạn số lượng sản phẩm hiển thị: Đừng show 100 sản phẩm một trang. 12-20 là đẹp.
- Checkout tối giản: Càng ít field trong form checkout càng nhanh. Cái này mình có bài khác nói chi tiết rồi.
- CDN: RabbitLoader cũng có tính năng CDN, giúp load nhanh hơn cho khách ở xa server.
Đo lường trước và sau khi tối ưu
Trước khi làm gì, hãy chụp màn hình kết quả đo tốc độ (Google PageSpeed, GTmetrix) để có số liệu so sánh. Sau khi tắt Cart Fragments cho khách vãng lai, mình thấy thời gian load trang giảm khoảng 200-400ms – đủ để cải thiện điểm PageSpeed vài điểm.
200-400ms nghe không nhiều, nhưng theo nghiên cứu, cứ chậm thêm 100ms là tỷ lệ chuyển đổi giảm 7%. Tính ra là một con số đáng kể đấy!
Tổng kết
Cart Fragments là một ví dụ điển hình cho việc “tính năng tiện mà thành hại” nếu không biết cách kiểm soát. Chỉ một đoạn code nhỏ cũng có thể cải thiện tốc độ đáng kể cho website WooCommerce của bạn.
Mình thấy nhiều bạn cứ đổ tại hosting rẻ, nhưng thực ra đôi khi là do code. Tối ưu code trước, rồi hãy nghĩ đến nâng cấp hosting nhé. Đỡ tốn tiền mà hiệu quả hơn nhiều!
Có bạn nào từng gặp vấn đề tương tự không? Chia sẻ kinh nghiệm bên dưới nhé!
