UPDATED – Setting WP Rocket

Kecepatan mengakses blog jadi persoalan wajib yang harus diperhatikan. Pada artikel ini saya akan berbagi secara lengkap cara setting plugin WP Rocket versi terbaru, dan akan terus di update jika ada perubahan.

Sejak bulan Juli 2018 lalu Google sudah menyatakan bahwa kecepatan sebuah web jika di akses dari perangkat mobile kini jadi salah satu penentu SEO, alias peringkat artikel di halaman pertama mesin pencari.

Jadi udah ngga ada toleransi lagi untuk performa blog Anda. Harus maksimal. Nah, WP Rocket adalah solusi All In One terbaik menurut saya. Banyak gabungan fitur beberapa plugin ada di dalam WP Rocket.

Misalnya, ada fitur minifying Html – Js – Css milik plugin Autoptimize, ada fitur Image Lazyload milik A3 Lazyload, ada fitur optimasi database milik plugin WP Optimize, dan masih banyak lagi fitur-fitur lainnya.

Jadi sudah seharusnya Anda pakai plugin ini.

Tes kecepatan blog Rayadventure
Salah satu blog saya yang pakai WP Rocket

Plugin WP Rocket cuma tersedia versi berbayar aja. Harga termurahnya $49 per tahun untuk 1 web. Mau lebih murah ? Saya tawarkan Rp. XXX.000 per tahun untuk 1 web dan saya bantu setting. Lisensinya resmi, karena pakai Infinite license seharga $249 untuk unlimited website.

Berminat ? Chat saya 0821 1997 0853 ( klik aja nomornya ).

Cara Setting Plugin WP Rocket

Oke, saya akan membagikan pengaturan WP Rocket yang paling optimal. Referensi pengaturan ini saya dapatkan dari beberapa blog luar.

P.S : Update 2 April 2020 v3.5.2

1. Install Plugin

Cara yang pertama tentu saja install plugin terlebih dahulu. Kalau Anda beli sendiri, berarti tinggal upload file Zip yang di dapat dari member area. Kalau Anda beli ke saya, berarti saya yang akan install & aktifkan.

2. Dashboard

Pengaturan pertama WP Rocket ada pada dashboard. Ada beberapa keterangan disini, termasuk masa berlaku lisensi. Silahkan hidupkan toggle pada bagian Rocket Tester & Rocket Analytics.

Dashboard plugin WP Rocket
Dashboard WP Rocket

Rocket Tester akan memberikan Anda notifikasi lebih awal kalau ada update baru WP Rocket yang belum rilis ke umum / beta update. Sedangkan Analytics memungkinkan WP Rocket menganalisa data-data blog Anda, semisal spesifikasi server, jenis CMS, dan banyak lagi.

3. Cache

Di bagian ini tersedia opsi mengaktifkan mobile cache. Kenapa mobile ? Karena mayoritas pengakses internet saat ini dari handphone. Dan menurut saya mendongkrak kecepatan versi Desktop tuh relatif gampang. Jadi memang lebih penting menggunakan cache untuk mobile.

Cara setting plugin WP Rocket : Mobile cache
Mobile cache

Pada bagian User Cache dan Cache Lifespan biarkan default.

User cache dan cache lifespan
User cache & lifespan

4. File Optimization

Di bagian ini fungsinya adalah “merampingkan” kode-kode Html, Js, dan Css di blog Anda agar lebih sedikit requestnya dan lebih kecil ukurannya. Pada bagian Basic Settings berikan ceklis pada semua kotak.

Basic settings optimization
Basic settings

Pada bagian CSS Files berikan ceklis pada kotak pertama dan ketiga. Combine CSS Files ngga perlu dilakukan kalau blog Anda sudah support HTTP/2. Ini penjelasan resmi WP Rocket mengenai hal ini.

Cara setting plugin WP Rocket : CSS files
CSS settings

Pada JavaScript Files juga hanya berikan ceklis pada kotak seperti gambar di bawah ini saja. Anda tidak perlu melakukan Combine Js Files kalau blog Anda sudah menggunakan HTTP/2.

Pengaturan file JavaScript
Pengaturan file JS
Pengtaturan file JavaScript
Js settings – lanjutan

5. Media

Cara setting plugin WP Rocket untuk bagian media adalah seperti pada gambar di bawah ini. Berikan ceklis untuk semua kotak yang tersedia.

Cara setting plugin WP Rocket lazyload
Image & video lazyload
Menonaktifkan fitur emoji
Disable emoji & WP embed

Anda juga bisa mengaktifkan fitur WebP compatibility, kalau Anda menginginkan WP Rocket menampilkan gambar versi WebP di browser tertentu yang sudah support WebP.

Namun perlu digarisbawahi, bahwa WP Rocket ngga membuat versi WebP dari image yang sudah ada di blog Anda. WP Rocket hanya mengatur image versi apa yang akan ditampilkan di browser.

Fitur terbaru WebP compatibility
WebP compatibility

6. Preload

Fitur ini memungkinkan WP Rocket menghasilkan cache dimulai dari link-link yang ada di Homepage dan berdasarkan Sitemap blog Anda, ketika Anda menambah atau meng-update konten baru di blog.

Fitur preload cache pada WP Rocket
Preload cache

Di bagian DNS prefetching, masukkan URL web-web eksternal yang script nya terpasang di blog Anda, misalnya kode pixel Facebook, kode tracking Google Analytics, kode GTM, dan kode lainnya.

File-file tersebut berasal dari luar blog Anda, dan ngga bisa di optimasi. Jadi dengan adanya DNS prefetching akan membuat waktu load file-file tersebut lebih cepat, khususnya saat di akses dari hp.

DNS prefetching untuk eksternal URL
DNS prefetching

Berikut ini beberapa yang perlu Anda masukkan :

  • //ajax.googleapis.com
  • //connect.facebook.net
  • //www.googletagmanager.com
  • //maps.googleapis.com
  • //maps.gstatic.com
  • //fonts.googleapis.com
  • //fonts.gstatic.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
  • //platform.twitter.com
  • //syndication.twitter.com
  • //platform.instagram.com
  • //disqus.com
  • //sitename.disqus.com
  • //s7.addthis.com
  • //platform.linkedin.com
  • //w.sharethis.com
  • //s.gravatar.com
  • //stats.wp.com

Jangan dimasukkan semua ya. Sesuaikan URL nya dengan platform yang ada di blog Anda. Misalnya Anda ngga pasang Google Analytics, ya ngga perlu memasukkan URL //google-analytics.com.

7. Advanced Rules

Di bagian ini dikosongkan saja, kecuali Anda memang perlu untuk menggunakannya. Ada beberapa fitur yang tersedia :

  • Exclude URL tertentu agar ngga di cache.
  • Exclude cookie tertentu agar ngga di cache.
  • Bersihkan cache otomatis pada URL tertentu.

8. Database

Kalau Anda pernah menggunakan plugin WP Optimize, fiturnya 100% sama persis seperti di bagian ini. Gunanya untuk membersihkan sampah dan mengoptimasi database blog Anda sehingga lebih ringan di akses.

Berikan ceklis pada semua kotak kecuali “auto drafts”.

Cara setting plugin WP Rocket : DB cleanup
Post cleanup
Comments & transients cleanup
Comments & transients cleanup
Fitur database cleanup WP Rocket
Database cleanup

9. CDN

Kalau Anda menggunakan CDN, baik yang gratis atau berbayar, bisa memasukkan URL nya di bagian ini. Fungsi CDN bisa dijalankan untuk file-file statis seperti gambar, Css, dan Js.

Fitur CDN gambar, Js dan Css
Fitur CDN

CDN sangat membantu mendongkrak kecepatan akses blog Anda. Seperti gambar di atas saya menggunakan CDN bawaan WordPress.com. Harusnya fitur tersebut ( Photon ) ada di Jetpack. Anda bingung ?

Lain waktu saya akan bahas lebih detail soal ini. Untuk sementara ikuti saja gambar di atas. Ganti “Ngetik.id” dengan domain blog Anda.

10. Heartbeat

API HeartBeat WordPress menyediakan koneksi transfer data real-time antara server dan browser secara berkala. Pada kasus tertentu, aktivitas ini membebani kinerja server Anda, dan berimbas pada kecepatan blog.

Jadi melalui fitur ini Anda bisa menonaktifkannya.

Fitur untuk menonaktifkan Heartbeat
Disable heartbeat

11. Add-Ons

Add-Ons adalah fitur cache tambahan untuk file-file eksternal di dalam blog Anda. Silahkan aktifkan sesuai dengan kebutuhan. Misalnya, di blog ini menggunakan Analytics dan Facebook Pixel, jadi saya aktifkan keduanya.

Analytics dan Facebook pixel add ons
Analytics & FB Pixel

Kalau Anda menggunakan Cloudflare, Anda juga bisa mengintegrasikannya dengan WP Rocket. Tinggal aktifkan toogle, lalu lakukan pengaturan.

Cara setting plugin WP Rocket : Cloudflare add on
Cloudflare add on

Klik “Modify Options” dan lengkapi kolom Global API Key, Email dan Zone ID. Semuanya bisa Anda dapatkan di dalam akun Cloudflare Anda. Kalau bingung caranya, silahkan bertanya di kolom komentar yes.

Integrasi Cloudflare dan WP Rocket
Integrasi Cloudflare

Jangan lupa aktifkan “Optimal Settings”.

Pengaturan add on Cloudflare
Pengaturan Cloudflare

12. Image Optimization

Di bagian ini WP Rocket menawarkan untuk menginstall plugin Imagify yang berguna untuk mengoptimasi ukuran dan besarnya gambar-gambar di blog Anda agar cepat di akses. Saya sih belum pernah pakai plugin ini.

Kalau yang sejenis saya rekomendasikan WP Smush. Atau Anda bisa melihat bagaimana saya melakukan optimasi gambar dengan mudah.

13. Tools

Bagian terakhir, tersedia fitur untuk export & import seluruh pengaturan WP Rocket. Jadi kalau Anda membuat blog baru dan install plugin ini, ngga perlu melakukan pengaturan dari awal. Cukup import aja.

Selain itu juga ada fitur Rollback. Semisal Anda baru melakukan update plugin WP Rocket dan ternyata ada error / ngga kompatibel, Anda bisa klik Rollback untuk re-install plugin pada versi sebelumnya.

Penutup

Well, itulah 13 cara setting plugin WP Rocket versi saya, yang saya dapatkan dari beberapa referensi sekaligus. WP Rocket cukup berdampak baik untuk kecepatan blog saya, dan penurunan bounce rate.

Jadi gimana ? Anda sudah install plugin ini ? Kalau belum, kembali ke bagian atas artikel ini untuk lihat lagi penawaran menarik dari saya. Kalau ada yang perlu ditanyakan, yuk diskusi sehat di kolom komentar.

 

Diskusi Pembaca . . .

  1. Oh iya mas, ketinggalan dikomentar sebelumnya. Disalah satu website saya (tidak pakai cloudflare) menggunakan litespeed dan saya setting CDN Photon. Satunya lagi pakai cloudflare dan saya pakai cdn photon juga, tetap work sih tapi apakah tidak ada masalah ya?

    Balas
    • Kebetulan saya blm pernah pakai Litespeed. Selama web aman di akses, grafik visitor tdk ada perubahan yg janggal, harusnya aman2 aja.

      Balas
  2. Mas apakah tidak masalah pakai Photon dan menggunakan cloudflare sekaligus untuk image?

    Balas
    • Setau saya cloudlfare tidak meng-cover image #cmiiw.

      Namun terlepas dari itu, saat ini NgetikID pakai Photon + CF. Bisa dirasakan kecepatan aksesnya, plus di cek di tool2 seperti GTMetrix, Pingdom, atau Pagespeed Insight.

      Satu-satunya yang memberatkan blog ini hanya karena saya pakai Tag Manager utk kebutuhan Google Ads. Selebihnya tdk ada masalah ( harusnya ) mas.

      Balas
  3. Halo mas,
    Req cara sett LiteSpeed Cache dunk hehe wkwk
    Terima kasih.

    Balas
    • Hai mas, insya Allah ya, saya catat idenya. Thanks sudah berkenan mampir.

      Balas
  4. halo om
    saya ngikutin settingan wp rocket persis seperti yang disampaikan diweb ini

    memang hasilnya berubah drastis, jadi A semua
    tapi dampaknya website saya, jika dibuka melalui mobile
    jadi acak2an

    kira2 salah settingannya dibagian mana yah om
    minta solusinya

    Balas
    • Halo mas, maaf baru respon, karena komentarnya masuk spam. Berarti ada CSS yang bentrok, dan harus di exclude. Nah utk cari tau yg mana, emang agak sulit sih. Beda theme beda struktur jg soalnya.

      Balas
  5. Gan saya pakai WP Rocket 2.11.1 untuk website saya. Ada beberapa setting tambahan dengan mengikuti tutorial artikel ini yaitu :

    CDN dan

    Prefetch DNS requests:
    //www.googletagmanager.com
    //www.google-analytics.com
    //pixel.wp.com
    //wp.com
    //www.google.com/analytics/analytics/
    //marketingplatform.google.com/about/tag-manager/

    third party saya ambil dr PageSpeed Insight Google dan GTmetrix

    setelah clear cache dan regenerate critical path css, hasilnya

    PageSpeed Insight – Mobile 94 (meningkat dr pengaturan awal 78)
    GTmetrix – Fully Loaded Time 7.2s (menurun dr 2,1s)

    Kok bisa jd beda gitu ya hasilnya

    Balas
    • Hi mas Syaiful,

      Intinya adalah, kenapa hasilnya berbeda ? Kaena banyak faktor. Berbeda plugin-plugin lain yg digunakan, berbeda theme, berbeda hosting, dan faktor2 lain bisa jd pengaruh penyebab turunnya speed.

      Bisa jadi plugin WP Rocketnya tdk cocok.

      Contohnya beberapa blog saya ada yg lebih ngebut pakai Autoptimize, jd copot WP Rocketnya.

      Jadi solusinya adalah mencoba plugin2 optimasi lainnya yg sejenis mas. Karena pengaturan WP Rocket yg saya tulis sudah pasti belum tentu cocok untuk semua blog / web.

      Balas
      • Caranya ? Tinggal klik aja tulisan “regenerate critical path css” di bagian atas dashboard, di dalam menu “wp rocket”

        Balas
  6. cara mengetahui global api key nya gimana gan ?

    Balas
    • Hi mas,

      1. Login Cloudflare
      2. Pilih Site >> Masuk tab Overview
      3. Scroll ke bawah, di sidebar kanan bawah klik “Get Your API Token” ( di bawahnya Zone ID )
      4. Scroll ke bawah, ada tulisan “Global API Key” klik VIEW
      5. Masukkan password Cloudflare & klik VIEW
      6. Global API key tampil, tinggal di copy

      Balas
    • Login >> Klik site nya >> Scroll di kanan bawah ( sidebar ) ada Zone ID

      Balas
  7. Mau tanya di bagian “Preload-Prefetch DNS Request”
    kalo yang di isi adalah web yang dirtemuakan dr tools pengecekan pagespeed(gtmetrix webpagetest), apakah signifikan ?

    Balas
    • Saya ngga pernah ukur secara presisi, tapi memang ada kenaikan skor Yslow ( GTMetrix ) meskipun sedikit.

      Balas
  8. Mas, kalau kita pake wp rocket, apa perlu pake autoptimize? Katanya di artikel ini [https://ngetik.id/cara-setting-plugin-autoptimize/] autoptimize bisa dikombinasikan dengan wp rocket. Lalu setting untuk kombinasi tersebut bagaimana?

    Thanks,

    Balas
    • Pengaturan WP Rocket di bagian “File Optimization” dimatikan semua mas. Karena fungsinya sudah diwakili oleh Autoptimize.

      Balas

Anda Mau Berdiskusi ?

Tanyakan secara jelas ya agar saya bisa paham. Jangan pakai emoticon, nanti masuk spam.