2 Cara Mengatasi Render Blcoking Javascript Library JQuery

Bagi sobat blogger, kalian pasti pernah mengalamai hal tidak mengenakkan ini, tentunya sobat pengguna template custom blogger, yaitu masalah render blocking JQuery, render blocking adalah sebuah file JavaScript eksternal yang memblokir di bagian paro atas laman, sedangkan JQuery ini adalah sebuah library javascript yang fungsinya untuk mempermudah penggunaan javascript, karena penggunaan javascript mentah lumayan sulit menurut saya :p.

Okelah kembali ke topik, mengapa JQuery menjadi masalah render blocking ? karena JQuery itu sendiri diletakkan diatas kode </head>, dengan begitu JQuery akan termuat terlebih dahulu, baru setelah itu artikel akan dimuat. okelah dibawah ini dua cara mengatasi render Blocking JQuery:

1. Menambahkan Atribut Async pada JQuery

Metode ini adalah metode pertama, dengan menambahkan atribut async, blog anda akan terlepas dari render blocking JQuery, contoh penggunaan:

Masuk pada EDitor HTML Template , lalu tekan CTRL + F dan cari kode jquery.min.js, setelah ketemu maka penampakannya kurang lebih seperti ini:

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

Sekarang tambahkan atribut async='async' pada jquery tersebut, jadi penampakannya kurang lebih menjadi seperti ini:

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

Simpan Template anda, dan sukses, sekarang blog anda sudah terlepas dari render blocking jquery,

namun ada kekurangan dari metode ini yaitu jquery tidak akan bekerja dihalaman homepage/beranda, melainkan script jquery akan bekerja pada halaman selanjutnya, itulah efek menggunakan atribut async ini.

2. Menaruh JQuery diatas kode </body>

Metode inilah yang paling bagus, karena tidak ada kekurangannya sama sekali, metode ini saya temukan sendiri karena cari sana sini tidak berhasil juga akhirnya saya cari cara sendiri aja :p, harap diperhatikan, dengan menggunakan metode ini maka kamu harus menaruh semua script JQuery tepat dibawah kode <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>, karena apabila script JQuery tersebut diletakkan diatas/sebelum kode JQuery maka script tersebut tidak akan berjalan karena script library nya berada dibawahnya. cara menggunakan metode ini ialah masuk pada Editor HTML Template lalu tekan CTRL + F dan cari kode jquery.min.js, bila sudah ketemu maka hasilnya kurang lebih sama dengan cara pertama, kemudian kamu ambil JQuery tersebut lalu pindahakan diatas kode </body>, contoh penggunaannya dan contoh menaruh script JQuery nya:

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
//<![CDATA[
---taruh semua script JQuery disini---
//]]>
</script>
</body>

Ciri ciri script JQuery biasanya diawali dengan kode $ contohnya dibawah ini:

$(function () {
$('.Label h2').on("click", function (t) {
$(this).toggleClass("on").next().slideToggle(200);
t.stopPropagation()
});
$(document.body).on("click", function () {
$('.Label').find(".on").removeClass("on").next().slideUp(200);
});
});

Bila ada kesulitan silahkan tanyakan dikolom komentar, semoga bermanfaat!