WordPress

Sep 10, 2024

Faradilla A.

4menit Dibaca

Cara Mengatasi Eliminate Render-Blocking JavaScript and CSS di WordPress

Cara Mengatasi Eliminate Render-Blocking JavaScript and CSS di WordPress

Website dengan loading yang cepat berpeluang mendapatkan peringkat tinggi di halaman hasil mesin pencari (SERP). Dalam hal ini, pemilik website bisa memanfaatkan tool uji kecepatan website seperti Google PageSpeed Insights untuk membantu mengoptimalkan performa websitenya.

Namun, tool tersebut sering kali menampilkan error yang mungkin membutuhkan penanganan lebih lanjut. Salah satu contohnya adalah Eliminate render-blocking JavaScript and CSS in above-the-fold content.

Jangan khawatir kalau Anda menjumpai error tersebut. Di artikel ini, kami akan menunjukkan cara mengatasi error “eliminate render-blocking resources” yang mungkin muncul di website.

Apa Arti “Eliminate Render-Blocking JavaScript and CSS in Above-the-Fold Content”

Eliminate Render-Blocking JavaScript and CSS merupakan salah satu aturan PageSpeed Google yang menganjurkan para pemilik website untuk menangani resource tertentu yang bisa memperlambat website.

Namun, bagaimana JavaScript dan CSS bisa membuat website menjadi lambat?

Nah, jadi, setiap kali Anda menginstal plugin atau tema baru di WordPress, program tersebut biasanya menambahkan kode JavaScript dan CSS ke front-end. Akibatnya, browser membutuhkan waktu lebih lama untuk memuat halaman.

Above-the-fold (ATF) mengacu pada bagian website yang langsung terlihat saat halamannya pertama kali dimuat. Bagian yang mengharuskan Anda scroll ke bawah untuk melihatnya tidak termasuk dalam konten ATF (non-ATF).

Apabila kode JavaScript dan CSS yang tidak relevan dirender saat website dimuat, Anda mungkin akan melihat peringatan “Eliminate render-blocking JavaScript and CSS in above-the-fold content”.

Cara Menemukan JavaScript dan CSS yang Bermasalah

Metode pertama untuk mengatasi masalah render-blocking adalah dengan menguji kecepatan website menggunakan Google PageSpeed Insights. Ikuti langkah-langkahnya di bawah ini:

  1. Buka halaman Google PageSpeed Insights, lalu masukkan URL website Anda di kolom Enter a web page URL.
  2. Klik Analyze untuk mendapatkan laporan.
tampilan hasil google pagespeed insights skor buruk

Tips Berguna

Sebagian besar website mendapatkan skor antara 50-70. Anda bisa menggunakan angka ini sebagai patokan untuk memperbaiki skor website Anda. Google juga akan memberikan saran untuk meningkatkan performanya.

tampilan google pagespeed insights menunjukkan error eliminate render-blocking resources

Apabila mendapatkan saran terkait “Eliminate render-blocking JavaScript and CSS in above-the-fold content”, artinya Anda perlu mengatasi masalah tersebut.

Perlu diingat bahwa Anda tidak perlu memaksa website untuk mendapatkan skor 100. Fokuslah untuk mendapatkan skor yang baik tanpa mengorbankan pengalaman pengguna.

Kemudian, kalau ada skrip penting yang berfungsi untuk mengoptimalkan UX website Anda, jangan menghapusnya hanya demi mendapatkan skor yang sedikit lebih tinggi di PageSpeed Insights.

Tips Berguna

Harap diingat bahwa aturan penilaian Google terhadap website Anda hanya berfungsi sebagai panduan. Anda tidak harus benar-benar mengikuti semuanya.

Cara Mengatasi “Eliminate Render-Blocking JavaScript and CSS in Above-the-Fold Content”

Di WordPress, Anda bisa mengatasi resource JavaScript dan CSS yang menghambat render dengan mudah menggunakan plugin. Berikut adalah tiga plugin yang bisa Anda gunakan untuk mengatasi masalah ini:

W3 Total Cache 

Plugin W3 Total Cache adalah salah satu pilihan favorit kami untuk mengoptimalkan kecepatan website WordPress. Setelah menginstal dan mengaktifkan plugin ini, ikuti langkah-langkah berikut di dashboard admin WordPress Anda:

  1. Buka Performance → General Settings.
  2. Cari bagian Minify di halaman tersebut. Anda akan menemukan beberapa opsi di bawahnya.
  3. Centang kotak Enable untuk Minify, lalu pilih Manual pada opsi Minify mode.
  4. Klik Save all settings.
tampilan plugin w3 total cache menunjukkan bagian minify css dan js

Selanjutnya, temukan semua skrip JavaScript dan CSS yang memblokir rendering. Anda bisa melakukannya melalui Google PageSpeed Insights.

Setelah menemukan penyebab masalahnya, ikuti langkah-langkah ini:

  1. Kembali ke Performance → Minify di dashboard WordPress.
  2. Temukan bagian JS, lalu di bagian Operations in area, pilih Non-blocking using “defer” untuk tag Before <head>.
  3. Pada JS file management, pilih tema aktif Anda dan klik Add a script. Salin dan tempel URL JavaScript dari Google PageSpeed Insights ke kolom yang tersedia.
tampilan plugin w3 total cache menunjukkan bagian pengaturan minify js
  1. Scroll ke bawah dan temukan bagian CSS. Untuk CSS file management, pilih tema aktif Anda dan klik Add a style sheet. Salin URL CSS dari PageSpeed Insights dan tempelkan di kolom yang sesuai.
tampilan plugin w3 total cache menunjukkan bagian pengaturan minify css
  1. Terakhir, klik Save Settings & Purge Caches.

Autoptimize

Cara lainnya, Anda bisa menggunakan plugin Autoptimize untuk mengatasi masalah render-blocking JavaScript and CSS. Setelah menginstal dan mengaktifkan plugin ini, ikuti langkah-langkah berikut:

  1. Buka Settings → Autoptimize.
  2. Centang kotak Optimize JavaScript Code? dan Optimize CSS Code?.
  3. Klik Save Changes and Empty Cache.
tampilan plugin autoptimize menunjukkan bagian pengaturan

Biasanya, langkah-langkah ini sudah cukup untuk mengatasi peringatan yang muncul. Namun, hasilnya bisa berbeda tergantung pada tema dan plugin Anda.

Untuk memastikan masalah render ini telah teratasi, periksa lagi website Anda di PageSpeed Insights. Apabila masih ada resource JS dan CSS yang bermasalah, optimalkan website lebih lanjut dengan mengikuti langkah-langkah berikut:

  1. Kembali ke Settings → Autoptimize.
  2. Klik Show Advanced Settings.
  3. Centang opsi Also aggregate inline JS dan Also aggregate inline CSS.
tampilan plugin autoptimize menunjukkan bagian pengaturan tingkat lanjut
  1. Setelah itu, simpan perubahan.

Speed Booster Pack

Plugin lain yang bisa membantu Anda mengatasi “Eliminate render-blocking resource” adalah Speed Booster Pack. Berikut langkah-langkahnya melalui dashboard wp-admin Anda:

  1. Buka Speed Booster Pack dan akses tab Advanced.
  2. Pada menu JavaScript Optimization, aktifkan Move scripts to footer dan Defer parsing of JavaScript files.
tampilan plugin speed booster menunjukkan bagian opsi javascript
  1. Scroll ke menu CSS Optimization untuk mengatur opsi render-blocking CSS.
  2. Di sini, Anda akan melihat beberapa pengaturan lain untuk minify atau mengatur CSS agar menjadi inline dan dipindahkan ke footer. Anda bisa bereksperimen dengan opsi-opsi ini untuk menemukan pengaturan terbaik.
tampilan plugin speed booster menunjukkan bagian optimasi css

Tips Berguna

Mengaktifkan semua opsi ini memang bisa membuat website Anda lebih cepat, tapi bisa menyebabkan Flash of Unstyled Content (FOUC) yang mengganggu. FOUC terjadi ketika browser menampilkan halaman web tanpa menunggu style sheet dimuat sehingga konten akan muncul sekilas dalam tampilan yang belum diberi style.

Setelah mencoba metode di atas, kembali ke Google PageSpeed Insights untuk melihat kembali apakah masalah render-blocking telah teratasi di website Anda.

Kesimpulan

Kecepatan website merupakan salah satu faktor terpenting untuk mendapatkan pengunjung, yang juga dipertimbangkan oleh mesin pencari saat menentukan peringkat website. Jadi, Anda wajib menerapkan berbagai strategi untuk mempercepat website Anda.

Anda bisa menggunakan PageSpeed Insights dari Google untuk menilai website berdasarkan kecepatannya. Apabila mendapatkan saran terkait “Eliminate render-blocking JavaScript and CSS in above-the-fold content”, Anda bisa menggunakan plugin untuk mengatasi masalah ini.

Semoga tutorial ini berhasil membantu Anda mengatasi error “eliminate render-blocking resources”, ya. Yuk sampaikan pertanyaan Anda lewat kolom komentar di bawah ini! Semoga berhasil!

Pelajari Tutorial WordPress Teknis Lainnya

Cara Menambahkan CSS Kustom di WordPress
Cara Mengedit HTML di WordPress

Author
Penulis

Faradilla A.

Faradilla, yang lebih akrab disapa Ninda, adalah Content Marketing Specialist di Hostinger. Ia suka mengikuti tren teknologi, digital marketing, dan belajar bahasa. Melalui tutorial Hostinger ini, Ninda ingin berbagi informasi dan membantu pembaca menyelesaikan masalah yang dialami. Kenali Ninda lebih dekat di LinkedIn.

Tutorial lain dari Faradilla A.