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,
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!
Oh tinggal Menambahkan kode atribut async='async' di Jquery,. Emang Jquery yg paling update versi 1.10.2 ?
ReplyDeleteya, yang terbaru kayaknya versi 2
Deletecoba dulu aahh cara yg ke-2...thanks
ReplyDelete:-bd
DeleteNice post mas bro...
ReplyDeletePusing 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
makasih mas. langsung coba. semoga sukses nih :-bd
ReplyDelete:-d
DeleteBiasanya 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=''
ReplyDeleteapakah sudah teruji ?
Deletesaya takutnya ada yang tidak berfungsi gimana nih kasih solusi yang udah teruji boleh
ReplyDeletepakai cara yang ke 2 aja mbk, udah teruji diblog saya, tp kamu musti hati hati, salah sdikit javascriptmu bisa tidak jalan
DeleteMakasih 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..
ReplyDeletekalau scriptnya seperti ini <script src='http://ajax.googleapis.com/ajax
ReplyDelete/libs/jquery/1/jquery.min.js'
mas caranya gimana karena saya udah coba tambahin atribut async tapi malah widgetnya tdk berfungsi.
mksh gan.. saya berhsil dengan cara pertama
ReplyDelete