Dùng CDN cho shop WooCommerce mà không làm hỏng giỏ hàng

Một shop WooCommerce có hàng trăm ảnh sản phẩm và nhiều file giao diện. Khi khách ở Cần Thơ hay Đà Nẵng mở trang, mỗi tệp đó phải đi từ máy chủ gốc (origin — máy chủ nguồn của bạn) tới tận nơi. CDN rút ngắn quãng đường này bằng cách giữ sẵn bản sao ở điểm phát gần khách nhất. Nhưng nếu bật ẩu, chính CDN sẽ phục vụ giỏ hàng của người này cho người khác. Bài viết này chỉ rõ phần nào được tăng tốc và phần nào tuyệt đối không được đụng vào.

CDN giúp gì cho một shop bán hàng

Phần nặng nhất của trang sản phẩm thường không phải chữ, mà là ảnh. Một trang danh mục với 24 sản phẩm có thể kéo theo vài megabyte ảnh thumbnail. CDN giải quyết đúng khối lượng này: nó nhân bản các tài nguyên tĩnh (static assets — tệp không đổi theo người dùng) ra mạng lưới máy chủ rải khắp nơi, rồi phục vụ từ điểm gần khách nhất.

Cloudflare là lựa chọn phổ biến cho WooCommerce vì có gói miễn phí và mạng lưới hơn 330 trung tâm dữ liệu tại hơn 120 quốc gia. Điểm hay là Cloudflare tự động cache các tệp tĩnh theo phần mở rộng file mà không cần cấu hình gì: ảnh JPG, PNG, WebP, AVIF, GIF, SVG cùng file CSS, JS, font (WOFF2, TTF) đều nằm trong danh sách cache mặc định. Chỉ cần trỏ tên miền qua Cloudflare là phần tĩnh đã được phân phối nhanh hơn.

Cần phân biệt rõ: CDN tăng tốc phần TĨNH, còn phần ĐỘNG (dynamic — sinh ra riêng cho từng người) vẫn phụ thuộc máy chủ gốc. Trang giỏ hàng, đơn hàng, tài khoản vẫn cần origin xử lý. Vì vậy CDN không thay thế việc tối ưu tốc độ WooCommerce ở phía máy chủ; hai việc bổ trợ cho nhau.

Quy tắc sống còn không được cache trang động

Đây là phần dễ gây tai nạn nhất. Mặc định Cloudflare chỉ cache tệp tĩnh và không cache HTML một cách hung hăng, nên cài cơ bản thường an toàn. Vấn đề phát sinh khi bạn bật một quy tắc kiểu “cache everything” (cache mọi thứ) để tăng tốc HTML mà quên loại trừ các trang động.

Hậu quả khi cache nhầm trang động rất nghiêm trọng: Cloudflare có thể lưu lại trang giỏ hàng của khách A rồi đem phục vụ cho khách B. Khách B mở giỏ thấy sản phẩm lạ, hoặc tệ hơn là thấy thông tin tài khoản của người khác. Đây vừa là lỗi chức năng vừa là rò rỉ quyền riêng tư.

Bốn nhóm trang sau BẮT BUỘC nằm ngoài cache HTML:

• Giỏ hàng (/cart/*) — nội dung riêng từng phiên mua.
• Thanh toán (/checkout/*) — chứa thông tin đơn và địa chỉ.
• Tài khoản (/my-account/*) — lịch sử đơn, thông tin cá nhân.
• Quản trị và đăng nhập (/wp-admin/*, /wp-login.php) và đường gọi admin-ajax.php.

Quy tắc cache theo loại trang

Cách tư duy đúng là chia trang shop thành hai nhóm và đặt luật khác nhau cho từng nhóm.

Khi tạo quy tắc, thứ tự rất quan trọng: luật cụ thể (bypass cho trang động) phải đặt TRƯỚC luật chung (cache everything). Cloudflare áp dụng luật khớp đầu tiên, nên nếu để luật “cache everything” lên trên thì giỏ hàng sẽ dính cache trước khi luật loại trừ kịp chạy.

Chặn theo cookie để an toàn hơn

Loại trừ theo đường dẫn chưa đủ kín, vì khách có thể đang ở trang sản phẩm nhưng đã có hàng trong giỏ. WooCommerce tự đặt các cookie phiên mua: woocommerce_cart_hash, woocommerce_items_in_cart và wp_woocommerce_session_*. Khi một trong các cookie này tồn tại nghĩa là khách đang có phiên mua hàng. Cấu hình Cloudflare bypass cache khi gặp các cookie đó (cộng cookie đăng nhập WordPress) giúp người đang mua luôn thấy dữ liệu mới nhất. Đây cũng là cách mà tính năng APO của Cloudflare xử lý tự động: phát hiện cookie giỏ hàng thì bỏ qua cache.

Hai con đường cấu hình trên Cloudflare

Bạn có hai hướng đi tùy mức độ muốn can thiệp.

Hướng tối thiểu (an toàn nhất): trỏ DNS qua Cloudflare và để mặc định. Phần ảnh, CSS, JS được CDN tăng tốc, còn HTML không bị cache nên không có rủi ro lộ giỏ hàng. Đây là điểm khởi đầu hợp lý cho hầu hết shop.

Hướng cache HTML để nhanh hơn nữa: dùng APO (Automatic Platform Optimization — tối ưu nền tảng tự động) qua plugin Cloudflare for WordPress. APO cache cả HTML ở biên mạng và tự bypass khi thấy cookie giỏ hàng. Lưu ý APO miễn phí với gói trả phí, còn gói Free tính thêm 5 USD mỗi tháng. Cần kiểm chứng giá hiện tại trên trang Cloudflare trước khi quyết định.

Sau khi cấu hình, hãy tự kiểm tra như một khách thật: đăng nhập, thêm sản phẩm vào giỏ, đi qua thanh toán và mở trang tài khoản, xác nhận mỗi bước hiển thị đúng dữ liệu của chính mình. Nếu shop đông khách hoặc dùng Redis ở tầng object cache, bạn nên đọc thêm về dùng Redis cache cho WooCommerce để xử lý phần động phía origin.

Câu hỏi thường gặp

CDN có làm chậm trang giỏ hàng không?

Không, nếu cấu hình đúng. Trang giỏ hàng được loại khỏi cache nên đi thẳng từ máy chủ gốc, tốc độ của nó phụ thuộc origin chứ không phải CDN. CDN chỉ tăng tốc phần ảnh và tài nguyên tĩnh trên các trang dùng chung.

Cloudflare miễn phí có đủ cho shop nhỏ không?

Với phần lớn shop nhỏ và vừa, gói Free đã đủ để phân phối ảnh và file tĩnh nhanh hơn. Bạn chỉ cần cân nhắc nâng cấp khi muốn cache HTML qua APO hoặc cần thêm tính năng bảo mật.

Tôi đã dùng plugin cache trên WordPress, có cần CDN nữa không?

Hai thứ giải quyết hai bài toán khác nhau. Plugin cache tạo file HTML tĩnh ở máy chủ gốc, còn CDN đưa tài nguyên ra gần khách về mặt địa lý. Kết hợp cả hai cho kết quả tốt hơn, miễn là quy tắc loại trừ trang động được áp dụng nhất quán ở cả hai tầng.

Nếu bạn muốn có người dựng và tối ưu sẵn từ đầu, dịch vụ làm website WooCommerce của Web22 bao gồm cả phần cấu hình cache và CDN đúng chuẩn cho shop bán hàng.