Mengatasi Render-Blocking Javascript Dari Jquery

Sebelumnya saya mengacuhkan hal ini ketika tahu bahwa Render-Blocking Javascript Dari Jquery perlu diperbaiki ketika blog dicek di PageSpeed. Karena saya pikir saya sudah memasang Jquery ini dengan benar. Namun kelamaan kepikiran juga bagaimana caranya untuk mengatasi Render-Blocking Javascript Dari Jquery ini. Mungkin lantaran saya takut salah dalam mengatasinya sehingga keberanian untuk mencoba mengatasinya menjadi hilang.

Akhirnya saya mencoba mengatasi ketakutan saya ini dan mencoba menerjemahkan isi halaman dari panduan Google untuk mengatasi Render-Blocking Javascript dengan alamat berikut: https://developers.google.com/speed/docs/insights/BlockingJS

Di situ saya menemukan petunjuk untuk memakai atribut HTML async pada Jquery-nya. Sebelumnya Jquery saya simpan di edit HTML sebagai berikut:

 <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>

Kemudian saya mencoba menambahkan atribut HTML async menjadi ibarat berikut:

 <script async='async' src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>

Kemudian saya mengujinya pada halaman postingan blog untuk memastikan semua elemen blog berjalan ibarat sebelumnya. Dan hasilnya halaman postingan tidak mengalami hambatan apa pun, berjalan ibarat sebelumnya. Namun ketika saya mencoba pada halaman depan blog, javascript pada post untuk mengatur gambar thumbnailnya supaya naik dan turun ketika dihover menjadi tidak berjalan, namun saya biarkan terlebih dahulu. Kemudian saya cek blog di PageSpeed untuk memastikan apakah Render-Blocking Javascript dari Jquery ini sudah teratasi atau belum. Dan hasilnya cukup menakjubkan, ibarat pada gambar di bawah ini.

Render-Blocking Javascript Dari Jquery sebelum diatasi.

Lihat skornya setelah Render-Blocking Javascript Dari Jquery diatasi.

Dengan mengatasi satu hal tersebut, skor speed blognya naik dengan menakjubkan. Tentunya ini menjadi hal yang cukup anggun untuk blog Kompi Ajaib sendiri. Namun permasalahan masih tersisa di homepage blog, untuk mengatasi javascript yang mengatur thumbnail untuk naik turun ketika dihover, saya hasilnya memakai CSS untuk mengatur naik turun thumbnail ketika dihover dan menghapus javascriptnya itung-itung untuk merampingkan size blog juga.

Bagaimana dengan blog Anda? Jika mengalami hal yang sama ibarat Kompi Ajaib yaitu Render-Blocking Javascript dari Jquery, coba saja pengalaman saya ini siapa tahu dapat berhasil juga pada blog Anda.

Untuk Render-Blocking Javascript itu sendiri bila diartikan itu yaitu javascript tersebut mengakibatkan loading pada halaman blog ketika diakses baik melalui handphone, ipad, atau desktop. Loading itu sendiri disebabkan lantaran browser harus mendownload terlebih dahulu javascriptnya sebelum halaman berhasil dimuat.

Tertunya hal ini akan berakibat kurang baik di mata search engine khususnya Google. Jika kita peduli dengan peringkat blog di serp, tentunya hal ini harus diatasi lantaran Google akan menyingkirkan blog atau web dari serp yang mempunyai loading lambat atau blog yang mengakibatkan pengunjungnya harus menunggu waktu yang usang untuk membuka suatu halaman sebagaimana yang ditunjukan di PageSpeed ibarat gambar di atas tadi.

Update:
Setelah saya baca beberapa argument di beberapa forum, ternyata asynchronous pada jquery library ini tidak baik lantaran terperinci akan mengganggu element blog yang memakai jquery. Untuk ketika ini belum ada solusi yang terbaik untuk mengatasi render-blocking js dari jquery ini.

Sumber https://www.kompiajaib.com/

Share this post