Cara Setting WP Rocket Plugin di WordPress untuk Mempercepat Loading Website

Cara Setting WP Rocket Plugin di WordPress Cache #1 dengan optimal menggunakan versi terbaru 3.9.2 untuk mempercepat loading website.

Dalam postingan ini anda akan mengetahui bagaimana cara menginstal hingga cara setting WP Rocket dari awal sampai akhir plugin WP Rocket yang akan membuat WordPress lebih ngebut. Tapi sebelum bahas cara menggunakan/mengatur beserta setup plugin WP Rocket terbaik dan optimal ada baiknya ketahui lebih dulu;

Apa itu WP Rocket ?

WP Rocket adalah plugin cache WordPress premium yang diklaim sebagai plugin cache #1 karena dilengkapi dengan fitur kecepatan lebih dari kebanyakan plugin cache lainnya. Pada versi terbaru WP Rocket 3.9.2 terdapat beberapa pembaruan yang lebih memudahkan pengguna dalam urusan mempercepat loading website. Ini saya buktikan di wesite ini yang memberikan kecepatan yang lebih baik di Google PageSpeed dan GTmetrix. 

Bagaimana cara kerja WP Rocket Mempercepat Loading WordPress ?

Menggunakan WP Rocket plugin di WordPress dengan pengaturan optimal membuat WEB tidak perlu menginstal banyak plugin kecepatan ekstra untuk mempercepat loading website seperti memuat font terlebih dahulu (preload fonts), membersihkan database, minifikasi CSS, menunda pemuatan gambar, dan menunda JavaScript.

Lalu bagaimana setting terbaik WP Rocket untuk kecepatan website optimal? Berikut ini saya uraikan cara setting WP Rocket satu demi satu:

Cara Setting WP Rocket

Berikut ini cara setting plugin WP Rocket di WordPress dengan optimal untuk membuat website makin ringan dan cepat;

1. Instal Plugin WP Rocket

Pertama-tama downlod plugin melalui dasbor akun WP Rocket anda lalu instal plugin WP Rocket di WordPress dengan cara:

• Masuk admin WordPress Anda dan buka: Plugin->Add New dan klik Upload Plugin.
• Pilih file zip dan klik Instal Sekarang.
• Setelah mengklik tautan itu, Anda akan ditanya apakah Anda yakin ingin menginstal plugin. Klik yes dan WordPress akan secara otomatis menyelesaikan proses instalasi WP Rocket.

2. Menggunakan Dashboard WPRocket

Pada WP Rocket terbaru versi 3.9.2 opsi Beta Tester sudah tidak tersedia lagi. Sedangkan untuk opsi Rocket Ananlytics masih tersedia. Selain itu, pada versi terbaru ini juga terdapat penambahan opsi yang akan memudahkan pengguna WP Rocket. Berikut ini penampakannya dan cara setting didalamnya:

Rocket Analytics

Biarkan opsi ini mati kecuali Anda ingin memberikan akses pada WP Rocket mengumpulkan data Anda secara anonim untuk memantau kinerja website.

Pada versi terbaru WP Rocket 3.9.2 penambahan opsi dibagian dasboard WP Rocket yaitu:

Quick Action

Remove All Cached Files
Untuk membersihkankan semua file cache halaman langsung melalui dasboard dengan satu kali klik melalui tombol Clear Cache.

Star Cache Preloading
Anda bisa langsung melakukan Preload Cache hanya dengan satu kali klik melalui opsi ini.

Regenerate Critical CSS
Tombol ini adalah opsi tindakan cepat untuk me-Regenerate Critical CSS.

3. Setup Cache

Mobile Cache
Aktifkan mobile cache untuk caching perangkat seluler. Jika desain website anda benar-benar responsife coba Aktifkan “separate cache files for mobile devices”, ini akan meningkatkan kecepatan website secara signifikan. seperti yang dijelaskan WP Rocket dalam halaman dokumentasi;

“Not sure what to do? 😰
When in doubt, always enable both options. This can result in twice as many cache files on your server, but it will in any case fit your needs, no matter how responsive your site is exactly.”

WP Rocket

User Cache
Biarkan nonaktifkan opsi ini jika website anda tidak memiliki lebih dari satu pengguna.

Cache Litespan
Saat Anda mempublikasikan atau memperbarui posting/halaman/jenis posting khusus , WP Rocket secara otomatis menghapus cache untuk konten tertentu itu dan konten lain apa pun yang terkait dengannya (yaitu beranda, kategori, tag, pagination, dll.). Konten ini dan halaman terkait akan dimuat sebelumnya secara otomatis.
Semakin rendah angka berarti masa caching halaman lebih pendek dan akan lebih sering disegarkan yang akan memakan lebih banyak sumber daya server. Sedangkan angka lebih tinggi akan menyimpan cache halaman yang lebih panjang dan jarang disegarkan yang dapat menghemat sumber daya server. Dpengaturan deafult WP Rocket adalah 10 jam tapi disini saya ubah angkanya menjadi 12 jam.

4. Pengaturan File Optimization

WP Rocket memungkinkan Anda untuk mengecilkan file statis seperti JavaScript dan stylesheet CSS. Anda cukup beralih ke tab Pengoptimalan File dan centang kotak untuk jenis file yang ingin Anda perkecil. Meminimalkan konten statis membuat ukuran file tersebut lebih kecil. Pada pengaturan pengoptimalan File di WP Rocket terdapat dua setting utama yaitu;

CSS Files

Minify CSS
Enable opsi ini agar memungkinkan WP Rocket minifikasi yang menghilangkan spasi dari kode CSS.

Combine CSS Files
Biarkan tidak dicentang! Combine CSS berfungsi untuk menggabungkan semua file Anda menjadi 1 dan mengurangi permintaan HTTP. Akan tetapi WP Rocket sendiri tidak menyarankan untuk mengaktifkan opsi ini jika situs Anda menggunakan HTTP/2. Untuk itu, sebaiknya selalu uji coba lebih dalam.

Optimize CSS Delivery
Centang opsi “Optimize CSS delivery” menghilangkan CSS yang memblokir perenderan di situs web Anda untuk waktu muat yang lebih cepat.

Remove Unused CSS
Biarkan pengaturan ini secara deafult. Tapi jika anda sudah mengetahui secara pasti file CSS yang tidak digunakan, sebaiknya centang “Remove Unused CSS” untuk menghapus CSS yang tidak digunakan per halaman dan membantu mengurangi ukuran halaman dan permintaan HTTP agar kinerja website lebih baik.

JavaScript Files

Minify JavaScript :
Aktifkan Minify JavaScript untuk menghilangkan spasi dan komentar untuk mengurangi ukuran file halaman.

Combine JavaScript files :
Seperti halnya Combine CSS, Combine JavaScript files juga bisa menyebabkan terjadinya error pada website. Untuk itu sebaiknya uji coba secara mendalam sebelum mengaktifkan opsi ini.

Delay JavaScript Execution :
Jika anda menggunakan JavaScript yang ingin dikecualikan dari penundaan WP Rocket, silahkan masukkan script yang ingin ditunda pemuatannya pada kolom yang tersedia.

Cara setting Delay JavaScript WP Rocket Terbaru

Inilah salah satu perbedaan cara setting WP Rocket terbaru dimana pada WP Rocket versi sebelum 3.9 opsi ini mengandalkan daftar penyertaan , yaitu, Anda menambahkan skrip yang ingin Anda tunda. Dari versi 3.9 keatas cara dan logikanya dibalik, pada versi terbaru anda cukup memasukan script yang tidak ingin ditunda. Jadi, ketika memperbarui versi WP Rocket dari 3.7 atau 3.8 secara default Delay JS diaktifkan, atau ketika Anda mengaktifkan fitur di WP Rocket 3.9.0.5 atau yang lebih baru, semuanya akan ditunda secara default dan hanya pengecualian script yang ingin dikecualikan yang perlu dimasukkan kedalam kolom.

5. Pengaturan Media

Untuk optimasi gambar di WordPress dengan optimal sebaiknya aktifkan semua opsi yang ada pada bagian optimasi media WP Rocket seperti Lazyload, Add Missing Images Dimensions, Disable WordPress Embeds dan WebP Caching.

Lazy Load

Aktifkan opsi ini untuk menunda pemuatan gambar sebelum pembaca menggulir layar.

Lazy load images – Aktifkan! Fitur ini memungkinkan Anda untuk mengaktifkan lazy loading pada foto apa pun di galeri Anda. Meskipun versi terbaru WordPress sudah menerapkan Lazyload gambar secara default, namun setelah saya coba non-aktifkan opsi ini justru TTFB semakin tinggi jadi sebaiknya diaktifkan saja.

Enable for iframes and Video – Aktifkan! untuk menunda pemuatan media iframe dan Video.

Replace YouTube iframes with preview images – Aktifkan! untuk mengubah preview video YouTube dengan gambar yang lebih ringan daripada video yang akan memperlambat loading web karena video sematan sangat berat.

Add Missing Images Dimensions

Aktifkan! Dengan mengaktifkan opsi ini, WP Rocket akan menambahkan atribut lebar + tinggi gambar yang hilang secara otomatis.

Disable WordPress Embeds

Aktifkan opsi ini untuk mencegah situs lain menyematkan konten anda ke website mereka yang dapat menyebabkan beban bandwith dan membebani server anda.

WebP Caching

Sebaiknya aktifkan opsi ini untuk mencache gambar versi WebP yang lebih ringan dengan catatan: anda sudah menginstal plugin WebP Converter For Media seperti ShortPixel atau plugin WebP create rekomendasi WP Rocket yaitu Imagify.

6. Pengaturan Preload

Preload Cache
Activate Prelading: ON.
Activate Sitemp-based Cache Preloading: ON.
WP Rocket secara otomatis mendeteksi peta situs yang dihasilkan oleh plugin sitemap yang anda gunakan.

Preload Links: ON
Aktifkan link preloading dengan cara centang pada “Enable Link Preloading“.

Prefetch DNS Requests
Prefetching DNS sangat berguna untuk memuat file eksternal lebih cepat, terutama di jaringan seluler. Berikut beberapa url standard yang dapat dimasukan kedalam DNS Prefetch tergantung mana yang anda gunakan:

//maps.googleapis.com
//maps.gstatic.com
//fonts.gstatic.com
//use.fontawesome.com
//ajax.googleapis.com
//apis.google.com
//google-analytics.com
//www.google-analytics.com
//ssl.google-analytics.com
//www.googletagmanager.com
//www.googletagservices.com
//youtube.com
//i.ytimg.com
//player.vimeo.com
//api.pinterest.com
//assets.pinterest.com
//connect.facebook.net
//platform.twitter.com
//syndication.twitter.com
//platform.instagram.com
//referrer.disqus.com
//c.disquscdn.com
//cdnjs.cloudflare.com
//cdn.ampproject.org
//pixel.wp.com
//disqus.com
//s.gravatar.com
//0.gravatar.com
//2.gravatar.com
//1.gravatar.com
//sitename.disqus.com
//s7.addthis.com
//platform.linkedin.com
//w.sharethis.com
//s0.wp.com
//s1.wp.com
//s2.wp.com
//stats.wp.com
//ajax.microsoft.com
//ajax.aspnetcdn.com
//s3.amazonaws.com
//code.jquery.com
//stackpath.bootstrapcdn.com
//github.githubassets.com
//ad.doubleclick.net
//stats.g.doubleclick.net
//cm.g.doubleclick.net
//stats.buysellads.com
//s3.buysellads.com
//i0.wp.com
//i1.wp.com
//i2.wp.com

Preload Fonts
Masukan url file font yang anda muat sebelumnya (satu per baris) pada kolom. sebagai contoh:

/wp-content/plugins/easy-table-of-contents/vendor/icomoon/fonts/ez-toc-icomoon.woff2

7. Pengaturan Advanced Rules

Never Cache URL(s): Biarkan kosong

Never Cache Cookies: Biarkan kosong

Never Cache User Agent(s): Biarkan kosong

Always Purge URL(s): Biarkan kosong

Cache Query String(s): Biarkan kosong

8. Pengaturan Database

Pengaturan Database WP Rocket ini saya terapkan pada situs alviya.com ini.

Post Cleanup

Revisions: ON
Auto Draft: ON
Ini akan menghapus Revisi dan draf posting akan secara permanen. WP Rocket tidak menganjurkan ini opsi ini jika Anda perlu menyimpan revisi atau draf.

Catatan: Saya pribadi lebih suka menggunakan penyimpanan otomatis pada browser untuk menyimpan draft posting.

Trashed Posts: ON
Ini akan menghapus semua sampah pos dari database untuk mendapatkan ruang penyimpanan lebih.

Comments Cleanup

Untuk menghapus komentar spam dan komentar yang dibuang ke sampah secara permanen.

Spam Comments: ON
Trashed Comments: ON

9. Pengaturan CDN

Pada tab pengaturan CDN, centang fitur Enable Content Delivery Network untuk mengirimkan konten melalui layanan CDN (Content Delivery Network) yang terhubung dengan WP Rocket.

Fitur ini akan membuat kecepatan website Anda meningkat dengan signifikan. Sebab CDN memungkinkan pengguna untuk mengunduh file yang ada pada website Anda melalui lokasi server terdekat. 

Selain itu, CDN juga efektif untuk mengurangi beban server hosting yang menghasilkan kinerja website semakin responsif.

Untuk cara setting cdn di wp-rocket sendiri bisa berbeda url CDN nya tergantung pada CDN yang digunakan. Tapi sebenarnya hal itu sama saja. Berikut ini cara setting CDN pada plugin wp rocket:

Langkah 1: Mendaftar layanan CDN.
Daftar pada layanan CDN yang ingin anda gunakan untuk mendapatkan url CDN anda.

Langkah 2: Salin URL CDN Anda.
Biasanya sebagai contoh url CDN https://cdn.domainanda.com

Langkah 3: Masukkan URL CDN Anda pada kolom isian.
Masukan url CDN yang anda gunakan pada kolom yang tersedia. Sebagai contoh url CDN yang saya masukan pada kolom WP Rocket adalah https://cdn.biz.id/alviya.com.

Langkah 4: Pilih reserved for pada dropdown.
Gunakan opsi ini untuk memilih salah satunya jika anda ingin menggunakan jaringan CDN untuk file terpisah:

• ‌All Files
• ‌Images
• ‌CSS and JavaScript
• ‌JavaScript
• ‌CSS

Langkah 5 : Excludes File from CDN
Gunakan opsi ini untuk mengecualikan file dari CDN agar tidak dikirimkan melalui jaringan Content Delivery Network (CDN).

Langkah 6 : Save Change.
Cara setting cdn pada plugin wp rocket selesai.

10. Pengaturan Heartbeat

Kontrol Heartbeat WP Rocket memungkinkan Anda mengelola frekuensi Heartbet API WordPress dalam beberapa klik. Ia menggunakan file /wp-admin/admin-ajax . php untuk menjalankan panggilan AJAX dari browser. Secara default, permintaan AJAX dikirim setiap 15 detik di halaman edit posting, dan setiap 60 detik di dasbor. Tapi seperti yang sudah dijelaskan WP Rocket “Menonaktifkan Heartbeat sepenuhnya dapat merusak plugin dan tema menggunakan API ini.”. Untuk itu sebaiknya biarkan semua pengaturan secara deafult.

Control Heartbeat: Off

Reduce or disable Heartbeat activity

Sebaiknya pelajari lebih lanjut sebelum menggunakan opsi Reduce or disable Heartbeat activity dibawah ini;

Reduce activity Behavior in backend
Reduce activity Behavior in post editor
Reduce activity Behavior in post frontend

11. Menggunakan Add-Ons WP Rocket

Pada bagian Add-ons WP Rocket sebelumnya terdapat juga pengaya Google Analytics, namun kini sudah tidak lagi tersedia. Saat ini Add-ons yang tersedia hanya tiga dan berikut ini cara setting didalamnya:

Varnish

Biarkan dinonaktifkan sesuai pengaturan awal kecuali Anda menggunakan Varnish.

Cloudflare

Cara setting WP Rocket jika anda mgnggunakan CDN CloudFlare:

Cloudflare credentials

Global API key: Masukkan API key akun CloudFlare anda.
Account email: Isi email yang digunakan di akun ClouFlare.
Zone ID: Isi dengan kode Zone ID CloudFlare.

Catatan: API key, Email, dan Zone ID bisa anda temukan di dasbor Cloudflare Anda.

Cloudflare settings

Development Mode : OFF
Optimal Settings : ON
Relative Protocol : OFF

Sucuri

Biarkan dinonaktikan jika anda tidak menggunakan Sucuri. Tapi jika anda menggunakannya silahkan aktifkan Ad-ons Sucuri di WP Rocket ini.

12. Pengaturan Image Optimization

Instal Imagify – Cara setting WP Rockect untuk optimasi gambar bisa dilakukan dengan menginstal plugin rekomendasi WP Rocket yaitu Imagify.

Compress Gambar – Kompres gambar anda untuk membuat situs web Anda lebih cepat, dengan tetap menjaga kualitas gambar. Caranya, sebelum diupload ke website anda bisa kompres gambar lebih dulu melalui bantuan tools online seperti TinyPng, atau compressspng dan lain-lain.

13. Pengaturan Tools

Export settings – Peralatan yang dapat anda gunakan untuk Ekspor Settings WP Rocket yang telah anda setting. Anda dapat mengunduh file cadangan pengaturan Anda.

Import settings – Jika anda sebelumnya sudah memiliki pengaturan WP Rocket sendiri yang tersimpan di komputer, anda juga dapat melakukan Impor pengaturan dari komputer Anda melalui alat Import Settings. (ukuran maksimum: 128 MB) IMPOR PENGATURAN

Rollback – Kembalikan Jika versi WP Rocket terbaru yang anda gunakan menyebabkan masalah pada situs web Anda, disini anda dapat mengembalikan ke versi sebelumnya dengan tombl Rollback.

Kesimpulan

Dari cara optimasi manual hingga cara setting WP Rocket adalah beberapa cara meningkatkan kecepatan website WordPress. Jika anda memiliki website yang berat dan ingin membuat website anda semakin cepat tapi tidak mau ribet, plugin cache WP Rocket adalah salah satu solusinya. Anda bisa menikmati berbagai fitur yang dapat membuat website anda lebih ringan dengan beragam fitur seperti preload fonts, Lazyload gambar, membersihkan database otomatis, menonaktifkan Heartbeat, menunda JavaScript, dan kompresi GZIP.

Demikian tutorial panduan cara setting WP Rocket plugin di WordPres versi terbaru 3.9.2. Ingin memercepat loading website WordPress? Dapatkan WP Rocket Plugin Cache #1 WordPress sekarang.