Làm thế nào để 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.
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.
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.
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/*
- Dành cho
https://tenmiencuaban.com/wp-login*
- Dành cho
https://tenmiencuaban.com/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:
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.
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.
- Nếu website cho phép nhiều người đăng nhập, hãy chèn code sau đây vào file
functions.phpcủ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!
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. :)
Của mình bị lỗi 520 là sao bạn :(, mình kiểm tra thấy dung lượng web vẫn còn trống nhiều, bandwith thì không giới hạn, server thì vẫn hoạt động bình thường, nhưng khi kết nối với cloudflare là liên tục bị lỗi 520
Nhiều khả năng host của bạn chặn kết nối với CloudFlare rồi, tắt CDN đi thôi. :P
Anh cho em hỏi em làm theo anh sau khi đăng nhập vào wp thì bắt bật cookie trình duyệt thì có làm sao k ạ
Thế bình thường bạn không bật tính năng cookie của trình duyệt web à? :)
Em có. Em làm theo anh thì đăng nhập wp hỏi bật cookie lên
Vơi anh có hướng dẫn nào về phân phối hình ảnh ở định dạng mới và hiệu quả hơn không. Dù em đã nén ảnh bằng tay nhưng pagespeed vẫn báo và
đảm bảo văn bản vẫn hiển thị trong khi tải phông chữ web :)))
Cái này là vấn đề liên quan đến font chữ hoặc font icon chứ đâu phải là hình ảnh đâu bạn. :P
Mình làm y như vậy thì lần đầu tiên mở trang web nó báo làL cf-cache-status: MISS. Phải mở lại lần 2 thì mới cf-cache-status: HIT. Như vậy thì nó sử dụng chức năng cached của trình duyệt thôi chứ đâu có liên quan gì tới cloudflare đâu
Rồi vì dụ mình mở page thứ 2 đi, thì những hình ảnh như LOGO các thứ nó vẫn báo là MISS mới chán chứ, tức là ko cached đươc gì luôn
Còn chưa nói đến việc làm sao biết nó cached trên host của cloudflare ko hay vẫn load từ server của mình nữa
Bạn hiểu sai vấn đề rồi. Cache của CloudFlare cũng giống như cache của các plugin tạo cache. Nghĩa là cần phải có người truy cập lần đầu tiên thì dữ liệu mới được cache. Những người truy cập tiếp theo thì đã có cache sẵn rồi.
Đã làm thành công , thanks tác giả ạ, nhưng có một nhược điểm là nó không cache riêng cho dữ liệu trên mobile, trước đó thì plugin cache có hỗ trợ. Nhưng cũng đành chấp nhận vậy :D
Nếu bạn muốn cache giao diện riêng cho mobile thì đăng ký CloudFlare Automatic Platform Optimization (giá $5/tháng) nhé. :)
Hiếu ơi. Làm cách này rất bất tiện khi cần sửa lại bài viết. Phải purge cache nó mới hiện. Chưa kể brower của người xem vẫn là page cũ. Mình thay dommain . Com/wp-content/upload* được ko? Mục đích để nó chỉ cache ảnh trên bài viết thôi
Không được đâu bạn. Cache ở đây là cache HTML. Nếu bạn muốn đơn giản hơn thì có thể chấp nhận bỏ $5/tháng để dùng CloudFlare Automatic Platform Optimization.
Bạn nói CF nó cache các file tĩnh như css js và hình ảnh. Hình ảnh ở đây là các hình trong bài viết page and post phải ko ạ
Đúng rồi bạn. File tĩnh thì được cache theo mặc định rồi.
Cái này mình chưa thấy ai phân tích kỹ Hiếu ơi
Browser Cache TTL
Mình đọc cả tiếng Anh cũng ko nói rõ. Kể cả forum của CF. Theo Hiếu nên để vài tiếng, 1-2 ngày hay vài tháng. Mình lăn tăn cái này 1 tuần nay. Nếu set lâu thì trình duyệt người dùng vẫn giữ bản cũ dù web đã thay đổi. Còn set vài giờ vài ngày thì cache nhanh hết hiệu lưc. Khách vào lại lại như mới. Set lâu: gg sẽ ko cập nhật vì cho là web chết
Ý bạn hỏi Browser Cache TTL ở đâu nhỉ? Nếu là trong Caching => Configuration => Browser Cache TTL thì mình để tối đa 1 năm luôn nhé. Cái này là cache dữ liệu tĩnh trên trình duyệt web của người dùng thôi, không phải cache toàn bộ website. Còn nếu bạn hỏi Browser Cache TTL của tính năng cache toàn bộ website (như trong bài hướng dẫn bên trên) thì để tầm 1 giờ.