Panduan Lengkap : Cara Setting WP Rocket Agar Website Kencang

0
1352

WP Rocket adalah plugin cache premium untuk WordPress yang sudah terkenal bisa membuat website lebih cepat koneksinya.

Setelah diaktifkan, secara otomatis WP Rocket akan menerapkan 80% pengaturan sendiri, sehingga Anda tidak perlu repot-repot melakukan pengaturan.

Namun, untuk hasil maksimal, Anda bisa melakukan konfigurasi tambahan pada WP Rocket agar menghasilkan kinerja terbaik pada web Anda.

Konfigurasinya tentu saja tidak sulit, Anda hanya perlu mengikuti alur panduan ini.

Aktifkan WP Rocket

Langkah pertama adalah install plugin WP Rocket di website Anda. Karena WP Rocket adalah plugin premium dan tidak punya versi gratis, Anda harus membeli lisensi yang valid terlebih dahulu.

Jangan gunakan versi GPL atau Nulled, karena akan berbahaya bagi website Anda.

Setelah Anda punya plugin WP Rocket Original, silahkan masuk ke Dashboard WordPress Anda untuk menginstall plugin, untuk cara menginstall plugin, Anda bisa baca artikel Cara Menginstal Plugin WordPress  – Langkah Demi Langkah Untuk Pemula

Sekarang kembali ke dashboard WordPress Anda dan unggah dan aktifkan plugin. Saat Anda menavigasi ke halaman pengaturan WP Rocket, Anda akan melihat konfirmasi bersama dengan informasi lisensi Anda.

Sekarang mari kita mulai dengan mengonfigurasi pengaturan WP Rocket yang sebenarnya.

Keunggulan Plugin WP Rocket

  • Full page and browser caching
  • Minify, combine and optimize CSS files
  • Minify, combine, and optimize JavaScript files
  • Defer and delay JavaScript
  • Preload cache
  • Preload links
  • Preload fonts
  • Prefetch DNS
  • Lazyload images
  • Add missing image dimensions
  • WebP caching
  • Optimize database
  • Schedule database cleaning
  • Control WordPress Heartbeat
  • Integrate CDN
  • Use with Cloudflare

Cara Terbaik Mengatur Plugin WP Rocket

WP Rocket secara otomatis menerapkan 80% dari pengaturan yang disarankan.

Ini termasuk mengaktifkan cache browser, cache halaman, kompresi GZIP, mengoptimalkan file font Google, menonaktifkan emoji WordPress, dll.

Berikut pengaturan tambahan yang bisa kita lakukan.

Mobile Cache

Secara default, caching seluler diaktifkan.

Anda dapat memilih untuk mengaktifkan cache terpisah untuk perangkat seluler jika web Anda menggunakan tema atau plugin khusus seluler.

Jika tidak, biarkan pilihan ini tidak dicentang.

User Cache

Jika mau, Anda dapat mengaktifkan caching untuk pengguna yang login ke website seperti Admin, Editor, Kontributor, dll.

Pilihan ini sangat cocok jika Anda mengelola website keanggotaan/membership.

Tetapi jika Anda menjalankan blog berita, maka disarankan untuk membiarkan pilihanini tidak dicentang.

Cache Lifespan

Pengaturan ini menentukan seberapa sering cache web Anda akan dibangun kembali.

Nilai default diatur ke 10 jam.

Ini sengaja diatur di sisi bawah untuk menghindari konflik dengan token keamanan WordPress yang disebut Nonces.

Idealnya, atur pilihan ini ke 12 jam, karena jika terlalu sering menghapus dan membangun kembali cache web, akan meningkatkan beban pada server host.

Beberapa shared hosting mungkin tidak menyetujui penghapusan cache yang terlalu sering.

Jika Anda jarang memperbarui web, atau hanya sesekali seperti seminggu sekali maka Anda dapat mengatur cache lifespan menjadi 24 jam.

Jadi, masa pakai cache 12 hingga 24 jam adalah ideal untuk sebagian besar web.

Pengaturan Pengoptimalan File di WP Rocket

Pengaturan ini akan mengoptimalkan file CSS dan JavaScript sehingga dimuat lebih cepat.

Mari kita lihat cara mengoptimalkan file CSS terlebih dahulu sebelum beralih ke file JavaScript.

Minify CSS Files

Pengaturan ini berfungsi untuk meminimalkan ukuran file CSS dengan cara menghapus spasi dan komentar di antara file CSS.

Memang, tidak terlalu berdampak dalam mempercepat waktu pemuatan halaman, namun akan meningkatkan ‘skor kinerja’ di web uji kecepatan seperti GTmetrix, Pingdom, dll. yang memperhitungkan minifikasi CSS saat menilai halaman web.

Penting: Setelah Anda mengaktifkan pengaturan Minify CSS, periksalah web Anda menggunakan mode penyamaran/pribadi untuk memastikan semuanya berfungsi normal.

Jika ternyata tampilan web jadi berubah atau rusak, silahkan nonaktifkan centang pilihan ini atau mengecualikan file CSS tertentu dari minifikasi.

Combine CSS Files

Pengaturan ini berfungsi untuk menggabungkan semua file CSS pada halaman menjadi satu file.

Hasilnya adalah ukuran halaman lebih kecil yang dapat meningkatkan skor kinerja website, tapi kemungkinan besar akan merusak banyak hal di web Anda.

Jadi, disarankan untuk membiarkan pilihan ini tidak dicentang.

Exclude file CSS

Jika ada yang rusak saat Anda Minify file CSS, maka mengecualikan file CSS tertentu dari minifikasi di pengaturan WP Rocket dapat membantu memulihkannya.

Langkah pertama adalah mengidentifikasi file CSS yang menyebabkan masalah. Untuk melakukannya, klik kanan pada elemen yang rusak dan klik Inspect Element di menu konteks browser (untuk Chrome).

Kemudian identifikasi plugin yang tidak merender elemen sebagaimana mestinya. Dalam contoh berikut, saya mengklik kanan formulir kontak saya di halaman Tentang untuk mengidentifikasi plugin. Saya dapat melihat bahwa plugin Forminator sedang memuat file CSS di halaman ini.

Setelah saya mengidentifikasi plugin yang file CSS-nya ingin saya kecualikan dari minifikasi, saya cukup memasukkan alamat plugin dan menambahkan (.*).css ke jalur untuk mengecualikan semua file CSS plugin itu dari minifikasi.

Contoh: /wp-content/plugins/forminator/(.*).css

Ini adalah cara yang bagus untuk meminimalkan file CSS Anda dan pada saat yang sama mengecualikan file tertentu yang tidak kompatibel dari proses minifikasi.

Optimize CSS Delivery

Pengaturan ini akan menghilangkan CSS yang memblokir render dari pemuatan halaman.

File CSS tertentu dapat memblokir rendering halaman web (memuat) ketika ditampilkan. Ini membuat halaman website menjadi lebih lama dibuka.

Pengaturan Optimize CSS Delivery di WP Rocket menghilangkan CSS yang memblokir render dan memuatnya setelah elemen lain dimuat.

Kelemahan dari pengaturan ini adalah, Cumulative layout Shift (CLS) yang merupakan metrik Google Core Web Vital dan menurunkan skor kinerja pada Kecepatan Laman.

Untuk itu, disarankan untuk tidak mengaktifkan fitur Optimize CSS Delivery di WP Rocket.

File JavaScript

Sekarang, kita akan pelajari cara mengoptimalkan file JavaScript menggunakan WP Rocket dengan beberapa klik mouse.

Minify JavaScript Files

Fitur ini mirip dengan Minyfy CSS.

Mengaktifkan pilihan ini akan meminimalkan file JavaScript di halaman web Anda dengan menghapus spasi dan komentar di antara file JS.

Ini akan meningkatkan skor kinerja di situs uji kecepatan.

Jadi, silahkan aktifkan pilihan Itu Minify JS files di pengaturan WP Rocket.

Combine Javascript Files

Jika web Anda menggunakan HTTP/2, sebaiknya abaikan pilihan ini karena dapat merusak tampilan website Anda.

Menggabungkan file JS dapat meningkatkan skor kinerja website Anda tetapi mungkin tidak benar-benar meningkatkan kecepatan halaman Anda.

Untuk itu, jangan aktifkan fitur ini.

Load JavaScript Deferred

File JavaScript tertentu memblokir rendering halaman (memuat) hingga file dimuat.

File JS semacam ini disebut pemblokiran render dan membuat halaman website menjadi lebih lama untuk ditampilkan.

Untuk mengatasi masalah ini, aktifkan pilihan untuk Load Javascript Deferred.

Sekarang, file JavaScript yang memblokir render akan ditangguhkan hingga halaman dimuat. Artinya, file ini tidak akan lagi menghalangi pemuatan halaman.

Delay JavaScript Execution

Anda pasti pernah mendengar tentang lazyload untuk gambar ketika gambar dimuat hanya ketika muncul di viewport pengguna.

Penundaan eksekusi JS mirip dengan lazyload tetapi untuk JavaScript.

Ini menunda eksekusi file JS hingga halaman menjadi interaktif bagi pengguna.

Mengaktifkan pilihan ini, akan meningkatkan skor Kecepatan Halaman dengan memperhatikan peringatan berikut:

  • Hapus JavaScript yang tidak digunakan
  • Minimalkan main thread work
  • Kurangi waktu eksekusi JS
  • Kurangi total waktu pemblokiran
  • Kurangi waktu untuk interaktif
  • Kurangi waktu First Contentful Pain

Singkatnya, menunda eksekusi JS berdampak besar pada inti Data Web situs Anda.

Uji semua perubahan

Setiap kali Anda mengaktifkan pengaturan CSS dan JavaScript di WP Rocket, silahkan lakukan menguji halaman web Anda secara menyeluruh untuk memastikan semuanya berfungsi sebagaimana mestinya.

Jika halaman menampilkan kesalahan atau perilaku tidak menentu, Anda dapat menghapus centang pada pengaturan tertentu atau menambahkan pengecualian ke kotak pengecualian di bawah setelan tersebut.

Pengaturan Image Optimzation di WP Rocket

Mengoptimalkan gambar sangat penting untuk mendapatkan skor tinggi pada parameter Core Web Vitals (CWV).

Core web vital Largest Contentful Paint (LCP) secara langsung terkait dengan gambar website karena, LCP kebanyakan adalah gambar berukuran terbesar di halaman web.

Untungnya, WP Rocket memiliki beberapa pengaturan pengoptimalan gambar bawaan yang keren. Pengaturan ini dapat digunakan bersama dengan plugin pengoptimalan gambar khusus.

Lazyload Images

Pilihan lazyload images akan memuat gambar pada halaman hanya ketika gambar muncul di area pandang pembaca.

Ini membantu untuk menghindari waktu pemuatan yang lama karena gambar tidak dimuat sekaligus tetapi hanya jika diperlukan.

Jika Anda menggunakan plugin pengoptimalan gambar khusus seperti WP Smush atau EWWW Optimizer, maka lazyload sudah aktif di website Anda.

Anda tidak perlu lagi mengaktifkan lazyloading di WP Rocket.

Namun, jika Anda hanya mengandalkan WP Rocket untuk mengoptimalkan penampilan gambar, maka Anda harus mengaktifkan kedua pilihan tersebut.

Tambahkan dimensi gambar yang hilang

Langkah yang bagus untuk menentukan dimensi gambar pada halaman.

Dengan cara ini, browser menyimpan ruang yang diperlukan untuk gambar sebelumnya.

Jika dimensi gambar tidak ada, hal ini dapat mengakibatkan sentakan canggung saat gambar tiba-tiba muncul di area pandang pengguna.

Ini juga dikenal sebagai Pergeseran Tata Letak Kumulatif (CLS), Core Web Vital yang harus Anda jaga.

Direkomendasikan: Cara Meningkatkan Vital Web Inti WordPress Anda

Aktifkan cache Image WebP

Pengaturan ini berada di menu Add-Ons.

WebP adalah format file gambar generasi terbaru untuk browser web yang diperkenalkan oleh Google.

Gambar WebP berukuran lebih kecil dibandingkan dengan gambar JPG atau PNG dan memiliki kualitas gambar yang sama.

Plugin pengoptimalan gambar seperti EWWW Optimizer secara otomatis mengonversi gambar JPG dan PNG Anda ke WebP.

Jadi jika Anda menggunakan plugin terpisah untuk konversi WebP, maka Anda tidak perlu mengaktifkan pilihan ini di pengaturan WP Rocket.

Jika tidak, pastikan untuk mengaktifkan cache gambar WebP, agar website Anda menadi lebih cepat.

Pengaturan WP Rocket Preload

Mengaktifkan pengaturan preload di WP Rocket akan memuat berbagai komponen halaman web, termasuk, cache, tautan, permintaan DNS, dan font untuk waktu pemuatan yang lebih cepat. Mari kita lihat setiap pengaturan satu per satu.

Preload cache

Anda harus mengaktifkan pilihan preload cache untuk mendapatkan kinerja yang lebih cepat. Preload membantu membangun kembali cache saat Anda memperbarui posting atau halaman atau memperbaruinya.

Anda juga dapat melakukan preload cache secara manual dari bilah admin WP Rocket di bagian atas.

Untuk hasil terbaik, aktifkan pilihan preload cache berbasis sitemap.

Ini akan membantu WP Rocket menemukan tautan konten Anda dengan mudah. Jika Anda menggunakan plugin SEO seperti Yoast SEO, RankMath, atau All-in-one-SEO, maka WP Rocket akan secara otomatis mendeteksi sitemap Anda.

Jika tidak, Anda dapat memasukkan sitemap XML secara manual yang seharusnya digunakan untuk preload.

Misalnya, saya secara manual memasukkan posting PassionWP, halaman, dan URL peta situs kategori.

Anda biasanya dapat menemukan URL peta situs dengan menavigasi ke https://situsanda.com/sitemap.xml

Preload Link

Pengaturan ini membantu meningkatkan waktu muat yang bisa dirasakan pengguna, tetapi tidak mempengaruhi skor kinerja di situs uji kecepatan.

Saat pengguna mengarahkan kursor ke sebuah tautan, cache halaman tersebut telah dimuat sebelumnya sehingga ketika pengguna benar-benar mengklik tautan tersebut, halaman tersebut akan dimuat dengan cepat.

Anda harus mengaktifkan plihan ini, karena ini meningkatkan pengalaman pengguna secara keseluruhan di web Anda.

Prefetching DNS Request

Prefetching DNS akan mengambil script dari web eksternal yang agar website berfungsi dengan lancar seperti Google Analytics, Google Font, Google Ads, Google API, dll.

Saat Anda mengunjungi web, terkadang Anda akan melihat pesan seperti ‘menunggu google-analytics.com’ di bagian bawah browser.

Permintaan dari DNS akan membuat web eksternal tersebut dimuat lebih cepat.

Ada URL tertentu yang dapat Anda masukkan di kotak URL untuk diambil terlebih dahulu. Sebagai contoh:

//fonts.googleapis.com

//fonts.gstatic.com

//google-analytics.com

//apis.google.com

//googletagmanager.com

//doubleclick.net (untuk iklan Google)

Preload fonts

Pilihan ini membantu memuat font yang digunakan di web Anda.

Tetapi agar fitur ini berfungsi, Anda harus meng-host font secara lokal dan menentukan jalur file font yang dihosting secara lokal.

Di samping gambar, file font biasanya membutuhkan waktu paling lama untuk dimuat.

Juga, jika Anda menggunakan file font yang dihosting secara eksternal seperti font Google, maka permintaan HTTP tambahan dibuat oleh server Anda yang menghasilkan waktu pemuatan halaman yang lebih lama.

Untuk mengatasi masalah ini, Anda harus meng-host file font secara lokal dan memanfaatkan pengaturan preload font di WP Rocket.

Yang perlu Anda lakukan adalah menentukan alamat lengkap file font yang dihosting secara lokal. File font disimpan di folder wp-content sehingga path harus dimulai dengan /wp-content/.

Pengaturan Database WP Rocket

Pengoptimalan database juga merupakan fitur bawaan WP Rocket sehingga Anda tidak perlu bergantung pada plugin terpisah untuk tujuan ini.

Menggunakan WP Rocket, Anda dapat mengotomatiskan tugas-tugas manajemen database berikut:

  • Bersihkan revisi posting, draf otomatis, posting yang dibuang
  • Bersihkan komentar spam, komentar yang dibuang
  • Transien pembersihan (file sementara yang disimpan dalam database MySQL)
  • Optimalkan tabel WordPress

Anda dapat memilih untuk melakukan pembersihan database secara manual atau menjadwalkan pembersihan untuk dijalankan pada frekuensi yang dijadwalkan.

Saya merekomendasikan pengaturan frekuensi mingguan untuk pembersihan database.

Membersihkan database secara teratur akan membantu mempercepat loading backend WordPress Anda.

Kontrol WordPress Heartbeat API

WordPress Heartbeat API menyediakan sinkronisasi dan transfer data real-time antara server Anda dan browser.

Ini digunakan oleh WordPress untuk berbagai tugas seperti menyimpan posting dan halaman secara otomatis, menampilkan pemberitahuan admin, memeriksa kesehatan situs, dll.

Selain WordPress, beberapa  tema dan plugin tertentu juga mengandalkan API ini untuk berfungsi.

Yang harus Anda ketahui adalah bahwa API WordPress membuat panggilan ke file admin-ajax.php setiap 15-16 detik yang dapat membebani beberapa server terutama jika Anda menggunakan server shared hosting.

Jadi, praktik yang disarankan untuk mengurangi aktivitas Heart Beat API di latar belakang dengan mengaktifkan pilihan Kontrol WordPress Heart Beat API.

Juga, biarkan pengaturan default dengan nilai Reduce Activity.

Setelah diaktifkan, WP Rocket akan mengurangi WordPress Heartbeat API dari satu hit per satu menit menjadi satu hit per dua menit.

Ini akan membantu Anda menghemat sumber daya server yang berharga dan website Anda menjadi lebih cepat dimuat.

Menggunakan Cloudflare dengan WP Rocket

Pengaturan Cloudflare dalam WP Rocket berada pada menu Add-Ons.

Konfigurasinya sangat mudah sekali.

Yang perlu Anda lakukan adalah mengaktifkan add-on Cloudflare dalam pengaturan WP Rocket.

Sekarang buka panel pengaturan add-on Cloudflare dan masukkan kredensial Cloudflare berikut:

  • Global API Key
  • Email akun Cloudflare Anda
  • Zone ID

Selanjutnya, pilih Opimal Settings dan simpan perubahannya.

Pengaturan Cloudflare yang optimal untuk WP Rocket

Menggunakan CDN dengan WP Rocket

Anda telah melihat betapa mudahnya mengatur Cloudflare dengan WP Rocket.

Tetapi bagaimana jika Anda menggunakan Jaringan Pengiriman Konten (CDN)?

Nah, menyiapkan CDN Anda dengan WP Rocket sangat mudah dan sederhana.

Catatan: Cloudflare bukan CDN. Jika Anda hanya ingin mengatur Cloudflare, ikuti instruksi di bagian sebelumnya dan lewati bagian ini.

Buka panel CDN dalam pengaturan WP Rocket dan pilih Enable Contentn Delivery network

Integrasikan CDN dengan WP Rocket

Setelah ini, masukkan CDN CNAME(s). Anda dapat menemukannya di dasbor akun CDN Anda. Contohnya adalah cdn.passionwp.com

Fitur keren lain dari WP Rocket adalah memungkinkan pengguna untuk menambahkan beberapa CNAME untuk berbagai jenis konten seperti Gambar, CSS & JavaScript, atau Anda dapat menggunakan satu CDN untuk semua file.

Ini berarti bahwa gambar Anda dapat disajikan dari cdn1, CSS dari cdn2, JavaScript dari cdn3. Terserah Anda.

Itu dia beberapa pengaturan WP Rocket terbaik untuk web Anda. Ada beberapa Aturan Lanjutan di WP Rocket, tetapi Anda dapat melewatinya karena tidak terlalu mendesak.

Kesimpulan Pengaturan Roket WP

WP Rocket bukan hanya plugin cache tercepat untuk WordPress, tetapi juga yang paling mudah untuk dikonfigurasi.

Bagian terbaik dari pengaturan WP Rocket adalah kontrol ekstensif yang diterima pengguna atas setiap aspek cache situs web mereka.

Pengguna pemula cukup mengaktifkan WP Rocket dan 80% dari pengaturan yang disarankan akan diterapkan secara otomatis oleh plugin.

Tetapi jika Anda memerlukan kontrol yang lebih terperinci untuk kinerja dan kecepatan situs yang optimal, ikuti tutorial yang mudah diikuti ini.

Baca juga artikel, 12 Cara Meningkatkan Kesehatan Website WordPress Anda.

TINGGALKAN KOMENTAR

Silakan masukkan komentar anda!
Silakan masukkan nama Anda di sini

Situs ini menggunakan Akismet untuk mengurangi spam. Pelajari bagaimana data komentar Anda diproses.