Cloudflare - Cara optimisasi review dan perbandingan performa
Cloudflare - Cara optimisasi review dan perbandingan performa

Cloudflare: Cara optimisasi, review & perbandingan performa

Cloudflare adalah sebuah layanan infrastruktur dan keamanan website/internet. Cloudflare mempunyai data center yang tersebar di 100 negara. Jaringan server Cloudflare dimanfaatkan untuk memberikan konten dan data internet yang lebih cepat, karena lebih dekat dengan pengunjung. Selain itu juga Cloudflare memberikan perlindungan kepada website yang berada di jaringannya.

Cloudflare memiliki fungsi seperti CDN (Content Delivery Network), tapi yang anehnya, Cloudflare tidak ada menyebut/menyinggung kata CDN di website mereka. Pada awalnya Cloudflare adalah aplikasi pencari sumber dari spam email, yang sekarang berkembang menjadi salah satu jaringan internet terbesar. Fokusnya tidak hanya sebagai penghantar konten, tetapi sebagai pelindung dan mengamankan jaringan internet dari bot, spam, DDoS, bot management, firewall, dan VPN. Cloudflare juga berkontribusi untuk cdnjs dan jsdelivr, sebuah platform CDN library untuk Java script populer yang bisa mengantar script dari jaringan Cloudflare.

Jika sebelumnya pernah dibahas tentang kelebihan dan kekurangan CDN, maka sekarang kita lihat review dan performa Cloudflare secara lebih spesifik.

Keuntungan memakai cloudflare

Apa yang bisa kita dapatkan dengan memakai cloudflare? Jawaban ini pastinya yang pertama kali harus kita ketahui sebelum memakai CDN Cloudflare. Cloudflare adalah salah satu CDN yang menyediakan layanan gratis dengan banyak fitur. Cloudflare juga memiliki sekitar 200+ pop (point of presence) atau colocation (col) untuk penyebaran dan pengiriman konten yang lebih dekat dan cepat ke pengunjung dari seluruh dunia.

Bagaimana Cloudflare memproteksi website
Bagaimana Cloudflare memproteksi website

Berikut ini beberapa keuntungan dan kelebihan yang bisa kita dapatkan dari Cloudflare gratis:

  1. Keamanan
    Dengan memakai CDN cloudflare, IP address dari hosting kita akan tersembunyi, kita akan mendapatkan IP adress baru (shared) dari Cloudflare, sehingga serangan langsung ke IP hosting/VPS kita bisa dihindari. Cloudflare mempunyai sistem proteksi DDoS (Distributed Denial-of-Service), sistem firewall  untuk memproteksi website kita dari bot dan penyusup, blacklist/whitelist IP tertentu, dll. Kita juga bisa mendapatkan SSL gratis, agar website kita bisa memakai https yang lebih aman kepada pengunjung.
  2. Kecepatan website
    Dengan penyebaran pop/col, pengunjung yang jauh lokasinya dari lokasi hosting kita akan dilayani lewat pop yang jaraknya lebih dekat dengan pengunjung tersebut. Sehingga waktu loading website kita akan lebih cepat.
    Cloudflare juga mempunyai sistem optimasi website seperi minifikasi, kompresi, caching, yang membuat proses loading bisa lebih efektif, sekaligus mengurangi beban pada hosting, sehingga bisa meningkatkan kapasitas pengunjung website kita.
  3. DNS management
    DNS (Domain name System) yang lebih cepat dan UI management yang user friendly. Kita bisa mengatur A record, CNAME, txt, MX record dari panel Cloudflare, Propagasi DNS akan labih cepat, kita juga bisa membypass Cloudflare kalau mau langsung mengarah ke IP atau hosting/VPS aslinya.

Semua itu bisa didapat dengan gratis, untuk fitur-fitur yang lebih canggih seperti analisis cache, mirage, custom nameservers, optimisasi gambar loseless, support, hanya lewat akun pro ke atas yang harganya dari $20 per bulan. Untuk website pemula sampai menengah, fitur gratis ini mungkin sudah lebih dari cukup.

Pada CDN Cloudfare gratis, tidak ada batasan berapa domain yang bisa kita daftarkan, tidak ada limit bandwith dan total file size yang dikirim lewat cloudflare. Tidak ada downtime ketika kita akan migrasi atau keluar ke cloudflare, jadi tidak ada ruginya untuk mencoba. Dan jika kita rasa tidak cocok, kita bisa mengeluarkan website kita kapan saja tanpa downtime.

Cara menggunakan cloudflare

Untuk bisa menggunakan cloudflare dan mengintegrasikannya dengan website kita, kita harus membuat akun, bisa lewat https://dash.cloudflare.com/sign-up

Cukup dengan memasukkan email dan pssword, selanjutnya kita perlu verivikasi dengan mengklik link yang dikirimkanke email yang kita daftarkan tadi.

Time needed: 10 minutes.

Cara menggunakan dan menghubungkan Cloudflare

  1. Menambahkan website

    Dari dashboard Cloudflare kita akan menambahkan nama domain/subdomain (+ Add a Site), yang akan menggunakan CDN Cloudflare. Dan pilih paket layanan yang mau kita pakai, Free-Pro-Business-Enterprise, pilih free , dan klik confirm plan.
    PIlih free plan Cloudflare

  2. Konfigurasi DNS (Domain Name System)

    Selanjutnya Cloudlfare akan menscan dan mengambil semua info DNS yang sudah ada di domain kita itu. Di tahap ini kita bisa menghapus, mengedit, menambahkan record baru untuk domain ini. Tidak akan ada perubahan apa-apa ketika kita mengganti/menabahkan sesuatu disini, sampai nanti kita bisa memverifikasi kalau domain itu memang milik kita, yaitu dengan mengganti name servernya. Klik continue untuk melanjutkan.
    Cloudflare akan menarik semua DNS Record

  3. Mengarahkan name server ke Cloudflare

    Selanjutnya kita akan diminta untuk mengganti name server untuk diarahkan ke Cloudflare. Untuk mengganti name server, kita bisa melakukannya dari panel hosting domain dimana kita membeli atau mendaftarkan domain kita, seperti google domain, namecheap, godaddy, rumahweb dan lainnya.
    Clouflare akan memberikan dua name server seperti ben.ns.cloudflare.com dan dahlia.ns.cloudflare.com, atau nama lainnya. Ubah name server lama atau bawaan dari hosting ke name server baru ini.
    Arahkan name server dari panel domain hosting

  4. Propagasi

    Setelah kita mengganti nameserver di panel penyedia domainkita, kembali ke Cloudflare dashboard dan klik “done, check nameservers”. Cloudflare secara periodik akan memeriksa perubahan name server ini, dan akan mengirimkan notifikasi lewat email juga jika nameserver sudah sesuai dengan nameserver yang baru. Bisa memakan waktu sampai 24 jam, tapi biasanya kurang dari 1 jam nameserver sudah berubah ke ns.cloudflare. Selama periode propagasi ini, website tidak akan down, dan masih bisa diakses seperti biasa.
    Reply ping dari domain

Akan muncul settingan awal untuk domain yang kita tambahkan tapi, bisa kita pilih setup later, atau klik done.

Untuk memeriksa apakah website kita sudah memakai CDN Cloudflare, kita bisa melakukan:

  • Ping
    Masuk lewat command promt windows (Win + R, ketik cmd), ping nama website, maka terlihat reply dari IP yang berbeda dari IP hosting kita. Jika hasilnya masih IP lama, artinya masih dalam proses propagasi.
  • Dns checker
    Coba dengan dns checker seperti https://dnschecker.org, masukkan nama website, cek A record, dan NS (Name server). Jika sudah menggunakan pop CDN Cloudflare maka kita akan melihat 3 IP untuk setip lokasi, dan name server yang sudah memakai cloudflare. Jika hasilnya tidak seragam, maka artinya masih dalam tahap propagasi.
DNS checker A record
DNS checker A record
  • Cdn-cgi/trace
    Bisa juga dengan menambahkan kode Cdn-cgi/trace pada akhir URL website, misalkan namadomain.com/cdn-cgi/trace, jika CDN aktif maka akan muncul:
fl=12f588
h=www.namadomain.com
ip=xxx.xx.xxx.xxx
ts=1599810661.099
visit_scheme=https
uag=Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:80.0) Gecko/20100101 Firefox/80.0
colo=LAX
http=http/2
loc=ID
tls=TLSv1.3
sni=plaintext
warp=off

Colo adalah collocation atau pops yang melayani request kita, seperti contoh ini, colo=LAX, yang artinya konten website yang kita kunjungi dikirimkan dari LAX (Los Angeles/USA).

Beberapa hosting dengan c-panel juga menawarkan koneksi langsung dari c-panel ke Cloudflare. Pernah saya coba lewat c-panel, tapi ada koneksi yang error, tombol yang tidak berfungsi, belum lagi kalau harus pindah hosting, atau hosting down. Cara di atas adalah cara yang paling mudah, fleksibel, dan universal. Tidak harus bergantung pada panel lain, bisa dipakai terus walaupun pindah/migrasi hosting/VPS.

Cara setup koneksi ke cloudflare dengan plugin WordPress

Khusus untuk wordpress, ada beberapa plugin yang bisa dipakai untuk mengkoneksikan website dengan cloudflare, tetapi koneksi awal tetap harus lewat web Cloudflare. Dengan plugin ini kita bisa mengatur konfigurasi website langsung dari dashboard wordpress, tanpa harus masuk ke panel Cloudflare, tapi tidak semua plugin mempunyai fitur dan kontrol selengkap panel di Cloudflare. Bagi yang memiliki banyak website, mungkin akan lebih mudah jika melakukan setting lewat Clouflare, dari pada harus masuk ke tiap-tiap website.

Cloudflare juga mempunyai plugin official, yaitu Cloudflare By Cloudflare, Inc. plugin yang kurang populer, bintang 3.5 dan tidak banyak update. Plugin ini tidak memberikan nilai tambah apa-apa, selain memunculkan beberapa kontrol dari dashboard wordpress admin.

Beberapa cache plugin seperti yang populer untuk WordPress: WP Rocket, WP Fastest Cache, W3 Total Cache, Swift Performance, bisa diintegrasikan langsung ke Cloudflare. Untuk koneksi langsung ke wordpress biasanya membutuhkan Global API key dan Zone ID.

Global API Key Cloudflare
API Cloudflare ini bisa kita dapatkan di Profile Cloudflare >> API Tokens >> Global API Key >> View, masukkan password dan kita bisa mengcopy API key ini dan memasukkannya ke WordPress lewat plugin tadi.

 Zone ID Cloudlfare
Masuk ke halaman muka dashboard Cloudflare (https://dash.cloudflare.com/) >> klik nama website >> Zone ID dan Account ID ada di sebelah kanan bawah.

Cara menggunakan dan optimiasi cloudflare

Ada banyak sekali pengaturan dan informasi yang bisa kita lihat di Cloudflare, support.cloudflare.com mempunyai penjelasan yang lengkap, disini juga akan kita lihat  penjelasan singkat untuk arti dan bagaimana mengkonfigurasi fitur-fitur di Cloudflare.

1. Overview

Disini kita bisa melihat resume traffic, visitor, request, jumlah datransfer dan persen cache. Data ini bisa berbeda dengan data pengunjung yang biasa kita dapatkan dari Google Analytics atau Jetpack, karena Google Analytics biasanya memfilter bot, robot, crawler dan visitor non manusia lainnya.

Tab Overview dan quick actions
Tab Overview dan quick actions
  • Under Attack Mode
    Fitur ini jika kita merasa ada kunjungan tidak normal, spam, request berulang-ulang yang mengganggu website kita. Dengan mengaktifkan fitur ini, maka setiap visitor yang masuk harus menunggu selama 5 detik untuk security check, lalu ada capctha (I’m human) yang harus diselesaikan untuk verifikasi kalau pengunjung benar-benar manusia.  Hal ini bisa memblok bot secara signifikan, termasuk pengunjung asli yang harus menyelesaikan capctha.
    Kalau dirasa sudah aman, kita bisa menonaktifkannya (off), tapi masih ada pilihan untuk menurunkan level sekuriti check jika dirasa masih perlu.
    Jika kita mengetahui IP adress bot, kita bisa memblack list IP tersebut, dan mematikan fitur under attack, sehingga pengunjung lainnya tidak perlu menunggu dan menyelkesaikan captcha aar masuk ke website kita.
  • Development mode
    Development mode gunanya untuk by pass cloudflare untuk sementara, ketika kita mau melihat perubahan real time dengan apa yang kita lakukan di website. Karena CDN tidak menangkap dan meyimpan perubahan (gambar, CSS, or JavaScript) pada website dalam periode waktu tertentu, atau ada jeda/delay sebelum perubahan yang kita lakukan di website bisa dilayani dari CDN.  Development mode akan berakhir selama 3 jam secara otomatis jika tidak kita offkan secara manual. Untuk bypass permanent bisa lewat pause website from cloudflare, atau menggunakan DNS management.
  • Remove site
    Disini kita juga bisa menghapus website dari cloudflare, dan mengembalikannya ke settingan awal. Ketika menghapus website dari cloudflare, jangan lupa untuk mengembalikan nameserver ke nameserver awal, supaya website masih bisa diakses. Kalau kita pernah melakukan perubahan record langsung di DNS cloudflare, catat agar bisa dipindahkan dan diaplikasikan ke DNS management yang baru.
Proteksi untuk bot dengan under attack dan captcha browser
Proteksi untuk bot dengan under attack dan captcha browser

2. Analytics

Untuk melihat data statistik yang lebih detail. Negara asal visitor, ancaman (threats) yang datang, bandwith yang dihemat, dan lainnya. Clouflare juga memfilter crawler/bot dari Google, Yahoo. Bing, Yandex dll. Untuk data unique visitor, sebaiknya lihat di Google Analytic untuk data yang lebih akurat.

Statistik pengunjung dan bot-attack yang di block
Statistik pengunjung dan bot-attack yang di block

3. DNS

DNS management sama seperti yang kita lakukan biasanya dari panel domain kita terdaftar. Jika kita sudah mengarahkan nameserver ke cloudflare, semua perubahan dari hosting/domain tidak akan teraplikasikan, hanya perubahan dari Cloudflare yang akan berpengaruh.

Untuk proxy status awan berwarna oranye, artinya IP asli atau CNAME asli tidak bisa dilihat orang lain, dan yang akan muncul adalah IP cloudflare. Bisa kita matikan atau bypass, yang nanti ikonnya berubah menjadi awan abu-abu. Perubahan DNS record di Cloudflare harus diaplikasikan juga pada DNS hosting awal jika kita akan menghapus website atau menutup akun Cloudflare.

DNS management dan by pass proxy cloudflare
DNS management dan by pass proxy cloudflare

4. SSL/TLS

Cloudflare menyediakan SSL certificate gratis, yang otomatis diperpanjang masa berlakunya. Memiliki website dengan https penting untuk menjamin koneksi private yang aman, toko online, registrasi member, login, SEO, dan lainnya.

SSL Cloudflare adalah shared sertifikat SSL, yang juga bisa dipakai oleh 50 website lainnya. Untuk versi gratis, kita tidak bisa memakai SSL certificate sendiri, bisa dihungkan ke cloudflare, tapi yang akan dipakai oleh visitor hanya SSL dari Cloudflare.

Ada 4 pilihan untuk pengaturan SSL Cloudflare:

  • off: tidak ada koneksi https, semua akan diarahkan ke http. Tidak disarankan.
  • flexible: koneksi dari CDN ke visitor menggunakan https, tetapi CDN ke web server kita menggunakan http. Pakai hanya jika kita tidak mempunyai atau tidak bisa membuat/memiliki SSL certificate sendiri. Tidak disarankan untuk website yang memiliki informasi sensitif atau rahasia, seperti password, transaksi, alamat, dan lainnya.
  • full: koneksi yang aman dan terenkripsi antara visitor-CDN-web server, semuanya menggunakan https. Tidak harus authentic SSL, self-signed certificate bisa dipakai.
  • full (strict): Pilihan yang disarankan, website harus mempunyai valid dan authentic SSL certificate untuk website tersebut, seperti yang biasa kita dapat dari Let’s Encrypt dan sejenisnya.
Mode enkripsi SSL-TSL- Full strict
Mode enkripsi SSL-TSL- Full strict

Kesalahan memilih pilihan bisa membuat error 522 atau redirect loops (redirect yang tidak ada ujungnya).

  • Edge Certificates: hanya untuk yang SSL dedicated berbayar (bukan shared)
  • Always Use HTTPS: akan meridirect semua http ke https
  • HTTP Strict Transport Security (HSTS): memastikan semua koneksi dan link http menjadi https, dan menghindari warning/error karena SSL certificate
  • Minimum TLS Version:  versi terendah  SSL/TLS yang bisa dipakai visitor untuk masuk ke website kita. Defaultnya TLS 1.0 sudah oke.
  • Opportunistic Encryption: untuk website yang tidak memilik https, dengan pilihan ini bisa menambah keamanan dan kecepatan, tetapi tidak akan menambilkan logo sekuriti (gembok).
  • TLS 1.3: mengaktifkan TLS versi terupdate, mningkatkan sekuriti dan performa, bisa menampilkan ikon gembok hijau.
  • Automatic HTTPS Rewrites: menghilangkan terjadinya mix content, dengan mengubah semua http menjadi https untuk semua link dan sources untuk sumber yang sudah mendukung https.
  • Certificate Transparency Monitoring: kita akan menerima email, jika ada pihak lain yang mencoba menerbitkan sertificate SSL atas nama domain kita.
  • Disable Universal SSL: untuk menonaktifkan Universal (shared) SSL, dan memakai certificate sendiri. Memakai SSL sendiri hanya bisa untuk member pro ke atas. Untuk member gratis Cloudflare jangan mengaktifkan fitur ini.

5. Firewall

Semua kita menginginkan website yang aman. Membuat sekuriti yang terlalu ketat/tinggi akan membuat website lebih lambat, dan pengunjung yang kurang nyaman. Terlalu longgar juga salah. Sebaiknya atur sesuai dengan kebutuhan, dan lihat performanya, untuk mendapatkan settingan yang optimal.

Beberapa plugin sekuriti bisa memiliki fitur yang sama dengan apa yang ada disini. Plugin gratis biasanya memiliki keterbatasan. Dengan mengkombinasikan plugin dan cloudflare, kita bisa mendapatkan perlindungan yang lebih luas, tetapi hindari fungsi-fungsi yang bertabrakan.

Di tab Overview kita akan melihat log/record untuk serangan atau yang dicurigai sebagai ancaman ke website kita. Seperti contoh ini, ada mau masuk ke /wp-admin/install.php dari Prancis dengN IP di atas, dan Cloudflare memblok aksi tersebut. Untuk laporan yang banyak sekali log, jika kita melihat IP sendiri atau hal lain yang kita rasa salah (false alarm), kita bisa mengexclude item tersebut, dan tidak akan dimunculkan di log/report.

Log untuk attack yang terjadi di website kita
Log untuk attack yang terjadi di website kita

Firewall Rules

Disini kita bisa membuat rules, semacam whitelist dan blacklist, termasuk action yang akan terjadi jika memenuhi kondisi yang kita buat. Kita hanya bisa membuat 5 rule, jadi gunakan dengan optimal. Misalkan untuk memblok IP address, tidak usah satu rule untuk atu IP (range), tetapi kita bisa membuat list IP (maks 1000 untuk satu list), dan cukup memblok list tersebut.

Kita bisa memblok /wp-login.php sehingga hanya bisa dimasuki dari IP tertentu atau dari negara tertentu. Karena keterbatasan rule, kombinasikan dan gunakan ekspresi yang efektif.

Cara protek wp admin dengan Cloudflare
Cara protek wp admin dengan Cloudflare

Tools

  • Rate Limiting: untuk membatasi bot yang masuk terus menerus atau memiliki interval dan pola tertentu yang bisa menguras resources server kita. (Fitur ini berbayar)
  • User Agent Blocking: user agent adalah nama browser atau string yang dipakai software untuk masuk ke website kita. Bot otomatis biasanya memakai nama-nama tertentu.

6. Speed

Pada tab speed, kita bisa melakukan optimiasi yang berhubungan dengan kecepatan loading website.

  • Image resizing (pro): untuk merisize, kompres, kualitas, webp, dan gambar akan disimpan di server Cloudflare, sehingga tidak membebani server kita. Ada banyak metode kompresi gambar gratis yang memiliki performa dan kualitas yang lebih bagus, bahkan lebih dari format webp sekalipun.
  • Auto Minify: mengurangi  ukuran javasript, ccs, dan html dari website kita untuk waktu loading yang lebih cepat. Fitur ini sangat umum ditemui pada plugin cache di WordPress. Sebaiknya coba yang mana yang bisa memberikan performa lebih baik, biasanya pemenangnya adalah minify lewat plugin.
    Bisa juga menggunakan cdnjs cloudflare di cdnjs.com, sebuah open source projek untuk JavaScript library yang disimpan pada CDN Cloudflare.
  • Brotli: metode untuk mengkompress ukuran file/konten yang dikirim ke visitor.
  • Rocket Loader: mempersingkat waktu website mucul di browser dengan loading javascript termsauk script 3rd party yang asynchronous (tidak antri/saling menunggu). Untuk informasi lebih teknikal tentang Rocket Loader bisa lihat di blog.cloudflare.com
  • Railgun (business): Railgun berguna pada website yang dinamis, yang kontennya cepat berubah-ubah, seperti situs berita, forum, dsb. Railgun akan mengakselerasi cache untuk menghantarkan konten terbaru lewat Cloudflare WAN network, khusus untuk update terbaru saja.
  • Mobile AMP Real URL: Untuk page amp, jika dibuka dari smartphone maka biasanya alamat url di browsernya berawalan google.com/amp/. Fitur AMP Real URL akan membuat versi URL amp yang dibuka dari Chrome dan andoid akan menampilkan URL halaman dengan naman domain kita, tidak lagi diawali google.com. Fitur ini bisa meningkatkan brand awarness, analisis yang lebih akurat, dan bounce rate.
  • Mobile redirect: Jika kita memiliki subdomain yang khusus untuk mobile, biasanya yang awalannya m.namadomain.com. Jika versi desktop dan mobil ada di domain/URL yang sama, pilihan ini bisa diabaikan.
Peningkatan speed dengan Cloudflare
Peningkatan speed dengan Cloudflare

7. Caching

  • Purge Cache: untuk menghapus cache dari CDN Cloudflare. Ketika kita mengubah/mengedit sesuatu di backend, Cloudflare mungkin saja masih menampilkan file lama dari cache yang belum terupdate. Sehingga perubahan yang kita lakukan tidak muncul di halaman browser.
    Untuk itu kita perlu menghapus cache dengan purge cache, sehingga Cloudflare akan mengambil file terbaru untuk disimpannya dalam cache (file temporary). Kita bisa menghapus semua cache dengan purge everyting, atau custom purge (dengan memasukkan URL tertentu).
    Sebaiknya gunakan custom purge saja jika perubahan hanya pada satu URL, karena kalau menggunakan purge everything, maka Cloudflare akan mengambil ulang konten dari semua halaman, yang bisa membuat loading CPU yang mendadak tinggi. Gunakan purge everyting seperlunya, misalkan ketika mengganti theme atau style yang tidak terupdate di cache CDN.
  • Caching Level: untuk mengatur seberapa banyak fie yang akan di cache Cloudflare.
    • No Query String: hanya meng-cache file yang tidak memiliki qeurry string
    • Ignore Query String: Cloudflare akan mengirim file yang sama dengan mengindahkan querry string
    • Standard: mengirimkan konten yang berbeda-beda tergantung querrynya (default). Secara default, cloudlfare tidak meng-cache file html, tetapi kita bisa meminta agar file html juga di cache dengan pengaturan di page rule.
  • Browser cache TTL: Berapa lama temporary cache di browser visitor dipakai sebelum Cloudflare mengirimkan cache baru. Browser seperti chrome, firefox juga menyimpan cache di file lokal, semakin banyak cache yang diloading dari cache browser, semakin cepat waktu loading, mengurangi konten yang perlu didownload dari CDN/web server. Untuk website statis, bisa menggunakn periode TTL yang lama. Untuk website yang sering dinamis gunakan waktu yang lebih singkat, default TTL 4 jam.
  • Always Online: fitur ini berguna ketika website kita down, cloudflare masih akan melayani konten berdasarkan cache, jadi solah-olah website kita masih online. Akan ada notifikasi offline browsing ketika pengunjung masuk, tetapi nanti setelah website kita up, semuanya akan ditampilkan normal lagi.

8. Workers

Worker Cloudflare adalah serverless Javascript, untuk developer men deploy script di cloud network Cloudflare. Worker bisa menjalankan logika script, membuat request ke Cloudflare cache atau aplikasi dan memberikan data atau feedback ke pengunjung. Harganya $5 per bulan ditambah jumlah pemakaian.

9. Page Rules

Salah satu bagian penting dari pengaturan Cloudflare adalah page rule, disini kita bisa membuat peraturan atau logic berdasarkan khusus untuk url tertentu. Jika settingan-settingan di atas berlaku untuk semua halaman, disini kita bisa mengatur pengecualian atau perlakuan khusus untuk halaman-halaman tertentu. Untuk pengguna gratis, batasnya adalah 3 rule.

Perlu diketahui kalau page rule Cloudflare mempunyai prioritas, rule yang paling atas akan dipenuhi dahulu dan berlanjut ke rule selanjutnya. Jadi kalau ada rule yang konflik, maka rule yang posisinya dibawah akan diabaikan.

Untuk menghemat rule, gunakan wildcard (*), misalkan untuk semua url yang mungkin ada termasuk http dan https, kita bisa menggunakan *.namadomain.com/*
Beberapa halaman-halaman khusus yang mungkin memerlukan rule, seperti:

  • wp-admin dan backend, preview page yang tidak perlu dicache
  • halaman yang berkaitan dengan transaksi woocommerce atau toko online
  • halaman dengan konten dinamis yang menggunakan AJAX
  • halaman yangperlu selalu online
  • redirect, subdomain dan lainnya.

Kita akan lihat satu contoh bagaimana membuat page rule untuk wp-admin. Banyak yang merasa setelah memakai cloudflare, performa halaman wordpress admin /backend atau ketika mengedit web (membuat post, preview error) terasa sangat lambat.

Hal ini bisa terjadi karena cloudflare ikut mencache backend. Ketika kita bekerja di dashboard wordpress, semua url akan menjadi namadomain.com/wp-admin/xxx. Jadi kita perlu membuat sebuah rule, yang meminta agar Cloudflare mengindahkan atau mem bypass semua URL yang memiliki URL wp-admin.

Page Rule supaya admin-dashboard WordPress tidak di cache
Page Rule supaya admin-dashboard WordPress tidak di cache
Target URL *example.com/wp-admin/*.
Cache Level: bypass
Disabele Performace: disabled
Disable Security: disabled
Save and Deploy

Kita juga bisa menambahkan rule lain untuk preview yang lambat, gunakan url target *namadomain.com/*preview=true*. Atau supaya Cloudflare tidak meng cache halaman login admin, gunakan URL *namadomain.com/wp-login.php*, dengan pengaturan rule yang sama seperti di atas.

10. Network

  • HTTP/2: Protokol HTTP/2 merupakan update dari protokol jadul HTTP/1.1, kebanyakan host sudah support HTTP/2. Lebih cepat dan lebih aman, tetapi memerlukan SSL certificate (https) agar performanya maksimal.
  • HTTP/3 (with QUIC): revisi web protokol untuk enkripsi dan peningkatan performa https
  • IPv6 Compatibility: Cloudflare merekomendasikan untuk mengaktifkan (on) pilihan ini untuk memperluas kompatibiliti.
  • WebSockets: untuk memungkinkan koneksi langsung ke hosting, sering dipakai untuk aplikasi real rime, seperti online chat dan gaming..
  • Onion Routing: menginkatkan privasi dan proteksi untuk browser Tor.
  • Pseudo IPv4:  konversi Ipv6 ke Ipv4 semu. Set off kecuali ada keperluan khusus
  • IP Geolocation: supaya kita bisa melihat lokasi dan negara dari visitor yang masuk ke website kita.
  • Maximum Upload Size: maksimum ukuran file yang bisa diupload pengunjung, jika website kita mempunyai fitur dimana pengunjung bisa mengupload file.
  • Response Buffering (Enterprise Feature): jika kita mempunyai file yang bisa didownload pengunjung, file akan dibuffer atau didownload sampai selesai oleh Cloudflare sebelum dikirim ke pengunjung, untuk menghindari kegagalan download (putus).
  • True-Client-IP Header: agar kita bisa melihat IP adress pengunjung.

11. Traffic

Argo adalah fitur berbayar Cloudflare untuk membuat performa website yang lebih cepat dan aman. Menurut Cloudflare bisa meningkatkan kecepatan sekitar 30% dan mengurangi koneksi error 27%. Harga fitur Argo Cloudflare adalah %5 per bulan per website ditambah $0.1 per GB data taransfer.

Load balancing (pro): menyeimbangkan beban webserver dan lokasi antar CDN pop untuk memberikan pengiriman konten yang lebih stabil. Mengurangi server yang overload, dengan membagi beban ke webserver lain.

12. Scrape Shield

  • Email address obfuscation: Untuk menyembunyikan email dari bot-bot pencari email yang biasanya akan mengirim pesan-pesan spam. Email akan tetap terlihat normal untuk pengguna normal.
  • Server-side Excludes: Untuk menyembunyikan konten dari visitor-visitor robot, dengan menambahkan wrap <!–sse–> <!–/sse–> pada konten yang mau disembunyikan.
  • Hotlink protection: untuk memprotect gambar dari hotlink. Hotlink merupakan gambar yang ditampilkan di website lain dengan menggunaksn link dan diload dari website kita, sehingga menambah beban ke server kita, mirip seperti embed. Untuk mem whitelist gambar yang masih bisa di hotlink, seperti logo, buat folder pada directori website dengan nama hotlink-ok, dan masukkan gambar-gambar di folder tersebut, untuk yang kita perbolehkan untuk di hotlink.

13. App

Applikasi Cloudflare mirip seperti plugin, yang akan diinstal di Cloudflare tanpa mengubah atau mengganggu file-file yang ada di server asli kita. Sehingga ketika kita menonaktifkan Cloudflare, maka aplikasi tambahan ini pun akan hilang.

Beberapa aplikasi yang populer, seperti Google analytic, whatsapp contact us, facebook comment, share button.

Popular app di Cloudflare
Popular app di Cloudflare

Performa cloudflare

Sekarang kita akan lihat hasilnya, apakah memang CDN dan Cloudflare bisa meningkatkan performa website kita. Di bawah ini adalah beberapa perbandingan kecepatan dari beberapa skenario dan kombinasi website dengan cache plugin dan CDN Cloudflare.

Website dummy untuk test ini menggunakan theme gratisan Neve, dengan content bawaan theme, tidak ada woocommerse, tidak ada adsense.

Webserver asli mengggunakan VPS Singapura harga $5/bulan. Di test speed dengan

Skenario yang dibuat:

  1. VPS Hosting
  2. VPS + Cache Plugin
  3. VPS + Cloudflare
  4. VPS + Cloudflare + Cache Plugin
  5. VPS + Bunny CDN + Cache Plugin
Speed test VPS sebelum Cloudflare
Speed test VPS sebelum Cloudflare

Perbandingan performa sebelum dan sesudah Cloudlfare

GT Metrix – Vancouver /CALoad TimePage ScoreYslow ScorePage SizeRequest
VPS Hosting6.7 sE (57%)B (87%)1.64 MB106
VPS + Cache Plugin2.5 sA(99%)A (94%)353 KB12
VPS + Cloudflare3.4 sE (57%)B (87%)1.63 MB107
VPS + Cloudflare + Cache Plugin4.5 sA (99%)A (97%)355 KB12
VPS + Bunny CDN + Cache Plugin2.0 sA (99%)A (97%)356 KB12
Pingdom Tool – Asia/TokyoLoad TimeRequestPerformance GradePage Size
VPS Hosting2.04 s106B (87)1.9 MB
VPS + Cache Plugin1.29 s92A (91)1.9 MB
VPS + Cloudflare1.21 s106B (87)1.9 MB
VPS + Cloudflare + Cache Plugin10.22 s 92A (92)1.6MB
VPS + Bunny CDN + Cache Plugin7.69 s 91A (93)1.6MB
WebPageTest  – JakartaFully LoadedRequestsBytes
VPS Hosting4.78 s411535 KB
VPS + Cache Plugin1.403 s11359 KB
VPS + Cloudflare5.570 s1041574 KB
VPS + Cloudflare + Cache Plugin1.582 s11360 KB
VPS + Bunny CDN + Cache Plugin1.623 s11361 KB
Google LighthousePerformance GradeAccessibilityBest PracticeSEO
VPS Hosting329710086
VPS + Cache Plugin919710086
VPS + Cloudflare159710086
VPS + Cloudflare + Cache Plugin799710086
VPS + Bunny CDN + Cache Plugin919710086
https://web.dev/measure/
Speed test VPS setelah Cloudflare
Speed test VPS setelah Cloudflare

Setiap web test mempunyai metode dan perhitungan score yang berbeda. Test yang sama pun bisa menghasilkan angka yang sedikit berbeda. Berdasarkan pengalaman, yang juga sudah saya tuliskan di artikel tentang CDN, saya cukup yakin data di atas sudah bisa menunjukkan kecenderungan nilai yang benar yang bisa ditarik kesimpulannya.

Sebagaimana kita lihat dari data di atas, Cloudflare bisa meningkatkan kecepatan website terutama untuk lokasi yang jauh dari server. Untuk lokasi yang dekat dengan server, untuk kasus di atas menggunakan hosting Singapura dan webpagetest di Jakarta, Cloudflare tidak membantu kecepatan website.  Karena Cloudflare mengirim konten dari LAX (USA) atau HKG (Hong Kong), yang sebenarnya membuat jarak lebih jauh dari posisi hosting. Mungkin karena menggunakan Cloudflare gratisan, mungkin jika berbayar konten akan dikirim dari pop/colo CGK (Jakarta) yang seharusnya bisa mempercepat waktu loading.

Untuk melihat daftar colo/pop aktif dan arti dari kode location Cloudflare, bisa dibuka di : https://www.cloudflarestatus.com

Cloudflare mempunyai sistem dan metode optimasi sendiri di panel/dashboard mereka. Tetapi hasil optimisasi ini kurang optimal, atau tidak sebagus plugin cache dan optimisasi yang langsung dipasang pada website kita.

Jadi saya lebih menyarankan, lebih baik optimisasi langsung di website dengan plugin cache, bahkan plugin cache gratisan lebih bagus performanya dari pada menggunakan optimisasi di Cloudflare. Banyak plugin cache dan speed optimization yang bisa terintegrasi dengan Cloudflare, sehingga kinerjanya lebih sinkron dan tidak saling tumpang tindih. Cache plugin yang dipakai pada test ini adalah WP Fastest Cache. Plugin-plugin optimasi speed dan cache ini biasnya menyarankan untuk mematikan beberapa fitur optimasi di Cloudflare untuk performa yang lebih baik.

Selain melihat perubahan kecepatan website, periksa juga tampilan website. Minifikasi CSS, Javascript, atau HTML bisa merusak tampilan website menjadi aneh dan tidak sesuai. Coba beberapa kombinasi yang tidak merusak tampilan website dan memberikan kecepatan yang optimal. Settingan ini bisa berbeda antara satu website dengan website lain karena theme, code, script yang tidak semua sama. Jangan lupa untuk purge cache/hapus cache setiap kita melakukan perubahan pada settingan minify supaya tampilan dari cache menyesuaikan dengan perubahan yang kita lakukan.

Bunny CDN memberikan performa yang lebih baik daripada Cloudflare gratis. Untuk test ini saya memakai Bunny CDN Free Trial selama 14 hari.   Bunny CDN memang tidak gratis, harganya dihitung berdasarkan GB data transfer, sekitar $0.03 per GB, sehingga untuk website kecil-menengah bisa lebih hemat biaya per bulannya.

Terlepas dari kecepatan website yang lebih cepat atau lebih lambat ketika menggunakan Cloudflare, setidaknya keamanan kita lebih terjamin. DDOS, bot, spam bisa berkurang secara signifikan, yang untuk mengaktifkannya hanya dengan klik tombol on/off saja, tanpa perlu konfigurasi yang rumit. Jadi kita bisa memanfaatkan fitur ini jika nantinya kita memiliki masalah dengan sekuriti/keamanan yang tidak bisa kita atasi sendiri.

Selain itu juga, untuk shared hosting atau VPS murah, atau yang diisi dengan banyak website, membagi traffic ke Clodflare bisa mengurangi beban CPU.

Hal lain yang perlu dipertimbangkan juga adalah kompabiliti Cloudflare dengan jaringan internet lokal. Beberapa kali jaringan internet Telkom tidak bisa mengakses cloudflare, harus menggunakan jaringan lain atau membuka by pass agar bisa diakses. Sepertinya sudah teratasi dan mudah-mudahan tidak muncul masalah yang sama lagi.

Apakah kamu menggunakan Cloudflare? Jika kamu punya cerita, info, atau kritik untuk Cludflare dan artikel ini, silahkan komen di bawah.