Cara Setting WP Rocket Versi Terbaru (Lengkap)

86 / 100

Cara setting WP Rocket sebenarnya tidaklah susah. Karena kita sudah diberikan interface yang simpel dan juga dokumentasi lengkap. Namun terkadang bagi pemula yang masih awam, belum tahu bagaimana cara setup plugin WP Rocket agar bisa optimal. Khususnya untuk plugin WP Rocket versi terbaru.

Sebelumnya saya sudah menuliskan tentang cara setting plugin AMP for WP. Bagi yang tertarik silahkan baca postingan tersebut.

Plugin WP rocket adalah salah satu plugin cache terbaik dan juga super komplit. Kenapa saya katakan super komplit? Karena tidak hanya berfungsi sebagai plugin cache, tapi hampir semua masalah speed teratasi oleh plugin ini.

Apa kelebihan WP Rocket dibandingkan plugin lain?

Jika dibandingkan dengan plugin cache lain seperti WP Super cache dan W3 Total cache, WP Rocket jauh lebih unggul. Banyak fitur yang dimiliki oleh WP Rocket namun tidak tersedia di pesaingnya tersebut. Lebih lengkapnya silahkan lihat pada url berikut Perbandingan WP Rocket dengan plugin lain.

Salah satu fitur unggulan di versi terbarunya adalah adanya fitur Delay Javascript Execution. Adanya fitur ini kecepatan website bisa meningkat lumayan besar. Berikut adalah hasil tes kecepatan salah satu postingan blog saya ketika mengaktifkan fitur tersebut.

Hasil tes kecepatan settingan wp rocket

Itu adalah hasil kecepatan blog saya setelah melakukan setup plugin WP Rocket. Lumayan kan? Oiya plugin WP Rocket yang saya gunakan di blog ini adalah versi terbaru. Jadi pada artikel ini saya juga akan menuliskan bagaimana cara setting wp rocket versi terbaru.

Cara setting WP Rocket

Dashboard

Pada menu dashboard WP rocket hanya berisi tampilan detail akun dan menu akses cepat untuk membersihkan cache website (tidak ada yang perlu disetting). Disini juga tersedia menu Regenerate Critical CSS. Silahkan klik menu tersebut agar WP Rocket membuat jalur Critical CSS. Hal ini berfungsi untuk menghindari render-blocking di google pagespeed.

Cache

Pada bagian menu cache yang perlu diaktifkan adalah bagian Mobile Cache. Hal ini bertujuan untuk meningkatkan kecepatan situs versi mobile.

Cara setting WP Rocket menu cache

Untuk bagian lainnya biarkan default.

File Optimization

CSS Files

Minify CSS Files : Aktifkan

Combine CSS Files

Silahkan aktifkan apabila situs Anda masih menggunakan protokol http/1. Hal ini bisa mengurangi permintaan http. Namun jika situs web sudah menjalankan protokol http/2, tidak disarankan. Karena tidak akan memberikan banyak bermanfaat.

Cek terlebih dahulu apakah situs web sudah menjalankan protocol http/2 atau masih http/1, silahkan gunakan tool https://tools.keycdn.com/http2-test.

Minify css wp rocket

Exclude CSS Files

Berguna untuk menambahkan file yang tidak ingin dicombine jadi satu saat kita mengaktifkan fungsi Combine CSS Files. Karena sering kali jika disatukan tampilan situs terkadang menjadi berantakan.

Optimize CSS Delivery

Aktifkan fungsi Optimize CSS Delivery. Fungsi ini bisa mengatasi masalah render-blocking di website. Plugin WP Rocket mengatasi masalah render-blocking dengan cara membuat jalur critical css untuk konten yang terlihat di paruh atas dan memuat file css lainnya secara asinkron.

Pastikan untuk menambahkan secara manual file css paruh atas ke dalam Fallback Critical CSS. Hal ini sebagai cadangan apabila Critical CSS yang dihasilkan WP Rocket tidak lengkap.

Optimize css delivery wp rocket

JavaScript Files

Remove jQuery Migrate: Aktifkan

Minify JavaScript Files: Aktifkan

Combine JavaScript Files

Sama seperti combine css sebelumnya. Jika situs Anda sudah mendukung http/2 tidak usah diaktifkan.

Minify JavaScript Wp Rocket

Load JavaScript Defer dan Safe Mode for jQuery: Aktifkan

Delay JavaScript Execution: Aktifkan (bagian ini adalah tambahan cara setting wp rocket versi 3.7 ke atas)

Defer JavaScript WP Rocket

Kemudian pada bagian kotak Script to delay, Anda juga bisa menambahkan sendiri script yang ingin ditunda pemuatannya. Namun jika belum familiar, saya sarankan biarkan default saja. Karena plugin WP Rocket juga sudah menyediakan beberapa script untuk ditunda pemuatannya pada kotak tersebut.

Media

Lazyload: Aktifkan semua fungsi lazyload.

Tapi ingat, jika web menggunakan logo dalam bentuk gambar, maka saya sarankan untuk mengecualikannya dari fungsi lazyload. Karena jelek aja kalau logo baru muncul setelah semua element berhasil di muat. Lagian juga ukuran logo sangat kecil.

Untuk exclude logo blog dari lazyload silahkan copy paste kode berikut ke function.php Anda. Letakkan paling bawah sebelum tag penutup kode function.php.

/* exclude logo from lazy */
function rocket_lazyload_exclude_src( $src ) {
	$src[] = 'Logo-tedieka-200_60';

	return $src;
}
add_filter( 'rocket_lazyload_excluded_src', 'rocket_lazyload_exclude_src' );

Ganti Logo-tedieka-200_60 dengan nama logo web Anda. Pastikan namanya sama persis.

Emoji: Aktifkan

Embed: Aktifkan

WebP compatibility: Aktifkan jika memang menggunakan gambar Webp

Preload

Preload Cache

Plugin WP Rocket akan otomatis menghasilkan cache mulai dari link home page dan juga sitemap jika fungsi ini diaktifkan. Namun jangan khawatir ketika Anda melakukan update atau menerbitkan artikel, wp rocket akan otomatis melakukan preloading ulang.

Fungsi preload akan memastikan semua link dimuat sebelumnya. Sehingga situs bisa diakses lebih cepat. Jika memiliki halaman daftar isi saya sarankan untuk memasukkannya secara manual pada box Sitemaps for preloading seperti gambar berikut.

Preload cache wp rocket

Preloading links: Aktifkan

Prefetch DNS Requests

Silahkan masukkan url js atau css eksternal yang ingin Anda prefetch. Hal ini bertujuan untuk membuat file external bisa terload dengan cepat. Cara kerjanya adalah browser akan mengirimkan permintaan koneksi ke domain file eksternal sebelum file dibutuhkan. Sehingga begitu file tersebut dibutuhkan bisa langsung terload tanpa membutuhkan waktu koneksi lagi.

Silahkan masukkan satu per satu url eksternalnya pada kotak URLs to Prefetch seperti gambar berikut:

Prefetch dns di wp rocket
Pada kotak dialog di atas saya hanya memasukkan url cdn dan kode js Adsense.

Preload Font

Jika Anda mendapatkan saran dari google page speed berupa tulisan “Preload Key Request” pada url font, silahkan gunakan fungsi ini. Tapi ingat jangan memasukkan semua url font ke dalam kotak preload. Karena itu justru akan menurunkan performa situs. Hanya masukkan url font yang memang penting.

Catatan: Font harus dihosting di domain Ada sendiri. Font eksternal seperti google font tidak bekerja dengan fungsi ini.

Saran saya lakukan tes kecepatan halaman sebelum dan sesudah Anda mengaktifkan fungsi preload untuk melihat perubahannya.

Advanced Rules

Biarkan default jika hanya mengelola blog wordpress biasa tanpa multiuser login. Namun jika Anda memiliki halaman custom login untuk member atau penulis tamu, silahkan exclude tersebut dari url yang di cache (tidak diexclude pun juga tidak masalah sih).

Misalnya halaman custom login member Anda adalah domainutama.com/login/member/…

Maka masukkan path /member/(.*)

Never cache url wp rocket

Artinya semua path setelah /member/ tidak akan di cache.

Database

Aktifkan semua fungsi di database kecuali Auto Drafts. Kemudian pada bagian Frequency ubah menjadi monthly.

Artinya semua database dalam wordpress Anda (Revisions, Trashed Posts, Spam comments, Trashed Comments, Expired Transients, All Transients, dan Tables) akan dihapus setiap sebulan sekali.

Hal ini bertujuan untuk optimasi database dalam hosting.

CDN

Aktifkan jika Anda mempunyai layanan CDN (CDN Name) yang ingin digunakan di wordpress. Sebagai contoh, pada gambar di bawah saya menggunakan layanan dari Bunnycdn.

konfiguasi cdn wp rocket

Silahkan pilih file statis yang ingin dilayani melalui CDN. Saya sarankan “All files” atau “CSS dan JavaScript”. Namun pastikan mengetesnya terlebih dahulu menggunakan tools page speed dan lihat perubahannya.

HeartBeat

Aktifkan fungsi Control HeartBeat. Kemudian sesuaikan pengaturannya seperti gambar di bawah.

Heartbeat Wp rocket

HearBeat API (admin-ajax.php) biasanya berfungsi untuk transfer data secara realtime dan sinkronisasi antara server dan browser. Hal ini terkadang di beberapa server dapat menyebabkan kelebihan beban atau penggunaan CPU yang tinggi jika tidak dikontrol.

Oleh karena itu dengan mengaktifkan settingan wp rocket di atas, berarti kita mengurangi interval aktifitasnya. Biasanya 1 hit per menit menjadi 1 hit per dua menit.

Add-ons

Aktifkan google tracking apabila Anda menggunakan script google analytic. Begitu juga dengan yang lainnya (aktifkan jika pakai addon tersebut).

Sedangkan pada bagian cloudflare dan sucuri biarkan off secara default. Blog dengan target visitor indonesia tidak saya sarankan menggunakan cloudflare (kecuali dnsnya saja).

Image Optimization

Biarkan default. Jika Anda ingin mencoba menggunakan imagify, silahkan coba install. Kemudian bandingkan kecepatan website antara sebelum dan sesudah menggunakan plugin imagify.

Sepengalaman saya tidak jauh berbeda. Karena saya memang mengkompres terlebih dahulu gambar yang saya upload ke blog hingga ukuran terkecil. Beda kasusnya jika gambar Anda belum terkompres dengan baik.

Sekian cara setting wp rocket. Apabila ada pertanyaan jangan sungkan untuk berkomentar.

Sekedar informasi, saya juga menyediakan plugin WP Rocket premium (otomatis update dashboard). Bagi yang berminat silahkan hubungi saya melalui menu kontak blog ini. Untuk harga normal 100.000, namun khusus sekarang ini saya berikan diskon 50% menjadi 50.000 saja.

Gratis konsultasi cara setting + uang kembali 100% jika plugin yang Anda terima bukan lisensi asli.

Bagikan:

Leave a Comment