Cara Pasang BunnyCDN di WordPress (2020)

Terakhir di Update September 24, 2020

Salah satu tips untuk mempercepat performa website adalah menggunakan CDN dan salah satu CDN yang murah dengan performa terbaik adalah BunnyCDN. Kali ini kita akan bahas cara pasang BunnyCDN di WordPress.

Salah satu keuntungan buat blog atau website WordPress adalah kemudahan dalam mengoptimasi website bagi non-techie seperti saya. Baik itu optimasi loading website atau optimasi SEO. Dan salah satu caranya adalah dengan menggunakan CDN agar website bisa cepat – disukai pengunjung dan disuka Google.

Website BelajarWPSEO ini menggunakan BunnyCDN untuk static files (CSS, JS, dan gambar) salah satu alasannya adalah harganya yang relatif murah. Harga di BunnyCDN juga bisa kita atur tergantung mau pakai data center yang mana.

Nah buat kalian yang ingin pasang CDN biar loading website cepat saya sarankan pakai aja BunnyCDN. Totally worth it!

Mau nyoba dulu bisa kok, BunnyCDN nawarin free trial selama 14 hari tinggal daftar aja udah gitu gak perlu Kartu Kredit lagi. Langsung daftar aja disini.

Untuk pembayaran di BunnyCDN menggunakan sistem topup dan bisa bayar Kartu Debit Jenius atau Bitcoin juga.

Kalau sudah daftar sekarang langsung ikuti tutorial cara integrasikan BunnyCDN ke WordPress berikut ini.

Cara Pasang BunnyCDN di WordPress

Buat Pull Zone

Untuk menggunakan BunnyCDN kita harus membuat Pull Zone untuk website kita. Satu Pull Zone untuk satu website. Jadi kalau mau tambah website, bisa buat pull zone baru.

1. Klik pada Pull Zones
2. Klik Add Pull Zone
3. Pada kolom Name masukkan nama cdn nya
4. Pada Origin URL masukkan url website yang ingin dipasang CDN
5. Pilih Standard Tier
6. Di menu Pricing Zones sesuaikan dengan target pengunjung kalian. Target website saya adalah orang Indonesia jadi Pricing Zone pilih Asia untuk menghemat biaya.
7. Klik Add Pull Zone

Pasang di WordPress

Ada banyak cara untuk integrasikan BunnyCDN ke WordPress, kita bisa pakai plugin BunnyCDN langsung atau menggunakan plugin Cache seperti Litespeed Cache, WP Rocket, dkk.

Pada tutorial kali ini saya akan jelaskan dua cara ya yaitu menggunakan Plugin BunnyCDN dan Plugin Litespeed Cache.

Pakai Plugin BunnyCDN

1. Download dan aktifkan Plugin BunnyCDN
2. Masuk ke Setting BunnyCDN di WordPress
3. Pada kolom Pull Zone Name tinggal masukkan nama CDN yang sudah kita setting tadi
4. Pilih Update CDN Setting. Selamat CDN sudah aktif.

Kalau ingin kontrol penuh, kita bisa pilih pilihan Switch To Advanced View. Berikut ini penjelasan settingannya:

• CDN Domain Name: Nama CDN yang kita buat. Akan otomatis terisi sendiri jika kita sudah setting pull zone name Simple View.
• Site Url: Website yang didaftarkan untuk pakai CDN. Otomatis terisi jika kita sudah setting pull zone pada Simple View
• Excluded: Masukkan ekstensi file yang tidak ingin dipakaikan CDN. Biarkan saja defaultnya .php
• Included Directories: Biarkan default wp-content, dan wp-includes untuk gunakan CDN di file static. Kalau cuman ingin pakai CDN untuk gambar, hapus wp-content dan ganti dengan uploads (folder image di WordPress).
• API Key: Ini untuk fitur Clear Cache langsung dari Dashboard WordPress. Login ke Dashboard BunnyCDN -> Account untuk dapatkan API BunnyCDN.
• Disabled CDN for admin user: Saya aktifkan opsi ini biar menghemat biaya.
• Clear Cache: Gunakan tombol ini jika ada perubahan dari website yang tidak teraplikasikan.

Nah itu dia cara pasang BunnyCDN di WordPress mengunakan plugin BunnyCDN.

Sekarang kita akan belajar cara pasang BunnyCDN menggunakan plugin Litespeed Cache

Pakai Plugin Litespeed Cache

Semua plugin cache punya fitur CDN sebut saja Swift Performance, WP Rocket, dkk. Tapi disini kita akan pakai plugin Litespeed Cache ya.

1. Masuk ke Dashboard Plugin Litespeed Cache di WordPress
2. Pilih CDN
3. Di kolom Use CDN Mapping set ke ON dan masukkan url path cdn.
4. Setting ON untuk Includes Images, CSS, dan JS.

Berikut ini penjelasan dari beberapa settingan yang ada di CDN Litespeed Cache:

• HTML Attribute To Replace: Set default saja.
• Original URLs: Masukan domain website dengan awalan //
• Included Directories: Sama kayak settingan di BunnyCDN, masukkan folder yang ingin digunakan CDN
• Exclude Path: Masukkan root folder yang tidak ingin digunakan di CDN
• Load JQuery Remotely: Set Off
• Cloudfare API: Karena sudah pakai BunnyCDN jadi tidak perlu pakai Cloudfare lagi. Kalau mau pakai Cloudfare tinggal nonaktifkan CDN Mapping dan aktifkan Cloudfare CDN lewat settingan ini.

Jika kalian perhatikan, alamat CDN video diatas menggunakan cdn.bgsbali.com beda dengan saat pakai plugin BunnyCDN seperti tingkatkan.b-cdn.net Nah bisa kok kita custom hostname CDN nya biar lebih keren gitu keliatannya hahaha.

Ubah Hostname BunnyCDN

Default hostname BunnyCDN berakhiran .b-cdn.net. Jadi kalau kita setting nama CDN contoh websitesaya maka hostname CDNnya adalah websitesaya.b.-cdn.net.

Nah enaknya di BunnyCDN kita bisa custom hostname biar keliatan lebih keren gitu. Kali ini saya akan ubah hostname dari tingkatkan.b-cdn.net menjadi cdn.tingkatin.id

Berikut tutorial cara ubah hostname BunnyCDN

1. Login ke Dashboard BunnyCDN
2. Pilih Pull Zones kemudian pilih Zone CDN yang sudah kita buat
3. Masukkan nama hostname pada bagian Add Custom Hostname kemudian klik Add
4. Selanjutnya klik Enable dan pilih Get a free certificate. Disini kita harus setting DNS CNAME domain. Tetap di halaman dashboard BunnyCDN ini ya.

Selanjutnya adalah setting CNAME di DNS Editor. Bisa melalui hosting tempat website kita di host atau langsung dari domain.

Karena web saya mengarahkan nameserver domain ke Cloudfare jadi untuk setting cname atau dns editornya ada di dashboard Cloudfare.

Lihat video singkat dibawah ini untuk setting custom hostname dan mengarahkan cname.

Kok udah pake Cloudfare masih pakai BunnyCDN? Yap, saya pakai CF hanya untuk DNS nya saja, dan untuk server static files saya pake BunnyCDN.

Setelah berhasil aktif sekarang tinggal masuk ke settingan plugin BunnyCDN atau Litespeed cache dan ganti hostnamenya menjadi custom hostname yang sudah kita buat itu.

Jangan lupa untuk save dan clear cache ya.

Kesimpulan

Nah itu dia cara pasang BunnyCDN di website WordPress. Mudah kan? Coba deh test buka website kamu sekarang pasti terasa beda loadingnya.

Jika ada pertanyaan atau request tutorial bisa langsung lewat grup Facebook ini ya.