Hướng dẫn cache toàn bộ dữ liệu website lên CloudFlare

Theo mặc định, CloudFlare chỉ cache các file dữ liệu tĩnh (CSS, JS, hình ảnh…) trên hệ thống CDN của họ. Nó không cache HTML, do đó tác dụng cải thiện tốc độ load và khả năng chịu tải cho website của CloudFlare chưa phải ở mức cao nhất. Nếu bạn đang sử dụng CloudFlare thì ngay sau đây là hướng dẫn giúp cache toàn bộ dữ liệu website của mình lên CloudFlare. Tương tự như tính năng của các plugin tạo cache trên WordPress, CloudFlare sẽ cho phép bạn tạo một bản cache hoàn chỉnh cho website.

Làm thế nào để cache toàn bộ dữ liệu website lên CloudFlare?

huong-dan-cache-toan-bo-du-lieu-website-len-cloudflare

Theo mặc định, CloudFlare chỉ cache các file dữ liệu tĩnh (CSS, JS, hình ảnh…) trên hệ thống CDN của họ. Nó không cache HTML, do đó tác dụng cải thiện tốc độ load và khả năng chịu tải cho website của CloudFlare chưa phải ở mức cao nhất. Nếu bạn đang sử dụng CloudFlare thì ngay sau đây là hướng dẫn giúp cache toàn bộ dữ liệu website của mình lên CloudFlare. Tương tự như tính năng của các plugin tạo cache trên WordPress, CloudFlare sẽ cho phép bạn tạo một bản cache hoàn chỉnh cho website.

Tham khảo thêm:

Khi nào bạn nên cache toàn bộ dữ liệu website?

Nếu website của bạn có dữ liệu ít khi cập nhật và thay đổi, chỉ cho khách truy cập xem nội dung mà không tương tác (không bình luận, không đặt hàng…) thì cache toàn bộ dữ liệu website lên CloudFlare CDN là một sự lựa chọn tuyệt vời. Nó không chỉ giúp bạn giảm TTFB (website phản hồi truy vấn nhanh hơn) mà còn giúp bạn chống tấn công từ chối dịch vụ (DDoS) rất hiệu quả.

Nếu website của bạn có dữ liệu được thay đổi thường xuyên (cho phép độc giả bình luận tương tác, bán hàng online bằng WooCommerce…), bạn nên xem xét đăng ký “Tính năng Automatic Platform Optimization của CloudFlare” với giá chỉ $5/tháng.

Cache toàn bộ dữ liệu website lên CloudFlare

1. Đăng nhập vào tài khoản CloudFlare của bạn => lựa chọn tên miền tương ứng => click vào tab Caching => trong mục Browser Cache TTL, hãy lựa chọn thời gian hiệu lực của tính năng cache trình duyệt là Respect Existing Headers.

thiet-lap-browser-cache-ttl-trong-cloudflare

Chọn Respect Existing Headers sẽ yêu cầu CloudFlare không tự động ghi đè hoặc chèn giá trị vào cache-control Header, trừ khi nó được Page Rule (quy tắc trang) cụ thể yêu cầu phải làm như vậy.

Chúng ta sẽ thêm một số Page Rule trong bước tiếp theo và bước này sẽ đảm bảo rằng bất kỳ quy tắc trang nào cũng không ghi đè lên các quy tắc khác.

2. Chuyển qua tab Rules => Page Rules => click vào nút Create Page Rule.

tao-page-rule-trong-cloudflare

3. Lần lượt tạo 3 Page Rule với các nội dung như sau:

  • Dành cho https://tenmiencuaban.com/*

cloudflare-page-rule-cho-front-end

  • Dành cho https://tenmiencuaban.com/wp-login*

cloudflare-page-rule-cho-wp-login-php

  • Dành cho https://tenmiencuaban.com/wp-admin/*

cloudflare-page-rule-cho-wp-admin

Trong đó:

  • Cache Level – Standard: chỉ cache các file tĩnh (CSS, JS, hình ảnh…) theo mặc định của CloudFlare.
  • Cache Level – Cache Everything: cache tất cả dữ liệu của trang, bao gồm cả HTML.
  • Browser Cache TTL – an hour: cho phép cache dữ liệu website của bạn lên trình duyệt web trong vòng 1 giờ.
  • Edge Cache TLL – a month: cho phép cache dữ liệu website của bạn lên máy chủ của CloudFlare trong vòng 1 tháng.

Dấu * ở cuối URL nhằm áp dụng quy tắc cho toàn bộ các link con. Nhớ thay https://tenmiencuaban.com bằng tên miền website của bạn.

Click vào nút Save and Deploy để hoàn tất.

4. Danh sách các page rule đã tạo sẽ được hiển thị bên dưới. Chúng trông như thế này:

danh-sach-page-rule-trong-cloudflare

Nếu muốn tắt page rule đi, bạn chỉ cần chuyển trạng thái từ On sang Off là được.

5. Quay trở lại website của bạn, truy cập ở chế độ ẩn danh trên trình duyệt (hoặc đăng xuất khỏi tài khoản quản trị). Với trình duyệt Chrome, click chuột phải vào giao diện website, chọn Inspect => chọn tiếp tab Network => load lại website.

kiem-tra-cloudflare-cache-status

Kiểm tra xem đã thấy dòng cf-cache-status: HIT trên Response Headers hay chưa? Nếu rồi thì có nghĩa là bạn đã kích hoạt tính năng cache toàn bộ dữ liệu website trên CloudFlare thành công.

6. Kết nối tài khoản CloudFlare với plugin tạo cache mà bạn đang sử dụng trên website để nó tự động xóa cache khi dữ liệu website thay đổi. Nếu plugin tạo cache của bạn không có tính năng kết nối với CloudFlare, hãy cài thêm plugin CloudFlare được download tại đây.

Tham khảo thêm: Kết nối CloudFlare CDN với plugin LiteSpeed Cache

Xử lý lỗi cache Admin Bar

Khi bạn cache toàn bộ dữ liệu website lên CloudFlare, đồng nghĩa với việc cả Admin Bar (thanh công cụ quản trị) cũng bị cache. Khách truy cập của bạn sẽ nhìn thấy Admin Bar, mặc dù họ không hề đăng nhập tài khoản. Để giải quyết tình trạng này, các bạn có thể làm như sau:

  • Nếu website chỉ có mình bạn được phép đăng nhập, hãy truy cập Users => Profile => Bỏ tick trong mục Show Toolbar when viewing site đi là được.

an-admin-bar-trong-wordpress

  • Nếu website cho phép nhiều người đăng nhập, hãy chèn code sau đây vào file functions.php của theme mà bạn đang sử dụng hoặc chèn thông qua plugin Code Snippets.

Thật đơn giản phải không nào? Chúc các bạn thành công!

WP Căn bản hỗ trợ cài đặt và cấu hình CloudFlare miễn phí cho các khách hàng sử dụng dịch vụ WordPress Hosting của chúng tôi. Thông tin chi tiết vui lòng xem tại đây.

Bạn có đang sử dụng CloudFlare CDN trên website của mình hay không? Bạn đánh giá thế nào về chất lượng của dịch vụ này? Đừng quên chia sẻ với chúng tôi những kinh nghiệm sử dụng CloudFlare của bạn trong khung bình luận bên dưới.

Nếu bạn thích bài viết này, hãy subscribe 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 qua email nhé. Cảm ơn rất nhiều. :)


Bài liên quan