deraone Deraone adalah penyedia managed vps dan web hosting yang memenuhi semua kebutuhan platform Anda. Kami memberikan layanan dengan teknologi terkini dengan layanan yang profesional. Temukan pengalaman terbaik Anda bersama kami.

Mengatasi Render-Blocking JavaScript dan CSS

3 min read

Apakah Anda ingin menghilangkan Render-Blocking JavaScript dan CSS di WordPress?, Jika ya, silahkan lanjutkan membaca, karena pada artikel ini Anda akan menemukan panduan cepat dan mudah dalam mengatasi masalah render tersebut.

Memiliki situs web yang memuat dengan cepat sangat penting jika Anda ingin mendapat peringkat tinggi di halaman hasil mesin pencari (SERP). Itulah mengapa Wawasan PageSpeed ​​Google ada untuk membantu Anda mengoptimalkan kecepatan pemuatan situs Anda.

Jika Anda mendapatkan peringatan “Hilangkan JavaScript dan CSS yang memblokir perenderan di konten paruh atas” saat menggunakan alat tersebut, jangan khawatir. Dalam artikel ini, kami akan menunjukkan kepada Anda cara memperbaiki masalah tersebut.

Mengenal Peringatan “Render-Blocking JavaScript dan CSS”

Jika Anda melihat aturan PageSpeed ​​Google, menghapus JavaScript dan CSS yang memblokir perenderan adalah salah satunya. Kegagalan apa pun dalam hal itu akan mengakibatkan kecepatan pemuatan halaman lebih lambat. Tapi bagaimana JavaScript dan juga CSS di halaman HTML memperlambat situs Anda?

Nah, setiap kali Anda memasang tema atau plugin baru, mereka menambahkan kode JavaScript dan CSS ke front-end. Akibatnya, browser mungkin membutuhkan lebih banyak waktu untuk memuat halaman.

Bagian atas “Above-the-fold” (ATF) berarti bagian dari laman web Anda yang terlihat saat laman pertama kali dimuat. Bagian mana pun dari halaman yang harus Anda gulir ke bawah untuk menjangkau adalah non-ATF.

Jadi, jika kode JavaScript dan CSS yang tidak relevan dirender saat pengunjung memuat situs web Anda, Anda mungkin mendapatkan peringatan untuk mengurangi jumlah JavaScript dan CSS yang memblokir perenderan di sumber daya konten paruh atas.

Mengetahui Pemblokiran Render JavaScript dan CSS Menggunakan Google PageSpeed ​​Insights

Langkah pertama dalam memperbaiki pemblokiran perenderan adalah menguji kecepatan situs Anda menggunakan Google PageSpeed ​​Insights. Ikuti langkah-langkah berikut untuk melakukannya:

  1. Kunjungi halaman tersebut, dan tempel URL situs Anda di kolom “Masukkan URL halaman web”.
  2. Klik Analisis untuk mendapatkan laporan.

Sebagian besar skor situs antara 50-70; ini harus menjadi patokan untuk skor Anda. Google juga akan membuat daftar saran untuk meningkatkan kinerja situs web Anda.

Jika Anda juga menemukan saran untuk menghilangkan render-blocking JavaScript dan CSS, maka Anda harus memperbaiki masalah tersebut.

ender-Blocking JavaScript dan CSS

Ingatlah bahwa Anda tidak boleh memaksa situs web Anda mendapatkan skor sempurna 100. Berusahalah sebaik mungkin untuk mendapatkan skor yang bagus tanpa mengorbankan pengalaman pengguna.

Jika ada skrip di situs WordPress Anda yang penting untuk UX yang kuat, Anda tidak boleh menghapusnya hanya untuk mendapatkan skor yang sedikit lebih tinggi di PageSpeed ​​Insights.

Aturan Google menilai situs web Anda hanyalah pedoman dan harus diambil seperti itu.

Memperbaiki Error “Eliminate render-blocking JavaScript and CSS in above-the-fold content”

Dengan WordPress, mengurangi sumber daya JavaScript dan CSS yang memblokir perenderan di situs WordPress Anda sangatlah mudah. Anda dapat menggunakan tiga plugin yang kami cantumkan di bawah ini:

W3 Total Cache

Salah satu favorit banyak orang adalah plugin W3 Total Cache. Setelah dipasang dan diaktifkan, ikuti langkah-langkah berikut di dasbor admin WordPress Anda:

  1. Pergi ke Performance > General Settings.
  2. Temukan judul Minify di halaman. Kemudian, Anda akan melihat beberapa opsi di bawah judul ini.
  3. Centang kotak Enable untuk Minify. Kemudian, untuk opsi Minify mode, pilih Manual.
  4. Tekan Save all settings.
  5. Ambil semua skrip JavaScript dan CSS yang memblokir perenderan, yang dapat Anda temukan melalui Google PageSpeed ​​Insights.
  6. Setelah Anda menemukan pembuat masalah, kembali ke Performance -> Minify di dasbor WordPress Anda.
  7. Temukan bagian JS. Di bagian Operations in areas, pilih Non-blocking using “defer”.
  8. Untuk manajemen file JS, pilih tema aktif Anda dan klik tombol Add Script. Salin dan tempel URL JavaScript dari Google PageSpeed ​​Insights pada bidang yang disediakan.
  9. Gulir ke bawah dan temukan bagian CSS. Untuk manajemen file CSS, pilih tema aktif Anda dan klik Add a style sheet. Mirip dengan langkah di atas, salin URL lembar gaya CSS dari Wawasan PageSpeed ​​dan tempelkan di bidang wajib.
  10. Terakhir, klik tombol Save Settings & Purge Caches.

Autoptimize

Atau, Anda dapat menggunakan plugin Autoptimize untuk mengatasi javascript dan juga kesalahan css yang memblokir perenderan. Lakukan langkah-langkah ini di dasbor Anda setelah plugin dipasang dan diaktifkan:

  1. Buka Settings > Autoptimize.
  2. Centang kotak untuk Optimize JavaScript Code? ” dan juga Optimize CSS Code?
  3. Tekan tombol Save Changes and Empty Cache.
autoptimize render-blocking javascript

Dalam kebanyakan kasus, ini cukup untuk memperbaiki peringatan. Namun, hasilnya mungkin berbeda-beda, bergantung pada tema dan plugin aktif Anda.

Untuk memastikan masalah Anda telah terselesaikan, jalankan kembali situs Anda melalui PageSpeed ​​Insights. Jika masih ada sumber daya JS dan CSS yang memblokir, lakukan pengoptimalan lebih jauh dengan mengikuti langkah-langkah berikut:

  1. Kembali ke Settings > Autoptimize.
  2. Tekan tombol Show Advanced Settings.
  3. Kemudian, centang opsi untuk Also aggregate inline JS dan Also aggregate inline CSS.
  4. Simpan perubahan.

Speed Booster Pack

Plugin populer lainnya yang mungkin berguna bagi Anda dalam memperbaiki javascript yang memblokir render dan kesalahan css untuk situs WordPress Anda adalah Speed ​​Booster Pack. Untuk melakukannya, ikuti langkah-langkah berikut di area wp-admin Anda:

  1. Pergi ke bagian Speed ​​Booster Pack dan akses tab Advanced.
  2. Di menu JavaScript Optimization, aktifkan Move scripts to the footer dan Defer parsing of JavaScript files.
  3. Gulir ke bawah ke menu CSS Optimization untuk mengatur pengoptimalan pemblokiran render CSS.
  4. Anda akan menemukan pengaturan tambahan untuk Minify semua CSS, mengecilkan semua (sebelumnya) inline CSS, dan memindahkan semua CSS inline ke footer. Bereksperimenlah dengan opsi-opsi ini untuk menemukan solusi yang tepat.

Cukup mengaktifkan semuanya akan memuat situs Anda lebih cepat, tetapi juga dapat memperkenalkan Flash of unstyled content (FOUC) Flash yang tidak diinginkan. Ini terjadi saat browser memuat halaman web tanpa menunggu stylesheet dimuat, menyebabkan flash sesaat dari halaman yang tidak mengandung stylesheet.

Setelah mencoba metode di atas, kembali ke Google PageSpeed ​​Insights untuk memastikan bahwa pemblokiran render tidak lagi menjadi masalah.

deraone Deraone adalah penyedia managed vps dan web hosting yang memenuhi semua kebutuhan platform Anda. Kami memberikan layanan dengan teknologi terkini dengan layanan yang profesional. Temukan pengalaman terbaik Anda bersama kami.

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *