Atasi Eliminate Render-Blocking Dengan WP Rocket, ya.. kamu benar Eliminate Render-Blocking sering muncul ketika kita melakukan uji kecepatan wordpress menggunakan Google PageSpeed Insights, Dengan WP Rocket versi 3.8.0.1 terbaru ini masalah Eliminate Render-Blocking dapat diperbaiki dengan satu kali klik.
Sebelum kita bahas lebih jauh fitur terbaru dari WP Rocket versi 3.8.0.1 ini ada baik nya kamu tau dulu apa itu Eliminate Render-Blocking.
Apa Itu Eliminate Render-Blocking
Sebelum kita bahas lebih jauh tentang Eliminate Render-Blocking, kita harus paham dulu bagaimana browser yang kita gunakan merender atau menampilan halaman website, nah.. jadi begini, ketika website kita di akses menggunakan browser baik itu chrome, firefox, internet edge, safari versi dekstop atau pun browser untuk hp seperti android dan ios, browser akan membaca semua kode yang ada pada website kita dimulai dari atas ke bawah.
Ketika browser menemukan kode CSS dan Javascript maka secara otomatis, browser akan berhenti sejenak untuk membaca kode CSS dan Javascript tersebut dimana berhenti disini untuk mendownload dan membaca kode-kode yang ada pada file CSS, Javascript tersebut.
Dan ketika browser berhenti sejenak atau “jeda” ini maka akan ada waktu yang dibutuhkan sebelum browser dapat menampilkan keseluruhan tampilan website kita, sudah mengerti ya sampai disini..
Ok kita lanjutkan, pasti kamu sering tuh melihat website yang memiliki efek animasi keren banget, efek-efek ini biasanya menggunakan CSS, dan file Javascript yang banyak, yang mana biasanya file ini akan ada di bagian paling atas struktur kode dari website kita. Ini lah mengapa ketika kita menemukan website dengan banyak animasi, pemuatan nya akan lambat, dan jelas ini berpengaruh kepada kecepatan website tersebut.
Dan ketika di lakukan pengetesan di Google PageSpeed Insights maka hasilnya akan muncul error bertuliskan “Eliminate Render-Blocking“, artinya Google memberi kan peringatan kepada kita untuk tidak memuat file sumber daya yang tidak perlu dibagian atas kode website kita, karena ini akan memakan waktu lebih lama bagi browser untuk mendownload dan membaca file CSS dan file Javascript ini. Atau dalam bahasa linggis nya “ELIMINATE RENDER-BLOCKING“
Sampai disini paham ya…
File Apa Saja Yang Menyebabkan Render-Blocking?
File-file yang menyebabkan Render-Blocking umumnya adalah:
- File Font
- CSS
- HTML
- Javascript
Tapi perlu diketahui tidak semua file CSS dan Javascript menyebabkan Render-Blocking, jadi kita perlu mengetahui dulu dari file apa yang menyebabkan terjadinya Render-Blocking pada website kita.
File Apa Yang Tidak Menyebabkan Render-Blocking?
File yang tidak menyebabkan terjadinya Render-Blocking adalah:
- File Gambar
- File Video
- File Musik
Dan juga tag <script> yang di tempatkan dibagian bawah <body> tidak menyebabkan terjadinya Render-Blocking.
Cara Mengetahui Website Memiliki Render-Blocking
Untuk mengetahui website kita memiliki Render-Blocking atau tidak, kita dapat melakukan pengujian kecepatan website menggunakan Google PageSpeed Insights. Sebagai contoh disini saya melakukan tes pada website milik OM NEIL PATEL
Seperti yang kita lihat website milik om neil patel ini memiliki Render-Blocking, nah file ini lah yang harus kita optimasi agar kecepatan website kita tidak lambat. Bagaimana caranya? disini kita akan menggunakan WP Rocket versi 3.8.0.1 terbaru yang sudah memaksimalkan cara agar tidak terjadi Render-Blocking sehingga tidak akan muncul peringatan Eliminate Render-Blocking di Google PageSpeed Insights atau GTMetrix.
Cara Atasi Eliminate Render-Blocking Dengan WP Rocket
Pada WP Rocket Versi 3.8.0.1 terbaru, mereka telah mengoptimalkan fitur plugin ini agar para pengguna WP Rocket mendapatkan kecepatan maximal tanpa adanya Render-Blocking.
Beberapa hari lalu saya mendapatkan email dari tim WP Rocket yang memberitahukan bahwa mereka telah melakukan beberapa perubahan pada fitur plugin WP Rocket mereka.
Saya coba melakukan pengecekan melalui Changelog dari plugin WP Rocket ini dan juga pada halaman GitHub milik mereka yang bisa di lihat disini.
Dan memang ada banyak optimasi pada plugin WP Rocket ini yang mana mereka lebih memfokuskan pada metrik PageScore Insight dan pengalaman pengguna mereka.
OK untuk mengatasi masalah Render-Blocking, caranya cukup mudah, pada settingan WP Rocket masuk ke menu File Optimization, scroll ke bawah lalu centang menu Load JavaScript deferred, selanjutnya pada kolom Excluded JavaScript Files, pastikan kamu isi dengan kode dibawah ini:
/jquery-*[0-9.]*(.min|.slim|.slim.min)*([^\.]*).js
/jquery-?[0-9.]*(.min|.slim|.slim.min)?.jskode tersebut merupakan kode baru pada WP Rocket versi 3.8.0.1 yang tidak ada pada versi WP Rocket sebelumnya. Jika sudah klik save untuk menyimpan perubahan.
Apa Yang Baru Pada WP Rocket Versi 3.8?
Selain dari pemaksimalan kode script yang ada di plugin, WP Rocket juga menambahkan beberapa fitur baru dan pengoptimalan pada plugin WP Rocket Versi 3.8 keatas, antara lain:
• Removing the “Safe Mode for jQuery” option. To make WP Rocket even simpler to configure and use, we improved the handling of scripts relying on jQuery. So that we could remove the “Safe Mode for jQuery” option. This change can improve the Time to Interactive metric, one of the six metrics tracked in the Lighthouse report, so users could get a website faster and a better score on PageSpeed Insights and GTmetrix.
• Adding any missing width and height attributes on images: this change will help to improve the Cumulative Layout Shift (CLS) metric, one of the Core Web Vitals that will roll out as a ranking factor in May 2021.
• Excluding images from LazyLoad: with the new release, you can easily exclude specific images and iframes from LazyLoad directly through the plugin interface.
• Improving the user experience by removing some options from the user interface (e.g., The Cache Lifespan “Minutes” Frequency and the Beta Tester Option). Moreover, plugin configuration is faster and easier, thanks to some default options (e.g., WordPress Emoji Option).
Update WP Rocket versi 3.8.0.1 kali ini benar-benar sangat berdampak pada kecepatan wordpress, saya sendiri merasakan perbedaan yang sangat signifikan dimana kecepatan load wordpress di beberapa blog dan website yang saya kelola meningkat sangat drastis.
Belum punya WP Rocket? kamu bisa download WP Rocket pada link dibawah ini:
Untuk Cara Setting WP Rocket Versi 3 Terbaru secara lengkap kamu bisa baca pada artikel saya sebelumnya, disana saya kupas semua teknik cara setting wp rocket terbaik dengan hasil yang joss gandoss. Silahkan dibaca lagi pada link dibawah ini:
Cara Setting Wp Rocket Versi 3 Terbaru
Pertanyaan Tentang Atasi Eliminate Render-Blocking Menggunakan WP Rocket Versi 3.8
Berikut saya coba jawab beberapa pertanyaan yang sering ditanyakan untuk Atasi Eliminate Render-Blocking menggunakan plugin WP Rocket Versi 3.8
Bagaimana Mengatasi Eliminate Render-Blocking Secara Manual
Untuk mengatasi Eliminate Render-Blocking pada website berbasis WordPress adalah dengan melakukan tes pada Google PageSpeed Insights terlebih dahulu, jika menemukan peringatan tentang Eliminate Render-Blocking, hal pertama adalah cari tau file apa yang menyebabkan terjadinya Render-Blocking, umumnya ini terjadi untuk file CSS dan Javascript. Kamu tinggal mengoptimasi file yang ditemukan tersebut, sebagai contoh jika penyebab nya adalah CSS maka cobalah untuk meminify kode CSS tersebut.
Dan jika penyebab nya adalah Javascript, cobalah untuk melalukan defer kode javascript dengan cara meletakkan kode javascript pada bagian bawah struktur kode website wordpress kamu.
Tetapi, cara termudah tetap menggunakan bantuan plugin optimasi kecepatan seperti WP Rocket.
Apakah Bisa Atasi Eliminate Render-Blocking Dengan Plugin Lain?
Tentu saja bisa, kamu bisa coba menggunakan plugin optimasi lain seperti plugin Autoptimize, WP Fastest Cache, Litespeed Cache, atau plugin optimasi kecepatan lainnya.
Apakah Mengupgrade WP Rocket Ke Versi Terbaru Akan Menghapus Settingan Yang Sudah Ada?
Tidak, settingan yang sudah kamu lakukan sebelumnya tidak akan terhapus, namun untuk lebih aman nya, silahkan backup konfigurasi pengaturan WP Rocket pada menu Tools – Export Setting untuk mendownload konfigurasi settingan kamu terlebih dahulu.
Apakah Mengatasi Eliminate Render-Blocking Ini Penting?
YA, sangat penting dilakukan, mengingat Google akan lebih mengutamakan website yang memiliki kecepatan yang baik.
Kesimpulan
Dengan menggunakan WP Rocket Versi 3.8.x terbaru, maka permasalahan tentang Eliminate Render-Blocking dapat dengtan mudah di atasi, kita juga dapat dengan mudah melakukan optimasi kecepatan website WordPress kita hanya dengan beberapa settingan saja, dan tidak perlu menjadi seorang advance dalam melakukan tweaking kode website hanya untuk mengatasi Eliminate Render-Blocking.
Semoga artikel ini bermanfaat dan selamat mencoba.
