Kecepatan loading website menjadi faktor paling penting untuk menarik dan mengumpulkan pengunjung. Jika perfoma website tidak ada masalah, akan lebih banyak menarik pengguna. Hal ini karena mesin pencari mempertimbangkan kecepatan situs untuk membuat peringkat hasil pencarian. Jadi, jika kamu ingin membuat bersaing dalam segi SEO, maka prioritaskan kecepatan situsmu.
Mengukur kecepatan website belum tentu bisa berjalan dengan mulus. Ada banyak penyebab yang mungkin memengaruhi cara cek kecepatan website milikmu, mulai dari kecepatan koneksi internet hingga lokasi geografis. Di sinilah kamu dapat memanfaatkan PageSpeed Insights dari Google. Layanan ini disediakan secara gratis untuk menentukan skor website berdasarkan kecepatan loadingnya.
Ketika menggunakan PageSpeed Insights, tentunya kamu ingin mendapatkan skor setinggi mungkin. Namun, ternyata tidak semudah yang dipikirkan. Ada banyak hal yang harus diperbaiki salah satunya Eliminate render-blocking JavaScript and CSS. Berikut ini beberapa penjelasan mengenai apa itu Eliminate render-blocking JavaScript and CSS dan cara mengatasinya.
Apa sih yang dimaksud Eliminate render-blocking JavaScript and CSS?
Render-blocking artinya pemuatan. Jadi, jika Javascript membuat blocking, itu berarti Javacript-nya menahan halaman dari loading. Google sendiri menganjurkan untuk menghapus Javascript yang dapat mengganggu dalam pemuatan konten halaman web kamu. Untuk memahami petunjuk ini lebih jauh, maka kita harus melihat kriteria Google dalam memberikan skor pada situs di PageSpeed Insights. Ada sepuluh aturan berkaitan dengan kecepatan loading website yang telah ditetapkan oleh Google, dan jika kamu gagal menerapkan salah satu dari aturan ini, maka akan berakibat pada pengurangan poin atau nilai.
Render-blocking merupakan satu dari sepuluh aturan ini. Secara khusus, script JS dan CSS membuat web browser untuk menunda loading halaman HTML. Tentunya ini tidak kamu inginkan. Tak ada satu orang pun yang ingin melihat konten yang belum ditata. Akan tetapi, render-blocking JS and CSS merujuk pada script tersebut, yang membawa latensi loading tetapi tidak digunakan dalam above-the-fold (ATF) content. ATF content merujuk pada bagian dari halaman web yang terlihat ketika halaman melakukan loading. Jadi, melalui petunjuk ini, Google ingin memberitahukan bahwa ada script JS dan CSS di halaman web ini yang melakukan perlambatan tidak perlu pada halaman web.
Lalu bagaimana cara memperbaiki Error Eliminate render-blocking JavaScript and CSS in above-the-fold content? Kamu bisa menggunakan Google PageSpeed Insights untuk mengidentifikasikan script render-blocking. Kemudian, kamu bisa menggunakan 3 metode yang berbeda untuk memperbaiki masalah Error Eliminate render-blocking JavaScript and CSS ini di situs WordPress.
Langkah-Langkah untuk Menghilangkan Error Eliminate render-blocking JavaScript and CSS in above-the-fold Content
JS dan CSS merupakan hal paling penting bagi setiap website agar bisa berfungsi di semua bagian. Akan tetapi, performa yang buruk pasti akan selalu ada. Beberapa cara yang bisa kamu gunakan agar situsmu menjadi lebih cepat, seperti menunda (defer) parsing JavaScript. Namun, terkadang itu saja tidak cukup. Untuk mengatasi masalah ini, yang perlu kamu lakukan adalah mencari berbagai kemungkinan untuk perbaikan. Ada 3 langkah yang bisa kamu lakukan, di antaranya:
Menggunakan Google PageSpeed Insights
Langkah pertama untuk mengatasi render-blocking adalah mengukur kecepatan website kamu menggunakan Google PageSpeed Insights. Kunjungi halaman Google PageSpeed Insights, dan di kolom input, tempel (paste) nama domain situs URL kamu. Klik Analyze untuk mendapatkan laporan mengenai situs kamu. Kebanyakan nilai atau skor situs berkisar di antara 50-70; ini harus menjadi patokan bagi skor di website-mu. Kemudian Google akan membuat daftar saran untuk meningkatkan performa situs yang kamu miliki. Jika setelah mengukur kecepatan website dengan tool PageSpeed Insights kamu masih mendapatkan petunjuk Eliminate render-blocking JavaScript and CSS in above-the-fold content, maka kamu harus tetap membaca tutorial WordPress ini.
Baca Juga : W3 Total Cache: Tutorial dan Review
Menggunakan W3 Total Cache
Setelah mengetahui kode render-blocking di website. Kamu bisa mengunduh sebuah plugin yang membuat semuanya menjadi mudah saat menghadapi eror semacam ini. Salah satu plugin itu adalah W3 Total Cache. ikuti langkah-langkah dibawah ini.
- Buka Performance – General Settings. Cari heading Minify di halaman tersebut.
- Di bawah heading akan ada beberapa pilihan. Pilihan pertama adalah Minify; beri tanda centang pada kotak Enable di samping pilihan tersebut.
- Pada Minify mode, pilih Manual, dan klik tombol Save all settings.
- Di poin ini, kamu harus mengeluarkan semua script JS dan CSS yang menyebabkan render-blocking. Kedua script ini dapat kamu temukan melalui Google PageSpeed Insights. Jika kamu tidak menutup tab PageSpeed seperti yang disarankan di Langkah 1, maka kamu akan menemukan teks Show how to fix yang dapat diklik di bawah petunjuk render-blocking. Klik teks tersebut. Setelah itu, semua daftar yang memuat script dan stylesheet penyebab render-blocking dapat diketahui.
- Kembali ke WordPress. Buka Performance -> Minify. Kamu harus me-minify kedua file JS dan CSS secara terpisah.
- Pertama, mari kita lihat JS. Di halaman tersebut, cari heading JS. Kemudian kamu akan melihat bagian Operations in areas. Pilih Non-blocking using defer sebagai tipe yang di-embed untuk tag before <head>.
- Di bawah sub-heading JS file management, pilih tema yang aktif dan klik tombol Add Script. Kemudian salin (copy) URL JS dari tab PageSpeed, dan tempel (paste) script tersebut satu per satu. Langkah ini memperbaiki file JS.
- Sekarang saatnya menangani CSS. Di halaman ini, scroll ke bawah untuk menemukan bagian CSS. Di bawah sub-heading CSS file management, pilih tema yang aktif dan klik Add a style sheet. Sama halnya dengan script JS, salin/tempel (copy/paste) stylesheet dari PageSpeed Insights ke bagian ini.
- Terakhir, klik tombol Save settings and Purge Cache.
Kembali ke halaman Google PageSpeed Insights untuk mengecek apakah render-blocking sudah bisa teratasi.
Menggunakan Autoptimize
Langkah lain yang lebih mudah untuk mengatasi masalah render-blocking adalah dengan menggunakan plugin lain yang disebut Autoptimize. Unduh dan instal plugin tersebut, Setelah proses instalasi plugin Autoptimize selesai, buka menu Settings -> Autoptimize di WordPress. Beri tanda centang pada kotak Optimize Javascript Code? dan Optimize CSS Code? dan klik tombol Save Changes and Empty Cache.
Umumnya, cara ini sudah cukup untuk mengatasi masalah render-blocking (tergantung pada tema dan plugin yang aktif). Untuk mengetahui apakah cara ini ampuh, maka buka situs kamu melalui PageSpeed Insights sekali lagi.
Kalau kamu ingin melakukan optimasi lebih jauh, maka kembali ke Settings -> Autoptimize. Klik tombol Show Advanced Settings. Beri centang pada Also aggregate inline JS dan Also aggregate inline CSS. Lalu, akhiri dengan mengklik Save changes and Empty Cache. Untuk melihat apakah langkah ini berhasil, buka PageSpeed Insights sekali lagi.
Kesimpulan
Render-blocking memberi pengaruh negatif pada kecepatan dan performa website WordPress. Di tutorial WordPress ini, kamu telah mempelajari cara mengatasi Eliminate render-blocking JavaScript and CSS in above-the-fold content di website. Semoga bermanfaat!
