WP Rocket + Cloudflare: Panduan Setup CDN Lengkap

WP Rocket + Cloudflare adalah dua tools yang paling sering dipasang bersamaan di WordPress. WP Rocket menangani caching dan optimasi file di level server. Cloudflare menangani CDN, SSL, dan edge caching. Ketika dikonfigurasi dengan benar, kombinasi ini bisa menurunkan TTFB secara signifikan — dari ratusan milidetik menjadi di bawah 100ms untuk cached pages.

Masalahnya, sebagian besar website punya konfigurasi yang saling tumpang tindih. Kedua tools mencoba melakukan hal yang sama: caching halaman, minifikasi CSS/JS, dan mengatur browser cache headers. Akibatnya: double caching, konten usang, dan konflik rendering.

Panduan ini menjelaskan cara mengkonfigurasi WP Rocket dan Cloudflare agar saling melengkapi, bukan saling konflik. Setiap langkah berdasarkan dokumentasi resmi WP Rocket dan best practice dari benchmark nyata.

Kenapa WP Rocket dan Cloudflare Sering Konflik?

WP Rocket dan Cloudflare punya fitur yang overlap di tiga area:

• Page caching — WP Rocket menyimpan HTML statis di server. Cloudflare juga bisa menyimpan HTML di edge. Jika keduanya aktif tanpa koordinasi, visitor bisa dapat versi usang.
• Minifikasi CSS/JS — WP Rocket bisa minify file. Cloudflare juga punya Auto Minify. Menjalankan keduanya sekaligus bisa merusak rendering.
• Browser cache headers — WP Rocket mengatur cache headers per file type. Cloudflare bisa override dengan Browser Cache TTL. Jika Cloudflare override, kontrol WP Rocket jadi sia-sia.

Menurut audit yang dilakukan TurboPress terhadap 50+ website WordPress, hampir semua punya minimal satu kesalahan konfigurasi antara WP Rocket dan Cloudflare. Masalah paling umum: page caching berjalan di kedua tools sekaligus.

Langkah 1: Hubungkan WP Rocket ke Cloudflare

Sebelum mengubah setting apapun, hubungkan kedua sistem agar bisa berkomunikasi. Ini langkah paling penting dan paling sering dilewati.

Di WordPress admin, buka WP Rocket > Add-ons atau WP Rocket > Cloudflare (tergantung versi). Masukkan:

• Cloudflare account email — email yang dipakai login ke Cloudflare
• Global API Key — ditemukan di Cloudflare dashboard > My Profile > API Tokens > Global API Key

WP Rocket perlu Global API Key, bukan scoped API token. Ini keterbatasan integrasi WP Rocket, bukan masalah Cloudflare.

Kenapa ini penting? Ketika WP Rocket purge cache (setelah update post, ganti tema, atau manual purge), ia juga akan purge halaman yang sama dari Cloudflare. Tanpa koneksi ini, WP Rocket sudah clear cache tapi Cloudflare tetap serve versi lama ke visitor.

Langkah 2: Setting WP Rocket (Sisi Server)

Konfigurasi WP Rocket untuk menangani optimasi di level server. Biarkan Cloudflare menangani delivery.

Cache

• Enable caching for mobile devices: ON
• Separate cache files for mobile devices: OFF (kecuali tema mobile benar-benar berbeda dari desktop)
• Cache lifespan: 10 jam (default, cukup untuk sebagian besar website)

File Optimization

• Minify CSS: ON
• Combine CSS: OFF (HTTP/2 multiplexing lebih efisien dari file terpisah)
• Optimize CSS delivery: ON (generate critical CSS, defer sisanya)
• Minify JavaScript: ON
• Combine JavaScript: OFF (alasan sama dengan CSS)
• Defer JavaScript: ON (Safe Mode dulu, test dulu sebelum lanjut)

Penting: Minifikasi hanya dijalankan di SATU tempat. WP Rocket handle di sini. Matikan Auto Minify di Cloudflare.

Media

• LazyLoad images: ON
• LazyLoad iframes/videos: ON
• Add missing image dimensions: ON (mencegah Cumulative Layout Shift)

Preloading

• Activate Preloading: ON
• Sitemap-based cache preloading: ON
• Preload links: ON (visitor hover ke link, halaman target sudah di-preload)

Untuk panduan lengkap setting per tab, baca Checklist Setup WP Rocket.

Langkah 3: Setting Cloudflare (Sisi CDN)

Login ke Cloudflare dashboard dan pilih domain Anda.

SSL/TLS

• SSL mode: Full (Strict)
• Always Use HTTPS: ON
• Automatic HTTPS Rewrites: ON

Speed > Optimization

Setting	Value	Alasan
Auto Minify (CSS/JS/HTML)	OFF (ketiganya)	WP Rocket sudah handle. Double minifikasi bisa merusak rendering.
Brotli	ON	Kompresi di edge, 15-20% lebih baik dari gzip. Tidak konflik.
Early Hints	ON	Cloudflare kirim 103 Early Hints untuk mulai load critical assets sebelum HTML tiba.
Rocket Loader	OFF	Cloudflare punya JS deferral system. Sudah dihandle WP Rocket. Rocket Loader sering bikin blank page dan menu rusak.

Caching > Configuration

• Caching Level: Standard
• Browser Cache TTL: Respect Existing Headers (biarkan WP Rocket kontrol)

Caching > Tiered Cache

• Tiered Cache Topology: ON (Smart) — route cache misses melalui data center upper-tier sebelum ke origin server.

Langkah 4: Cloudflare Page Rules (Tanpa APO)

Jika tidak pakai APO, butuh page rules untuk mencegah Cloudflare cache halaman dinamis. Free plan dapat 3 page rules:

Rule 1: Bypass cache untuk wp-admin

• URL: *yourdomain.com/wp-admin*
• Setting: Cache Level > Bypass

Rule 2: Bypass cache untuk wp-login

• URL: *yourdomain.com/wp-login.php*
• Setting: Cache Level > Bypass

Rule 3: Bypass cache untuk WooCommerce

• URL: *yourdomain.com/cart*, *checkout*, *my-account*
• Setting: Cache Level > Bypass

JANGAN buat page rule "Cache Everything" untuk seluruh domain. Ini kesalahan paling umum. Efeknya: visitor lain bisa melihat isi cart orang lain.

Langkah 5: Cloudflare APO (Upgrade Performa Terbesar)

Cloudflare APO (Automatic Platform Optimization) adalah upgrade performa terbesar untuk WordPress, dengan biaya $5/bulan.

Apa yang Dilakukan APO?

Tanpa APO, Cloudflare hanya cache static assets (gambar, CSS, JS, font). HTML halaman tetap di-fetch dari origin server setiap request.

Dengan APO, Cloudflare cache HTML halaman di edge. Visitor di Singapore yang mengakses server di Amsterdam tidak perlu menunggu round trip — Cloudflare serve halaman lengkap dari data center terdekat.

TTFB Benchmark: Dengan vs Tanpa APO

Kondisi	TTFB (visitor Singapore, server Amsterdam)
Tanpa Cloudflare	600-1200ms
Cloudflare free (static only)	600-1200ms (HTML masih dari origin)
Cloudflare + APO	30-80ms (HTML dari edge)

Sumber: TurboPress benchmark, Maret 2026. Hasil bervariasi tergantung hosting dan lokasi server.

Cara Enable APO

1. Di Cloudflare dashboard: Speed > Optimization > Cloudflare APO, enable ($5/bulan, gratis untuk Pro+)
2. Di WordPress: install plugin Cloudflare resmi (bukan plugin third-party)
3. Di setting Cloudflare plugin: masukkan API credentials dan enable APO

Bagaimana APO + WP Rocket Bekerja Bersama?

Ini bukan "double caching" yang konflik. Ini layer caching yang saling melengkapi:

1. WP Rocket generate cached HTML di server
2. Cloudflare APO copy cached HTML ke edge data centers worldwide
3. Visitor berikutnya dapat halaman dari edge (server tidak di-hit)
4. Ketika update halaman, WP Rocket purge cache DAN beritahu Cloudflare untuk purge juga

WP Rocket generate halaman yang teroptimasi. Cloudflare distribusikan secara global. Masing-masing tools melakukan tugasnya sendiri.

Langkah 6: Verifikasi Konfigurasi

Setelah semua setting, verifikasi dengan cara berikut:

Check Response Headers

Buka browser developer tools (F12), tab Network, load homepage. Cek response headers:

• cf-cache-status: HIT — Cloudflare serve dari cache ✅
• cf-cache-status: DYNAMIC — Cloudflare fetch dari server (normal untuk logged-in pages)
• cf-cache-status: BYPASS — Cloudflare skip caching (normal untuk wp-admin)
• cf-apo-via: tcache — APO serve dari edge cache ✅

Load halaman yang sama dua kali. Jika pertama MISS dan kedua HIT, caching bekerja dengan benar.

Test Cache Purging

1. Edit halaman/post di WordPress
2. Klik Update
3. Buka halaman di incognito window
4. Verifikasi konten sudah ter-update

Jika konten lama masih muncul, koneksi purge antara WP Rocket dan Cloudflare tidak bekerja. Cek ulang API key di Step 1.

Kesalahan Umum dan Solusinya

Cache Stampede Setelah Purge

Ketika cache di-purge, setiap request berikutnya langsung ke origin server. Di shared hosting, ini bisa bikin server crash.

Solusi: Pastikan preloading aktif di WP Rocket. Setelah purge, WP Rocket otomatis crawl sitemap dan regenerate cached pages.

JavaScript Rusak Setelah Enable Defer

Beberapa plugin WordPress mengasumsikan JavaScript langsung berjalan saat page load. Deferring mengubah urutan eksekusi, yang bisa merusak slider, form, dan menu.

Solusi: Di WP Rocket File Optimization, tambahkan script yang bermasalah ke "Exclude from Defer". Script umum yang perlu di-exclude:

• jQuery (/wp-includes/js/jquery/jquery.min.js)
• Slider plugins
• Form plugins (Gravity Forms, WPForms)

Mixed Content Warning Setelah Enable Full (Strict) SSL

Jika website load beberapa resource via HTTP bukan HTTPS, browser akan block. Biasanya karena hardcoded http:// URL di database.

Solusi: Enable "Automatic HTTPS Rewrites" di Cloudflare. Untuk masalah persisten, jalankan search-replace di database untuk ganti http:// ke https://.

Ringkasan: Checklist Lengkap

WP Rocket

Setting	Value
Mobile caching	ON
Cache lifespan	10 hours
Minify CSS	ON
Combine CSS	OFF
Optimize CSS delivery	ON
Minify JS	ON
Combine JS	OFF
Defer JS	ON
LazyLoad images	ON
Preloading	ON
Cloudflare API connected	YES

Cloudflare

Setting	Value
SSL mode	Full (Strict)
Auto Minify (CSS/JS/HTML)	OFF (ketiganya)
Brotli	ON
Rocket Loader	OFF
Early Hints	ON
Browser Cache TTL	Respect Existing Headers
Tiered Cache	Smart
APO	ON ($5/bulan)

Pengalaman yang Sering Kami Temui

Selama membantu setup WP Rocket + Cloudflare untuk berbagai klien, kami sering menemukan kasus berikut:

• Rocket Loader aktif — menyebabkan blank page di Elementor dan form tidak berfungsi. Solusi: matikan Rocket Loader.
• Auto Minify aktif di Cloudflare DAN WP Rocket — CSS pecah, layout berantakan. Solusi: pilih satu (WP Rocket).
• Cache purge tidak sinkron — update konten tapi visitor masih lihat versi lama. Solusi: hubungkan Global API Key.
• APO tidak sinkron dengan WP Rocket preload — halaman preloaded tidak punya Cf-Edge-Cache header. Ini normal, tidak ada issue yang dilaporkan.

Artikel Terkait

• Cara Setting WP Rocket Optimal — panduan lengkap setting per tab
• WP Rocket Error: 10 Masalah Umum — troubleshooting jika ada masalah
• WP Rocket vs LiteSpeed Cache — perbandingan dengan plugin cache lain
• Harga WP Rocket Indonesia — paket dan lisensi terbaru
• Checklist Setup WP Rocket — panduan tab per tab

FAQ

Apakah saya butuh WP Rocket DAN Cloudflare, atau cukup salah satu?

Keduanya menyelesaikan masalah berbeda. WP Rocket handle caching dan optimasi file di server. Cloudflare handle CDN, SSL, dan edge caching. Kombinasi keduanya dengan konfigurasi yang benar memberikan hasil lebih baik dari salah satu saja.

Apakah Cloudflare APO worth $5/bulan?

Untuk website yang visitor-nya tersebar global, APO adalah upgrade terbesar dari sisi TTFB. Tanpa APO, setiap request HTML harus ke origin server. Dengan APO, HTML di-serve dari edge terdekat. Perbedaan TTFB bisa dari 800ms ke di bawah 100ms.

Apakah konfigurasi ini work untuk WooCommerce?

Work, tapi butuh page rules tambahan untuk bypass cache di halaman cart, checkout, dan my-account. Atau pakai APO yang otomatis skip caching untuk halaman dengan WooCommerce cookies.

Kenapa visitor masih lihat konten lama setelah saya update?

Kemungkinan koneksi purge antara WP Rocket dan Cloudflare tidak aktif. Cek apakah Global API Key sudah dimasukkan dengan benar di WP Rocket > Add-ons > Cloudflare.

Apakah Rocket Loader harus dimatikan?

Ya. Rocket Loader adalah sistem deferral JavaScript dari Cloudflare. WP Rocket sudah handle JS deferral. Menjalankan keduanya sekaligus sering menyebabkan blank page, form rusak, dan menu tidak berfungsi.

Haruskah saya mengaktifkan "Combine CSS" atau "Combine JavaScript" di WP Rocket?

Tidak. Menggabungkan file CSS/JS memecah HTTP/2 multiplexing dan bisa menyebabkan render-blocking issues. Browser modern lebih efisien menangani banyak file kecil dari satu file besar.