Hướng dẫn tối ưu WordPress với WP Rocket, Cloudflare APO và Cache Rules

WP Rocket kết hợp Cloudflare là combo tăng tốc WordPress phổ biến nhất hiện nay. Bài này mình sẽ hướng dẫn bạn cấu hình từ A-Z, bao gồm cả Cloudflare APO, Cache Rules (thay Page Rules), chọn SSL mode phù hợp, và xử lý các xung đột thường gặp.

WP Rocket là plugin cache trả phí phổ biến nhất cho WordPress. Khi kết hợp với Cloudflare, bạn có thêm một lớp cache tại edge server (hơn 330 điểm trên toàn cầu), giúp giảm tải cho server gốc và tăng tốc đáng kể cho người dùng ở xa.

Điều kiện cần có:

• Đã cài đặt WP Rocket trên website.
• Đã tạo tài khoản Cloudflare và kết nối domain vào Cloudflare (nameserver hoặc CNAME setup).
• Domain đang được proxy qua Cloudflare (icon đám mây cam trong DNS).

Bật Cloudflare addon trong WP Rocket

Trước tiên bạn cần bật addon Cloudflare trong WP Rocket. Truy cập Cài đặt → WP Rocket → Add-ons, kéo xuống phần Rocket Add-ons và bật Cloudflare lên.

Sau khi bật, một tab Cloudflare mới sẽ xuất hiện trong menu WP Rocket. Chuyển sang tab đó để bắt đầu cấu hình.

Tại bảng điều khiển sẽ yêu cầu bạn nhập vào thông tin Global API Key, Email và Zone ID. Để lấy được các thông tin này bạn cần đăng nhập vào Cloudflare, hãy thực hiện theo bước 2 bên dưới.

Lấy thông tin kết nối từ Cloudflare

Lấy Global API Key

Global API Key là khóa API toàn cầu, bạn cần nó để kết nối WP Rocket với Cloudflare. Đăng nhập vào Cloudflare, vào phần My Profile → API Tokens → tìm Global API Key → click View.

Cloudflare sẽ yêu cầu bạn nhập lại password và xác nhận Captcha. Sau đó một chuỗi mã API Key xuất hiện, bạn hãy copy lại để dùng ở bước tiếp theo.

⚠️ WP Rocket yêu cầu Global API Key, không phải API Token. Đây là hai thứ khác nhau. Nếu bạn tạo API Token riêng thì WP Rocket sẽ không nhận. Ngoài ra, bạn có thể lưu API Key vào wp-config.php để bảo mật hơn bằng cách thêm: define('WP_ROCKET_CF_API_KEY', 'your-key');

Lấy Zone ID

Zone ID dùng để xác định domain của bạn trên Cloudflare. Bạn có thể tìm thấy nó ngay tại trang Overview của domain trong Cloudflare Dashboard, ở cột bên phải.

Cấu hình WP Rocket với Cloudflare

Quay lại giao diện cấu hình Cloudflare trong WP Rocket, nhập các thông tin đã lấy ở bước 2 vào 3 ô tương ứng: Global API Key, Account Email, và Zone ID.

Sau đó bạn cần chú ý 3 tùy chọn bên dưới:

• Development Mode: Chỉ bật khi bạn đang chỉnh sửa website và muốn tạm tắt cache Cloudflare. Chế độ này tự động tắt sau 3 giờ.
• Optimal Settings: Nên bật. WP Rocket sẽ tự động thiết lập Caching Level = Standard, tắt Rocket Loader, và đặt Browser Cache TTL = 1 năm trên Cloudflare.
• Relative Protocol: Chỉ bật nếu bạn dùng Flexible SSL của Cloudflare. Nếu đã cài SSL trên server (dùng Full hoặc Full Strict) thì không cần bật.

Cuối cùng, nhấn Save Changes. WP Rocket sẽ xác minh kết nối và áp dụng cấu hình.

Chọn chế độ SSL phù hợp trên Cloudflare

Chế độ SSL trên Cloudflare ảnh hưởng trực tiếp đến cách WP Rocket hoạt động, đặc biệt là tùy chọn Relative Protocol. Cloudflare có 4 chế độ SSL:

• Off: Không mã hóa gì cả. Không nên dùng.
• Flexible: Chỉ mã hóa từ visitor đến Cloudflare, kết nối từ Cloudflare về server vẫn là HTTP. Nếu dùng mode này thì bật Relative Protocol trong WP Rocket.
• Full (nên dùng): Mã hóa cả hai chiều, nhưng không kiểm tra chứng chỉ SSL trên server gốc. Hoạt động ngay cả khi website chỉ có chứng chỉ tự ký trên server.
• Full (Strict): Mã hóa toàn bộ và yêu cầu chứng chỉ SSL hợp lệ trên server. Đây là mode an toàn nhất, nên dùng nếu hosting hỗ trợ.

Tối ưu Cloudflare khi dùng WP Rocket

Sau khi kết nối xong, bạn cần kiểm tra và điều chỉnh một số cài đặt trên Cloudflare Dashboard để tránh xung đột với WP Rocket.

Tắt Rocket Loader

Rocket Loader của Cloudflare sẽ defer tất cả JavaScript trên trang. Chỗ này dễ xung đột với tính năng tối ưu JS (Delay/Defer) của WP Rocket, gây ra lỗi JavaScript hoặc trang load sai thứ tự. Nếu bạn bật Optimal Settings trong WP Rocket thì nó sẽ tự tắt Rocket Loader, nhưng bạn nên kiểm tra lại trong Cloudflare Dashboard → Speed → Optimization → Content Optimization.

Xử lý trùng lặp Minification

Cả WP Rocket và Cloudflare đều có tính năng minify CSS/JS/HTML. Dùng cả hai cùng lúc không hẳn gây lỗi, nhưng cũng chẳng nhanh hơn mà đôi khi còn phá layout. Nguyên tắc đơn giản: chọn một trong hai.

Mình khuyên dùng minification của WP Rocket vì nó xử lý ở server level, cho phép combine files và có nhiều tùy chọn hơn (exclude file, delay JS). Tắt Auto Minify trong Cloudflare Dashboard → Speed → Optimization.

Browser Cache TTL

WP Rocket thiết lập browser cache TTL qua header Cache-Control và Expires trong file .htaccess. Phía Cloudflare cũng có cài đặt Browser Cache TTL riêng. Để hai bên không đá nhau, chọn một trong hai cách:

• Cách 1: Để Cloudflare Browser Cache TTL = “Respect Existing Headers”, cho WP Rocket kiểm soát hoàn toàn.
• Cách 2: Đặt Browser Cache TTL trên Cloudflare (ví dụ 1 tháng), Cloudflare sẽ override header từ server.

Cả hai cách đều OK, quan trọng là phải nhất quán. Khi bật Optimal Settings trong WP Rocket, nó sẽ tự đặt Browser Cache TTL = 1 năm trên Cloudflare.

Cloudflare APO cho WordPress

Cloudflare APO (Automatic Platform Optimization) là tính năng dành riêng cho WordPress, hoạt động dựa trên Cloudflare Workers để cache toàn bộ trang HTML tại edge server. Nôm na là thay vì chỉ cache file tĩnh (CSS, JS, ảnh) như mặc định, APO cache luôn cả nội dung HTML của bài viết, trang chủ, category.

Kết quả là khi visitor truy cập, Cloudflare trả về trang HTML đã cache sẵn mà không cần request về server gốc. Theo thống kê của Cloudflare, APO giảm TTFB (Time to First Byte) lên đến 72% và cải thiện FCP (First Contentful Paint) khoảng 23%.

Chi phí APO

• Gói Free Cloudflare: $5/tháng (add-on).
• Gói Pro trở lên: Miễn phí, đã bao gồm trong gói.

Nếu bạn đang dùng gói Free và muốn thử APO, $5/tháng là mức chi phí khá thấp so với hiệu quả mang lại.

Cách bật APO

Để bật APO, bạn cần làm 2 việc:

1. Trong Cloudflare Dashboard → Speed → Optimization → bật Automatic Platform Optimization.
2. Cài plugin Cloudflare (plugin chính thức) trong WordPress, đăng nhập tài khoản Cloudflare trong plugin và bật APO.

ℹ️ Plugin Cloudflare cho WordPress là bắt buộc khi dùng APO. Plugin này đảm nhận việc tự động purge cache khi bạn publish hoặc update bài viết. Nếu không cài plugin, APO vẫn cache nhưng sẽ không tự purge khi nội dung thay đổi.

Cache By Device Type

APO có tùy chọn Cache By Device Type để phục vụ phiên bản cache khác nhau cho mobile, tablet và desktop. Cloudflare dựa vào header User-Agent để phân loại thiết bị và gửi header CF-Device-Type về server gốc.

Bạn cần bật tính năng này nếu:

• Website dùng theme/plugin hiển thị khác nhau giữa mobile và desktop (không phải responsive design).
• WP Rocket đang bật tính năng tạo cache riêng cho mobile.

Nếu website dùng responsive design (cùng HTML, CSS điều chỉnh theo màn hình) thì không cần bật. Lưu ý rằng khi thay đổi cài đặt Cache By Device Type, toàn bộ cache sẽ bị xóa.

APO tự động bypass cookie nào?

APO thông minh ở chỗ nó tự nhận biết các cookie WordPress và WooCommerce để bypass cache khi cần. Cụ thể, các cookie có prefix sau sẽ khiến APO bỏ qua cache và request thẳng về server:

• wp- và wordpress (đăng nhập admin, comment)
• comment_ (comment form)
• woocommerce_ (giỏ hàng, checkout, tài khoản)
• edd_, jetpack, wpsc_, ecwid, bookly

Nên bạn không cần lo về việc trang admin hay giỏ hàng WooCommerce bị cache. APO xử lý tự động hết.

APO và query string

Mặc định, APO sẽ bypass cache khi URL có query string (ví dụ ?s=keyword). Tuy nhiên có một số query string phổ biến cho tracking/analytics thì APO vẫn phục vụ từ cache bình thường:

• utm_source, utm_medium, utm_campaign, utm_term, utm_content
• fbclid, gclid, dclid, _ga
• ref, mc_cid, mc_eid, mkt_tok

Hiểu nhanh thì các link UTM từ quảng cáo, email marketing vẫn được phục vụ từ cache, không ảnh hưởng performance.

WP Rocket + APO: Dùng cả hai có xung đột không?

Câu trả lời ngắn: không xung đột. WP Rocket và Cloudflare APO hoạt động ở hai tầng khác nhau. WP Rocket tạo cache HTML ở server level, còn APO cache ở edge level (Cloudflare CDN). Hai lớp cache này bổ trợ cho nhau.

Ở đây có vài điểm bạn cần biết khi dùng cả hai:

Plugin Cloudflare thay thế addon WP Rocket

Khi bạn cài plugin Cloudflare (bắt buộc cho APO), addon Cloudflare trong WP Rocket sẽ tự động bị mờ đi (dimmed). Lúc này plugin Cloudflare đảm nhận việc kết nối API và purge cache, WP Rocket không cần addon Cloudflare nữa.

Cơ chế purge cache

• Khi WP Rocket xóa toàn bộ cache: Cache APO của cả site cũng bị purge theo, bao gồm cả JS/CSS trên Cloudflare.
• Khi WP Rocket xóa cache một bài cụ thể: URL của bài đó được purge trên Cloudflare (trừ trang archive theo ngày và taxonomy).
• Khi nhấn “Purge Everything” trong plugin Cloudflare: Chỉ xóa cache trên Cloudflare, không ảnh hưởng cache WP Rocket trên server.

Cache preloading

WP Rocket có tính năng Preload để crawl và tạo sẵn cache cho tất cả URL. Tính năng này vẫn hoạt động khi dùng APO, nhưng có một điểm cần lưu ý: các trang được preload bởi WP Rocket sẽ không có header Cf-Edge-Cache, nghĩa là chúng chưa được cache ở edge Cloudflare. Cache ở edge chỉ được tạo khi có visitor thật truy cập lần đầu.

💡 Preload của WP Rocket vẫn có ích vì nó đảm bảo cache ở server level luôn sẵn sàng. Khi visitor đầu tiên truy cập, WP Rocket trả về trang đã cache (nhanh), đồng thời Cloudflare APO lưu lại bản cache ở edge cho các visitor tiếp theo (nhanh hơn nữa).

Khi nào dùng WP Rocket + APO, khi nào chỉ cần một trong hai?

• Dùng cả hai (khuyến nghị): WP Rocket lo minify CSS/JS, lazy load, preload, database optimize. APO lo cache HTML ở edge. Đây là combo mạnh nhất.
• Chỉ dùng APO (không plugin cache): Phù hợp với blog đơn giản, không cần minify hay lazy load. APO vẫn cache HTML ở edge nhưng bạn mất các tính năng tối ưu khác.
• Chỉ dùng WP Rocket (không APO): Vẫn tốt, nhưng HTML không được cache ở edge Cloudflare. Phù hợp nếu bạn không muốn trả thêm $5/tháng hoặc server đã đủ nhanh.

Cache Rules cho WordPress (thay Page Rules)

Cloudflare đã chính thức ngừng phát triển Page Rules và khuyến khích chuyển sang Cache Rules. Giao diện mới linh hoạt hơn nhiều, cho phép tạo nhiều rule hơn (Free: 10 rules, Pro: 25, Business: 50) và có expression builder trực quan.

Nếu bạn đã dùng APO thì thường không cần tạo Cache Rules cho HTML vì APO đã lo việc đó. Tuy nhiên, Cache Rules vẫn hữu ích để bypass cache cho các trang đặc biệt hoặc tùy chỉnh Edge TTL, Browser TTL cho file tĩnh.

⚠️ Nếu bạn đang dùng Page Rules cũ: Cloudflare khuyến cáo chuyển sang Cache Rules. Khi migrate, bạn cần tạo 2 rule theo đúng thứ tự: (1) rule bypass cho những gì không muốn cache, (2) rule cache cho các file extension mặc định. Thứ tự rất quan trọng vì Cache Rules xử lý từ trên xuống, rule đầu tiên khớp sẽ được áp dụng.

Khác biệt giữa Cache Rules và Page Rules

Trước khi tạo rule, bạn cần hiểu một số thay đổi quan trọng trong Cache Rules so với Page Rules cũ:

• Thuật ngữ mới: Thay vì “Cache Level: Cache Everything” như Page Rules, Cache Rules dùng Cache eligibility với hai lựa chọn: Bypass cache (không cache) hoặc Eligible for cache (cho phép cache).
• “Eligible for cache” khác “Cache Everything”: Khi chọn Eligible for cache, Cloudflare sẽ xem xét nội dung có nên cache hay không dựa trên các yếu tố như Content-Type, Cache-Control header từ origin. Muốn đảm bảo HTML cũng được cache, bạn cần cấu hình thêm Edge TTL (override origin) để ép Cloudflare cache nội dung trong thời gian cụ thể.
• Expression builder: Cache Rules dùng expression syntax thay vì URL pattern đơn giản. Ví dụ: (http.request.uri.path contains "/wp-admin") thay cho *domain.com/wp-admin*.
• Nhiều cài đặt hơn: Ngoài cache eligibility, bạn có thể tùy chỉnh Edge TTL, Browser TTL, Cache Key, và bật Cache Reserve trong cùng một rule.

Tạo Cache Rule từ template

Vào Cloudflare Dashboard → Caching → Cache Rules → Create Rule. Cloudflare cung cấp sẵn 3 template:

• Cache everything: Đánh dấu tất cả request là eligible for cache, kể cả HTML.
• Bypass cache for everything: Tắt cache hoàn toàn cho request khớp điều kiện.
• Cache default file extensions: Chỉ cache các file tĩnh mặc định (CSS, JS, ảnh, font…). Đây là hành vi tương đương mặc định của Cloudflare.

Với WordPress, mình khuyên tạo custom rule thay vì dùng template để kiểm soát chính xác hơn.

Rule 1: Bypass cache cho wp-admin và wp-login

Rule này đảm bảo trang quản trị và đăng nhập WordPress không bị cache. Đặt rule này ở thứ tự ưu tiên cao nhất (đầu tiên trong danh sách).

Cấu hình cụ thể:

• Rule name: Bypass WP Admin
• When incoming requests match: Custom filter expression
• Field: URI Path → Operator: contains → Value: /wp-admin
• Nhấn Or để thêm điều kiện: URI Path contains /wp-login
• Cache eligibility: Bypass cache

Nếu bạn chạy WooCommerce, thêm các path sau vào điều kiện Or: /cart, /checkout, /my-account.

Expression preview sẽ trông như thế này:

(http.request.uri.path contains "/wp-admin") or (http.request.uri.path contains "/wp-login") or (http.request.uri.path contains "/wp-json")

Rule 2: Cache file tĩnh hoặc toàn bộ site

Rule này đặt sau rule bypass (thứ tự ưu tiên thấp hơn). Bạn có hai lựa chọn tuỳ tình huống:

Lựa chọn A: Cache toàn bộ site (khi không dùng APO)

Nếu bạn không dùng APO và muốn Cloudflare cache luôn cả HTML:

• Rule name: Cache All Content
• When incoming requests match: Custom filter expression
• Field: Hostname → Operator: equals → Value: yourdomain.com
• Cache eligibility: Eligible for cache
• Edge TTL: Override origin → 2 giờ (7200 giây)
• Browser TTL: Override origin → 10 phút (600 giây)

⚠️ Khi chọn Eligible for cache, bạn cần đặt Edge TTL (override origin) để Cloudflare thực sự cache HTML. Nếu không đặt Edge TTL, Cloudflare sẽ tôn trọng Cache-Control header từ server, mà đa số WordPress server gửi no-cache cho HTML. Đây là khác biệt lớn so với “Cache Everything” của Page Rules cũ vốn bỏ qua header origin.

Lựa chọn B: Chỉ cache file tĩnh (khi đã dùng APO)

Nếu đã bật APO, bạn không cần cache HTML qua Cache Rules. Chỉ cần tối ưu TTL cho static assets:

• Rule name: Cache Static Assets
• When incoming requests match: Custom filter expression
• Cache eligibility: Eligible for cache
• Edge TTL: Override origin → 1 tháng
• Browser TTL: Override origin → 1 tuần

Expression cho rule cache file tĩnh:

(http.request.uri.path.extension in {"css" "js" "png" "jpg" "jpeg" "gif" "webp" "avif" "svg" "ico" "woff" "woff2" "ttf" "eot" "otf"})

ℹ️ Nếu bạn đã bật APO thì không cần tạo rule cache HTML. APO đã xử lý việc này tốt hơn, bao gồm cả auto-purge khi update bài. Cache Rules trong trường hợp này chỉ cần rule bypass cho wp-admin và tùy chỉnh TTL cho static assets nếu muốn.

Edge TTL và Browser TTL trong Cache Rules

Hai cài đặt TTL trong Cache Rules giúp bạn kiểm soát chính xác thời gian cache:

• Edge TTL: Thời gian Cloudflare giữ bản cache tại edge server. Khi hết hạn, Cloudflare sẽ request lại về server gốc. Chọn “Override origin” nếu muốn bỏ qua Cache-Control header từ server. Với HTML, đặt khoảng 2-4 giờ. Với static assets (CSS, JS, ảnh), có thể đặt 1 tháng hoặc hơn.
• Browser TTL: Thời gian trình duyệt giữ bản cache ở local. Đặt ngắn hơn Edge TTL, ví dụ 10 phút cho HTML, 1 tuần cho static assets. Nếu đặt quá dài, người dùng sẽ thấy nội dung cũ ngay cả khi bạn đã purge cache trên Cloudflare.

💡 Nguyên tắc chung: Edge TTL nên dài hơn Browser TTL. Edge cache purge được (từ dashboard hoặc API), còn browser cache thì phải chờ hết hạn hoặc người dùng tự clear.

Xử lý sự cố thường gặp

Dưới đây là một số vấn đề mình thường gặp khi cấu hình WP Rocket + Cloudflare và cách giải quyết.

Trang hiển thị nội dung cũ sau khi update

Nguyên nhân thường là cache chưa được purge đồng bộ. Thử các bước sau:

1. Xóa cache WP Rocket (WP Rocket → Clear Cache).
2. Xóa cache Cloudflare (trong WP Rocket → Cloudflare → Clear All Cloudflare Cache Files, hoặc trong Cloudflare Dashboard → Caching → Purge Everything).
3. Nếu dùng APO, nhấn “Purge Everything” trong plugin Cloudflare trên WordPress.
4. Kiểm tra bằng cửa sổ ẩn danh hoặc curl -I yourdomain.com.

JavaScript bị lỗi, layout vỡ

Hầu hết do xung đột giữa Rocket Loader và WP Rocket JS optimization. Kiểm tra:

• Rocket Loader đã tắt chưa? (Cloudflare → Speed → Optimization → Content Optimization)
• Auto Minify của Cloudflare đã tắt chưa? (nếu dùng minify của WP Rocket)
• Thử tắt Delay JavaScript Execution trong WP Rocket để test.

Redirect loop (ERR_TOO_MANY_REDIRECTS)

Lỗi này thường xảy ra khi SSL mode trên Cloudflare không khớp với cấu hình server. Nếu server có SSL (HTTPS) mà Cloudflare đang để Flexible, WordPress sẽ redirect liên tục giữa HTTP và HTTPS. Giải pháp: chuyển SSL mode sang Full hoặc Full (Strict).

WP Rocket không kết nối được API Cloudflare

Kiểm tra lại:

• Đã dùng Global API Key chứ không phải API Token.
• Email đúng là email đăng ký Cloudflare.
• Zone ID đúng (copy từ trang Overview của domain).
• Server có thể kết nối ra ngoài (firewall không chặn api.cloudflare.com).

Kiểm tra cache hoạt động đúng

Sau khi cấu hình xong, bạn nên kiểm tra xem cache có hoạt động đúng không. Cách đơn giản nhất là dùng curl hoặc kiểm tra response header trong DevTools (F12) của trình duyệt.

curl -I https://yourdomain.com

Các header cần chú ý:

• cf-cache-status: HIT → Trang đã được cache bởi Cloudflare. Lần request đầu tiên sẽ là MISS, từ lần thứ 2 sẽ là HIT.
• cf-cache-status: DYNAMIC → Trang không được cache (mặc định cho HTML nếu chưa cấu hình Cache Rules hoặc APO).
• cf-cache-status: BYPASS → Trang bị bypass theo Cache Rules bạn đã tạo.
• cf-apo-via: tcache → Trang được phục vụ từ APO edge cache (chỉ khi dùng APO).
• age: 3600 → Số giây kể từ khi bản cache được lưu.

Bạn cũng có thể theo dõi tổng quan cache trong Cloudflare Dashboard → Caching → Overview. Mục tiêu là tỷ lệ HIT càng cao càng tốt, DYNAMIC và MISS càng thấp càng tốt.

💡 Khi test, nhớ dùng cửa sổ ẩn danh hoặc clear browser cache để tránh nhận kết quả từ browser cache. Truy cập 2-3 lần liên tiếp, lần đầu sẽ là MISS, các lần sau phải là HIT.

Tổng kết

Kết hợp WP Rocket + Cloudflare cho WordPress không quá phức tạp, nhưng cần hiểu rõ mỗi phần làm gì để tránh cấu hình trùng lặp hoặc xung đột. Mình tóm tắt lại những điểm chính:

• Cấu hình cơ bản: Bật Cloudflare addon trong WP Rocket, nhập Global API Key + Zone ID, bật Optimal Settings.
• SSL: Dùng Full hoặc Full (Strict). Chỉ bật Relative Protocol nếu dùng Flexible SSL.
• Tránh xung đột: Tắt Rocket Loader, chọn một bên để minify (WP Rocket hoặc Cloudflare, không cả hai).
• APO: Nếu ngân sách cho phép ($5/tháng với gói Free), bật APO + cài plugin Cloudflare. Đây là cách hiệu quả nhất để cache HTML ở edge.
• Cache Rules: Dùng thay Page Rules (đã deprecated). Tối thiểu cần 1 rule bypass cho wp-admin. Nếu không dùng APO, thêm rule Eligible for cache với Edge TTL cho HTML. Nhớ rằng “Eligible for cache” cần kèm Edge TTL override mới thực sự cache HTML.
• Kiểm tra: Dùng curl -I để verify header cf-cache-status và cf-apo-via.

Combo tốt nhất cho đa số WordPress site: WP Rocket + Cloudflare APO + Cache Rules bypass wp-admin. WP Rocket lo tối ưu server-side (minify, lazy load, preload, database), APO lo cache edge, Cache Rules đảm bảo admin không bị cache. Ba lớp bảo vệ, mỗi lớp một việc.