Mengatasi Render Blocking Javascript Jquery Library

Setelah sekian lama saya mengabaikan render blocking javascript dari Jquery Library di PageSpeed, akhirnya saya mencoba untuk mengatasi render blocking javascript dari jquery ini.

Mengatasi Render Blocking Javascript Jquery Library

Saya pun melakukan banyak percobaan dari tutorial-tutorial yang saya temukan di Google. Menurut panduan yang diberikan Google, kita dapat menambahkan atribut async untuk mengatasi render blocking javascript dari jQuery Library.

Metode 1 : Menambahkan Atribut Async pada jQuery Library

Jika sebelumnya jQuery Library Anda seperti berikut :

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

Sekarang tambahkan atribut async=’async’ pada jQuery tersebut, sehingga menjadi seperti berikut :

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

Kemudian simpan template Anda, sekarang blog Anda sudah terlepas dari render blocking javascript dari jQuery Library.

Kelemahan menggunakan metode ini yaitu semua element yang menggunakan jQuery tidak akan bekerja di homepage. Namun untuk blog saya sendiri masih bisa berjalan dengan baik walaupun menggunakan metode ini.

Jika blog Anda mengalami gangguan setelah menerapkan metode di atas, Anda dapat mencoba metode berikut ini.

Metode 2 : Memindahkan jQuery Library dan Semua Script jQuery ke atas kode </body>

Menurut berbagai tutorial yang saya temukan, metode ini adalah metode terbaik untuk mengatasi render blocking javascript dari jQuery Library. Berikut cara penerapannya.

Pindahkan script jQuery library yang biasa diletakkan di atas kode </head> menjadi di atas kode </body>

Setelah itu, pindahkan semua script jQuery tepat di bawah script jQuery Library. Apabila script jQuery tersebut diletakkan diatas/sebelum kode jQuery library maka script tersebut tidak akan berjalan karena script library nya berada dibawahnya.

Berikut contoh penerapannya.

<script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'/>
<script type='text/javascript'>
//<![CDATA[

<!-- Semua Script Jquery disini -->

//]]>
</script>

<script type='text/javascript'>

<!-- Semua Script Jquery Lainnya disini -->

</script>
</body>
Yang perlu diperhatikan, tidak semua script jquery itu bisa dibungkus dengan //<![CDATA[ hingga //]]>, jadi bisa Anda perhatikan dan sesuaikan dengan scriptnya agar bisa berjalan dengan baik.

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);
});
});

Sekian, semoga bermanfaat.

Leave a Reply