{"id":5489,"date":"2017-08-25T10:47:26","date_gmt":"2017-08-25T10:47:26","guid":{"rendered":"https:\/\/blog.hostinger.io\/co-id-tutorial\/?p=5489"},"modified":"2025-02-14T18:14:52","modified_gmt":"2025-02-14T11:14:52","slug":"cara-eliminate-render-blocking-javascript-and-css","status":"publish","type":"post","link":"\/id\/tutorial\/cara-eliminate-render-blocking-javascript-and-css","title":{"rendered":"Cara mengatasi eliminate render-blocking JavaScript and CSS di WordPress"},"content":{"rendered":"

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<\/a> seperti Google PageSpeed Insights untuk membantu mengoptimalkan performa websitenya.<\/p>

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<\/strong>.<\/p>

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.<\/p>

Apa Arti “Eliminate Render-Blocking JavaScript and CSS in Above-the-Fold Content”<\/h2>

Eliminate Render-Blocking JavaScript and CSS<\/strong> merupakan salah satu aturan PageSpeed Google<\/a> yang menganjurkan para pemilik website untuk menangani resource tertentu yang bisa memperlambat website.<\/p>

Namun, bagaimana JavaScript dan CSS bisa membuat website menjadi lambat?<\/p>

Nah, jadi, setiap kali Anda menginstal plugin<\/a> 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.<\/p>

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).<\/p>

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”.<\/p>

Cara Menemukan JavaScript dan CSS yang Bermasalah<\/h2>

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

    \n
  1. Buka halaman Google PageSpeed Insights, lalu masukkan URL website Anda di kolom Enter a web page URL<\/strong>.<\/li>\n\n\n\n
  2. Klik Analyze<\/strong> untuk mendapatkan laporan.<\/li>\n<\/ol>
    \n
    \"tampilan<\/figure><\/div>

    \n\n

    \n

    Tips Berguna<\/h4>\n

    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.<\/p>\n <\/div>\n\n\n<\/p>

    \n
    \"tampilan<\/figure><\/div>

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

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

    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.<\/p>

    \n\n\n

    \n

    Tips Berguna<\/h4>\n

    Harap diingat bahwa aturan penilaian Google terhadap website Anda hanya berfungsi sebagai panduan. Anda tidak harus benar-benar mengikuti semuanya.<\/p>\n <\/div>\n\n\n\n<\/p>

    Cara Mengatasi “Eliminate Render-Blocking JavaScript and CSS in Above-the-Fold Content”<\/h2>

    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:<\/p>

    W3 Total Cache <\/h3>

    Plugin W3 Total Cache<\/a> 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<\/a> Anda:<\/p>

      \n
    1. Buka Performance<\/strong> → General Settings<\/strong>.<\/li>\n\n\n\n
    2. Cari bagian Minify<\/strong> di halaman tersebut. Anda akan menemukan beberapa opsi di bawahnya.<\/li>\n\n\n\n
    3. Centang kotak Enable<\/strong> untuk Minify<\/strong>, lalu pilih Manual<\/strong> pada opsi Minify mode<\/strong>.<\/li>\n\n\n\n
    4. Klik Save all settings<\/strong>.<\/li>\n<\/ol>
      \n
      \"tampilan