WP Rocket adalah plugin cache premium yang sangat populer. Inilah panduan cara setting WP Rocket yang paling ideal dan optimal agar WordPress makin ngebut.
Bagi para pengguna CMS WordPress, penggunaan plugin caching bisa dikatakan sebuah kebutuhan wajib. Salah satu plugin caching premium yang sangat populer adalah WP Rocket.
Bagaimana cara setting WP Rocket paling optimal?
Kami tidak akan panjang lebar mengulas apa itu plugin cache dan apa itu WP Rocket. Ketika Anda berada di artikel ini, kami asumsikan Anda sudah memiliki pemahaman yang baik tentang keduanya.
Kunci utama memiliki situs WordPress yang cepat adalah kualitas hosting yang bagus. Meski Anda menggunakan WP Rocket namun kualitas hosting buruk dan optimasi WordPress yang kurang tepat, hasilnya tetap akan zonk!
Kami akan memberikan panduan cara setting WP Rocket paling optimal yang bisa Anda terapkan. Setting ini sudah kami coba di beberapa situs WordPress yang kami kelola dan hasilnya sangat memuaskan.
Disclaimer:
- Tidak ada paksaan untuk mengikuti tutorial ini, segala macam error atau hasil yang tidak sesuai harapan bukan tanggung jawab saya
- Tidak ada namanya setting yang ideal, untuk mendapatkan hasil yang memuaskan terkadang membutuhkan berbagai modifikasi.
- Ketika membuat panduan ini, WPNesia.id menggunakan plugin WP Rocket dengan konfigurasi sama seperti yang kami uraikan disini.
- Blog terpasang Adsense.
Update: 01 Desember 2021.
CACHE
- Enable caching for mobile device √
- Separate cache file for mobile devices: aktifkan kalau tema belum responsif. Kalau tema yang digunakan sudah responsif maka tidak perlu diaktifkan
- Enable caching for logged-in WordPress users: aktifkan untuk blog yang memiliki membership. Kalau tidak memiliki fitur membership tidak perlu diaktifkan
- Cache Lifespan: isi antara 10 hingga 24 jam. Jangan mengatur melebihi 24 jam untuk menghindari berbagai masalah seperti ukuran cache yang gemuk.
File Optimization
Konfigurasi akan sedikit rumit di sini. Di sini adalah kunci untuk memilih konfigurasi mana yang tepat.
Apa yang saya rekomendasikan di menu ini belum tentu cocok dengan theme dan plugin yang Anda gunakan. Kuncinya adalah memahami masing-masing fitur dan mencobanya satu per satu.
1. Minify CSS file
Aktifkan fitur ini untuk mengurangi ukuran CSS. Pastikan untuk cek penampilan halaman blog setelah fitur ini diaktifkan. Beberapa fitur seperti slider terkadang tidak kompatibel dengan minify yang akhirnya slider tidak berfungsi dengan baik.
2. Combine CSS files
Aktifkan kalau hosting Anda masih menggunakan HTTP/1. Kalau sudah menggunakan HTTP/2 tidak perlu diaktifkan.
Jika Anda memaksakan mengaktifkan combine di HTTP/2 untuk mengejar skor GT Metrix atau pun Google Pagespeed Insight silahkan saja.
Mungkin dari segi skor bisa meningkat, namun dari segi kecepatan loading akan semakin menambah beban HTTP requests yang artinya menambah waktu pemuatan halaman.
Bagaimana cara cek HTTP/2? Kunjungi halaman HTTP/2 Test dan masukkan domain Anda dan akan muncul hasilnya.
3. Optimize CSS delivery
Fitur ini memiliki dua pilihan yang hanya bisa diaktifkan 1 fungsinya. Saya akan memberikan penjelasan masing-masing fungsinya supaya Anda bisa menerapkan mana pilihan yang tepat.
4. Remove Unused CSS
Kalau Anda mendapatkan peringatan “Remove unused CSS” ketika cek di PageSpeed Insight, Anda bisa mengaktifkan fitur ini.
Fitur ini masih BETA dan ada beberapa sisi buruk yang berpotensi timbul seperti membengkaknya ukuran database.
Langkah paling bijaksana adalah melakukan uji coba dulu dengan fitur ini. Jika tampilan halaman situs Anda normal dan ukuran database tidak mengalami pembengkakan secara signifikan, fitur ini cocok untuk theme yang Anda gunakan.
5. Load CSS Asynchronously
Ketika fitur ini diaktifkan, halaman akan memuat CSS styles secara asinkron atau bertahap. Kalau kualitas hosting buruk atau pada dasarnya tema yang digunakan berat, fitur ini bisa menjadi bumerang. CLS akan meningkat dan muncul peringatan FOUC (flash of unstyled content).
6. Aktifkan
Pada dasarnya Anda harus mencoba fitur mana yang cocok dengan situs Anda saat ini. Jika kedua fitur di atas menimbulkan masalah pada tampilan halaman situs dan CSS, ada baiknya tidak perlu mengaktifkan fitur Optimize CSS delivery.
7. Minify JavaScript files
Aktifkan fitur ini untuk menghilangkan baris kosong di JavaScript sehingga mengurangi ukurannya.
Sejauh ini fitur ini aman diterapkan di theme apa pun yang digunakan. Namun ada baiknya tetap melihat apakah ada masalah dengan fungsi seperti sticky menu atau Adsense.
8. Combine JavaScript files
Penjelasan sama dengan CSS combine. Sangat disarankan untuk tidak menggunakan fitur ini terutama jika situs Anda menampilkan adsense. Banyak kasus iklan adsense tidak muncul karena fitur ini.
9. Load JavaScript deferred
Fitur ini akan memuat semua file JavaScript setelah halaman sepenuhnya dimuat. Fitur ini bermanfaat untuk menghilangkan masalah eliminate render-blocking resources.
Namun untuk beberapa hosting dan theme, fitur ini terkadang belum berjalan dengan baik. Jadi jika fitur ini belum berjalan dengan baik dan tidak bisa mengatasi masalah eliminate render-blocking resources, Anda bisa mengombinasikan WP Rocket dengan Autoptimize.
10. Delay JavaScript execution
Delay JavaScript execution adalah fitur WP Rocket yang mulai diterapkan di versi 3.7. Fungsinya adalah menunda eksekusi JavaScript sehingga akan mempercepat pemuatan (loading) website.
Pengguna Adsense bisa memanfaatkan fitur ini untuk menunda scripts Adsense. Apakah beresiko terhadap penayangan dan pendapatan iklan Adsense? Jawaban terbaik adalah silahkan dicoba sendiri.
Dalam kondisi default, WP Rocket akan menunda beberapa tipe JavaScript kecuali yang penting dan sering dibutuhkan oleh theme seperti jquery.
11. Excluded JavaScript Files
Kalau Anda mengalami masalah dengan Adsense seperti iklan yang keluar dengan lambat atau penurunan impresi (penampilan iklan), masukkan JavaScript milik Adsense untuk dikecualikan dari penundaan.
Caranya masukkan “adsbygoogle.js” ke dalam kotak Excluded JavaScript Files.
Media
LazyLoad
- Enable for images: √.
- Enable for iframes and videos √ (jika ada link video baik dari Youtube atau Vimeo).
- Replace YouTube iframe with preview image: √ (preview video dalam artikel akan di-convert dalam bentuk gambar, sehingga halaman akan lebih ringan untuk dimuat)
- Add missing image dimensions: √ (sangat berguna untuk optimasi CLS)
- Excluded images or iframes: berguna untuk mengecualikan gambar dari lazyload, mengurangi masalah dengan CLS.
Mengecualikan logo atau featured image (gambar unggulan) yang ada di bagian atas (above the fold) akan membuat gambar lebih cepat ditampilkan dan menghindari terjadinya Cumulative Layout Shift (CLS).
Pada contoh gambar di atas, saya memasukkan CSS class dari logo dan gambar unggulan (itu adalah CSS class dari GeneratePress Premium).
Preload
1. Active Preloading
Preload bisa menjadi fitur yang berguna dan dalam beberapa kondisi akan membebani server hosting.
Aktifkan Preload ketika:
- Situs Anda tidak memiliki banyak halaman
- Hosting Anda memiliki sumber daya yang cukup.
Jangan diaktifkan ketika:
- Situs memiliki ribuan halaman atau ukuran sitemap yang besar
- Shared hosting dengan spesifikasi rendah
- Pengunjung situs sudah mencapai ribuan pengunjung dengan beban server yang tinggi.
Jika pengunjung situs Anda sangat tinggi namun menggunakan konfigurasi VPS atau dedicated server yang efisien, menggunakan fitur Preload bisa menjadi opsi yang ideal.
Catatan: preloading akan berpotensi meningkatkan penggunaan CPU. Jika server Anda mengalami lonjakan penggunaan CPU, langkah pertama bisa menonaktifkan fitur ini.
2. Enable link preloading
Fitur yang sangat berguna untuk melakukan preloading internal link yang ada di dalam halaman konten.
WP Rocket akan melakukan preloading link yang terdeteksi di dalam konten, ketika pengunjung mengklik link tersebut, maka link akan terbukan nyaris secara instan.
3. Prefetch DNS Requests
WP Rocket akan melakukan prefetch domain pihak ke 3 sehingga akan lebih cepat dimuat oleh halaman.
Apa yang dimaksud domain pihak ke 3?
Ketika situs Anda menampilkan Adsense, semua iklan tersebut berada di server milik penyedia iklan dalam hal ini Google. Situs tentu akan memerlukan waktu untuk memuat DNS dari server milik Google.
Dengan melakukan prefetch, permintaan DNS akan dilakukan secepat mungkin dan iklan akan lebih cepat tampil di halaman situs.
Jika ada link dari pihak ketiga di dalam artikel (seperti menampilkan Google Maps, link Google Photos), Anda bisa memasukkan link pihak ketiga tersebut disini. Ikuti contoh cara memasukkan link seperti gambar berikut.
Pada contoh gambar diatas saya memasukkan link Google Maps.
Ada beberapa link pihak ketiga yang bisa dimasukkan disini. Berikut ini beberapa pilihannya sesuaikan dengan apa yang Anda gunakan.
Contoh penggunaan: jika Anda menggunakan Google Analytics, maka masukkan //google-analytics.com dalam list prefetch.
//maps.googleapis.com
//maps.gstatic.com
//fonts.googleapis.com
//fonts.gstatic.com
//ajax.googleapis.com
//apis.google.com
//google-analytics.com
//www.google-analytics.com
//ssl.google-analytics.com
//youtube.com
//api.pinterest.com
//cdnjs.cloudflare.com
//pixel.wp.com
//connect.facebook.net
//platform.twitter.com
//syndication.twitter.com
//platform.instagram.com
//disqus.com
//sitename.disqus.com
//s7.addthis.com
//platform.linkedin.com
//w.sharethis.com
//s0.wp.com
//s1.wp.com
//s2.wp.com
//s.gravatar.com
//0.gravatar.com
//2.gravatar.com
//1.gravatar.com
//stats.wp.com
//www.googletagmanager.com
//www.googletagservices.com
//adservice.google.com
//pagead2.googlesyndication.com
//tpc.googlesyndication.com
//bp.blogspot.com
//1.bp.blogspot.com
//2.bp.blogspot.com
//3.bp.blogspot.com
//4.bp.blogspot.com
//ajax.microsoft.com
//ajax.aspnetcdn.com
//s3.amazonaws.com
//code.jquery.com
//stackpath.bootstrapcdn.com
//use.fontawesome.com
//player.vimeo.com
//github.githubassets.com
//referrer.disqus.com
//c.disquscdn.com
//0.gravatar.com
//2.gravatar.com
//1.gravatar.com
//ad.doubleclick.net
//googleads.g.doubleclick.net
//stats.g.doubleclick.net
//cm.g.doubleclick.net
//stats.buysellads.com
//s3.buysellads.com4. Preload Fonts
Preload Fonts hanya bisa digunakan untuk font lokal (masih 1 hosting dengan situs). Jika menggunakan Google Fonts yang berasal dari server luar, tentu saja fitur ini tidak bisa digunakan.
Advanced Rules
Fitur ini secara umum bisa diabaikan untuk situs tipe blog atau website informasi pada umumnya.
Menu ini perlu perlakuan khusus bagi web eCommerce (toko online) terutama yang menggunakan WooCommerce. Dalam beberapa kasus, beberapa fitur WooCommerce seperti cart widget berpotensi mengalami masalah dengan plugin cache.
Database
Rutin membersihkan database akan membuat halaman depan situs dan halaman wp-admin memuat lebih cepat. Gunakan fitur ini dengan hati-hati dan selalu backup database secara rutin (bisa menggunakan Updraftplus).
CDN
Menu untuk menyambungkan situs WordPress dengan CDN. Namun bukan untuk CDN seperti Cloudflare. Jika Anda menggunakan BunnyCDN (bunny.net), Anda bisa menyambungkannya di menu ini.
Heartbeat
Ini adalah fitur untuk mengontrol WordPress Heartbeat API. Dalam beberapa kasus, WordPress Heartbeat API bisa menguras sumber daya server terutama pada CPU. Aktifkan fitur ini untuk mengurangi “detakan”.
Add-ons
Kalau Anda menggunakan CDN dari Cloudflare, Anda bisa mengintegrasikan WP Rocket dengan Cloudflare di sini. Anda bisa melewatkan fitur yang ada di sini jika tidak ada satupun yang Anda gunakan.
Image Optimization
Fitur ini hanya terintegrasi dengan plugin Imagify yang juga dibuat oleh tim WP Rocket. Jika Anda tidak menggunakan Imagify untuk optimasi gambar, menu ini bisa dilewati.
Baca juga: Cara Mempercepat Website WordPress (Panduan Lengkap)
Kesimpulan
WP Rocket adalah plugin cache dan optimasi dengan pengaturan minimal namun memiliki efek signifikan dalam mempercepat situs berbasis WordPress.
Salah satu keunggulan WP Rocket memang adalah pada bagian konfigurasi yang sederhana agar yang bukan ahli pun tidak kesulitan melakukan konfigurasi WP Rocket namun dengan hasil yang optimal.
Kami mengharapkan Anda berhasil mendapatkan hasil yang optimal setelah menerapkan panduan cara setting WP Rocket ini. Semoga berhasil.
Baca juga:
Buka jasa install wp-rocket gak mas? 😀