Mengatasi Render Blocking JavaScript dari JQuery

Cara 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 / memperbaiki Render-Blocking Javascript Dari Jquery ini. Mungkin karena saya takut salah dalam mengatasinya sehingga keberanian untuk mencoba mengatasinya menjadi hilang. Saya ketemu tutorial ini di blognya kang Adhy Suryadi

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 menggunakan 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 seperti 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 seperti sebelumnya. Dan hasilnya halaman postingan tidak mengalami kendala apa pun, berjalan seperti sebelumnya. Namun ketika saya mencoba pada halaman depan blog, javascript pada post untuk mengatur gambar thumbnailnya agar 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, seperti pada gambar di bawah ini.

Render Blocking sebelum Asynchronus

Sesudah Asynchronus

Dengan mengatasi satu hal tersebut, skor speed blognya naik dengan menakjubkan. Tentunya ini menjadi hal yang cukup bagus untuk blog Kompi Ajaib sendiri. Namun permasalahan masih tersisa di homepage blog, untuk mengatasi javascript yang mengatur thumbnail untuk naik turun ketika dihover, saya akhirnya menggunakan 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 seperti Kompi Ajaib yaitu Render-Blocking Javascript dari Jquery, coba saja pengalaman saya ini siapa tahu bisa berhasil juga pada blog Anda.

Untuk Render-Blocking Javascript itu sendiri jika diartikan itu adalah javascript tersebut menyebabkan loading pada halaman blog ketika diakses baik melalui handphone, ipad, atau desktop. Loading itu sendiri disebabkan karena 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 karena Google akan menyingkirkan blog atau web dari serp yang memiliki loading lambat atau blog yang menyebabkan pengunjungnya harus menunggu waktu yang lama untuk membuka suatu halaman sebagaimana yang ditunjukan di PageSpeed seperti gambar di atas tadi.

NB :

Akan tetapi, asynchronus pada Jquery Library tidak semua efektif, tergantung pada template kamu, belum ada solusi terbaik untuk masalah ini, maka dari itu direkomendasikan jangan menggunakan Asynchronus, karena element pada Template akan terganggu.

Sumur : http://www.kompiajaib.com/2014/02/mengatasi-render-blocking-javascript.html