Bagaimana Cara Memperbaiki Render Blocking JavaScript dan CSS

oleh | website development

Bila Anda sering menguji website di Google PageSpeed Insight, pasti salah satu yang tidak asing akan Anda lihat adalah  Remove Render-Blocking Javascript and CSS, dimana Anda diminta untuk menghilangkan skrip render blocking JavaScript dan CSS.Bagi yang sudah terbiasa tentu ini bukan hal sulit, namun bila Anda baru pasti sedikit kebingungan, berikut ini cara memperbaiki render blocking JavaScript dan CSS.

Apa Itu Render Blocking JavaScript dan CSS

Kecepatan adalah salah satu faktor yang mempengaruhi SEO, semakin cepat website Anda maka semakin tinggi kemungkinan untuk bisa mendapatkan peringkat di Google. Selain harus memilih host yang baik, salah satu cara untuk mempercepat website adalah dengan menghapus Javascript dan CSS Render Blocking. 

Secara sederhana, render blocking Javascript dan CSS adalah skrip dan style-sheet browser yang harus dimuat sebelum halaman web terlihat oleh pengunjung. 

Ketika Anda membuka sebuah website, hal pertama yang dilakukan oleh browser adalah memproses JavaScript dan CSS. Kemudian browser memproses HTML pada halaman website sehingga muncul tampilan full halaman dari website.seorang pengunjung membuka di situs web Anda, browser mereka pertama-tama harus memuat file Javascript dan CSS yang mendukung sebelum memuat HTML.

Jika Anda mengakses dengan internet yang lambat, proses Anda untuk melihat website akan lebih lama. 

Cara Memperbaiki Render Blocking JavaScript dan CSS

Pada kali ini, kami akan membahas bagaimana cara memperbaiki blocking render JavaScript dan CSS di WordPress menggunakan plugin.

1. Memperbaiki Render Blocking JavaScript dan CSS dengan Autoptimize

Untuk memperbaiki render blocking JavaScript dan CSS Anda bisa install plugin Autoptimize. Langkah-langkahnya adalah sebagai berikut

Langkah 1 Optimasi Kode JavaScript

Setelah Anda menginstal plugin, langkah selanjutnya adalah optimasi JavaScript. Pada bagian pengaturan JavaScript centang kotak di sebelah tulisan Optimize JavaScript Code? untuk merubah pengaturan JavaScript.

Setelah itu, lakukan optimasi pada JavaScript dengan  mencentang beberapa pilihan yang ada.

  • Aggregate JS-files?: Menggabungkan semua file JavaScript yang ada di file website untuk memproses non-render blocking. Jika pilihan ini tidak aktif, masing-masing file JS akan tetap di tempatnya tetapi akan diperkecil ukuran filenya.
  • Also aggregate inline JS?: Pilihan ini berfungsi untuk mengekstrak JavaScript dari HTML.
  • Force JavaScript in <head>?: Pilihan ini berfungsi untuk memproses JavaScript lebih awal. Jika mengaktifkan pilihan ini, akan berpotensi membuat JavaScript Render Blocking.
  • Exclude scripts from Autoptimize: Mengecualikan skrip yang akan dioptimasi.

Pada panduan ini kami memilih Aggregate JS-files? dan Also aggregate inline JS?. Dengan begitu, Anda dapat mengizinkan plugin untuk menambahkan inline JS dan menghapus skrip yang dikecualikan secara default oleh WordPress, contoh seperti jquery.js.

Langkah 2 Optimasi Kode CSS

Lalu, scroll ke bawah pada bagian CSS Options centang pada kotak di samping tulisan Optimize CSS Code? untuk menampilkan pengaturan CSS.

Setelah itu, lakukan optimasi pada CSS dengan cara mencentang beberapa pilihan yang ada. Berikut ini adalah keterangan dari beberapa pilihan tersebut.

  • Aggregate CSS-files?: Pilihan ini akan menggabungkan semua file-file CSS yang ada di file website.
  • Also aggregate inline CSS?: Mengoptimalkan CSS dalam file HTML.

Pada panduan ini memilih, Aggregate CSS-files? dan Also aggregate inline CSS?. Tujuannya agar semua file CSS yang ada di website ukurannya diperkecil sehingga load time website akan jauh lebih cepat.

Kemudian simpan perubahan yang telah dibuat dengan cara menekan tombol Save Changes and Empty Cache. Untuk memastikan keberhasilan perubahan pada plugin Autoptimize, Anda bisa melakukan pengecekan pada Google PageSpeed.

2. Memperbaiki Render Blocking JavaScript dan CSS dengan W3 Total Cache

Cara kedua yang bisa Anda lakukan adalah dengan menggunakan plugin W3 Total Cache. Berikut ini langkah-langkahnya.

Langkah 1 Optimasi Kode JavaScript dan CSS

Pilih menu Perfomance >> General Settings dan scroll ke bawah pada bagian fitur Minify. Kemudian aktifkan fitur Minify dengan cara mencentang tulisan Enable dan pilih Minify mode Manual. Contoh seperti pada gambar di bawah ini.

Setelah itu, klik tombol Save Settings & Purge Caches untuk menyimpan perubahan. Selanjutnya, Anda harus mencari file atau link JavaScript yang ingin Anda perkecil (minify).

Untuk mendapatkan link JavaScript yang akan di perkecil, Anda bisa melakukan pengecekan menggunakan Google PageSpeed. Setelah itu, cari tab menu Eliminate render-blocking resources

Lalu, pilih salah satu di antara render-blocking yang ada dengan cara klik kanan pada salah satu link lalu Copy link address. Masuk ke dashboard WordPress Anda dan pilih menu Performance >> Minify. 

Scroll ke bawah pada fitur JS danu aktifkan JS Minify Settings dengan mencentang logo Enable.

Setelah mengaktifkan JS minify settings, Anda akan melihat bagian Operations in areas. Pilih Non-blocking using async src 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.  Lalu salin (copy) URL script JavaScript dari tab PageSpeed, dan tempel (paste) script tersebut satu per satu. Pada panduan ini akan memperbaiki file JavaScript.

Setelah selesai menambahkan URL JavaScript, simpan perubahan dengan menekan tombol Save all settings. Anda bisa masuk ke halaman Google PageSpeed Insights untuk mengecek apakah render-blocking sudah bisa teratasi.

Untuk meningkatkan peluang website Anda mendapatkan peringkat, selain cara di atas, Anda bisa memanfaatkan SEO. Tidak perlu bingung Anda bisa menggunakan jasa SEO jakarta.

 

[crp]
Digital Marketing Agency

Recent Posts

5 Rekomendasi Website Framework

5 Rekomendasi Website Framework

5 Rekomendasi Website Framework untuk Pengembangan Cepat dan Efisien Memilih framework yang tepat untuk pengembangan website adalah langkah krusial bagi bisnis dan developer. Framework tidak hanya mempercepat proses pengembangan tetapi juga memastikan keamanan,...

Apa itu Framework?

Apa itu Framework?

Apa itu Framework? Ini Pengertian, Fungsi & Jenis-Jenisnya Pengertian Framework Framework adalah kerangka kerja yang digunakan untuk mempermudah proses pengembangan perangkat lunak atau aplikasi. Dengan adanya framework, pengembang tidak perlu membangun segala...

Cara Memperbaiki & Memulihkan Penyebutan Merek Negatif di SERP

Cara Memperbaiki & Memulihkan Penyebutan Merek Negatif di SERP

Cara Memperbaiki & Memulihkan Penyebutan Merek Negatif di SERP Dalam dunia digital, reputasi merek sangat bergantung pada bagaimana sebuah bisnis muncul di hasil pencarian Google. Sayangnya, tidak semua penyebutan merek di SERP (Search Engine Results Page)...

Tren Pemasaran Digital Tahun 2025

Tren Pemasaran Digital Tahun 2025

Apa yang Harus Diketahui? Dengan Tren Pemasaran Digital 2025 Tren Pemasaran Digital 2025 - Sebagai pemasar, kita semua menyadari bahwa perubahan dalam dunia digital adalah sesuatu yang tidak bisa dihindari. Dengan berbagai saluran pemasaran yang tersedia, ada begitu...

Cara Merencanakan Anggaran Pemasaran Digital yang Efektif

Cara Merencanakan Anggaran Pemasaran Digital yang Efektif

Merencanakan Anggaran Pemasaran Digital Yang efektif Merencanakan Anggaran Pemasaran Digital yang tepat adalah langkah penting untuk memastikan bisnis Anda dapat bersaing di pasar yang semakin kompetitif. Tanpa perencanaan yang matang, anggaran yang terbatas bisa...

SEO Dapat Mengubah Strategi Digital Marketing Anda

SEO Dapat Mengubah Strategi Digital Marketing Anda

Digital Marketing dengan SEO Strategi digital marketing yang efektif sangat bergantung pada visibilitas online yang tinggi. Salah satu cara paling efektif untuk meningkatkan visibilitas dan menarik audiens yang relevan adalah melalui SEO (Search Engine Optimization)....

Apa Itu Jasa SEO dan Manfaatnya?

Apa Itu Jasa SEO dan Manfaatnya?

Mengenal Apa Itu Jasa SEO Jasa SEO adalah layanan yang bertujuan untuk mengoptimalkan sebuah website agar mendapatkan peringkat terbaik di hasil pencarian mesin pencari seperti Google. Dengan strategi yang tepat, SEO dapat membantu meningkatkan visibilitas dan trafik...

Pengalaman Pengguna untuk Pencarian Lokal di Jakarta

Mengoptimalkan Pengalaman Pengguna untuk Pencarian Lokal di Jakarta Pengalaman Pengguna - Dalam era digital saat ini, pencarian lokal menjadi semakin dominan. Di Jakarta yang dinamis, memastikan pengalaman pengguna yang baik dalam pencarian lokal dapat membuat...