2 Cara Mengatasi Render Blocking 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!

15 Responses to "2 Cara Mengatasi Render Blocking Javascript Library JQuery"

  1. Oh tinggal Menambahkan kode atribut async='async' di Jquery,. Emang Jquery yg paling update versi 1.10.2 ?

    ReplyDelete
  2. coba dulu aahh cara yg ke-2...thanks

    ReplyDelete
  3. Nice post mas bro...
    Pusing ane di buat sama Google Page Insight...
    Akhirnya ketemu juga obatnya :D
    Salam http://typepedia.blogspot.com/2015/05/synthesis-development-indonesia-developer-property.html

    ReplyDelete
  4. makasih mas. langsung coba. semoga sukses nih :-bd

    ReplyDelete
  5. Biasanya kode jquery.min.js jika ditambahkan dengan kode async='async' akan membuat beberapa widget tidak berfungsi dengan baik maka dari itu lebih baik jika mengatasi render blocking pada jQuery sebaiknya menggunakan code async='' defer=''

    ReplyDelete
  6. saya takutnya ada yang tidak berfungsi gimana nih kasih solusi yang udah teruji boleh

    ReplyDelete
    Replies
    1. pakai cara yang ke 2 aja mbk, udah teruji diblog saya, tp kamu musti hati hati, salah sdikit javascriptmu bisa tidak jalan

      Delete
  7. Makasih mas, cara pertama sudah saya terapkan di blog saya dan harilnya 100% work. untuk cara kedua saya kurang paham tentang kode html jadi takut salah hehehe..

    ReplyDelete
  8. kalau scriptnya seperti ini <script src='http://ajax.googleapis.com/ajax
    /libs/jquery/1/jquery.min.js'
    mas caranya gimana karena saya udah coba tambahin atribut async tapi malah widgetnya tdk berfungsi.

    ReplyDelete
  9. mksh gan.. saya berhsil dengan cara pertama

    ReplyDelete
  10. Makasih mas infonya,
    Kunjungi www.sistinime.ga

    ReplyDelete