Cara Memasang Jquery Versi Asinkron

8/30/2014
Miqbal20 - Cara Membuat Jquery Menjadi Asinkron - Jquery adalah library Javascript yang ditulis secara simpel dan ringkas yang digunakan untuk memanipulasi komponen - komponen yang ada pada dokumen HTML, menangani event, memperindah animasi, memberikan efek dan memproses interaksi ajax. jQuery dibuat sedemikian rupa agar program yang menggunakan Javascript menjadi lebih mudah. jQuery mempunyai ukuran yang relatif kecil, jadi tidak begitu membuat gemuk html web kita.


Cara Memasang Jquery Versi Asinkron


Disisi lain meskipun jquery mempunyai ukuran yang kecil, jika melakukan dekalrasi pemanggilan yang biasa akan mengakibatkan mengurangi kecepatan loading blog, khusunya saat blog di akses melalui seluler atau mobile. Contohnya seperti gambar dibawah ini, ketika saya mengecek kecepatan blog ini di developers.google.com/speed/pagespeed/insights.


Cara Memasang Jquery Versi Asinkron

Cara Memasang Jquery Versi Asinkron


Ada peringatan :
Menghilangkan JavaScript dan CSS yang memblokir perenderan di konten paruh atas

Setelah saya cek html nya, ternyata kode pemanggilan jquery memang hanya menggunakan metode pemanggilan script yang standar seperti dibawah ini.



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

Untuk mengatasi error tersebut, saya perlu menambahkan atribut async='async' agar pemanggilan jquery bisa dilakukan secara asinkron dan tidak memberatkan proses loading blog. Scriptnya yang sudah ditambahkan atribut async seperti dibawah ini.


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

Setelah penambahan atribut tersebut dilakukan, saya melakukan pengetesan ulang di PageSpeed Insights google, dan hasilnya kecepatannya meningkat secara drastis seperti gambar dibawah ini.


Cara Memasang Jquery Versi Asinkron

Untuk alternatif lain, kamu bisa menggunakan script asinkron jquery lain dibawah ini.

<script>
var script = document.createElement('script');
script.src = "https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js";
document.getElementsByTagName('head')[0].appendChild(script);
</script>

Atau dibawah ini.


<script>function asyncData(url, callback) {    var script = document.createElement('script');    script.src = "https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js";    script.onload = function() {        if (typeof callback == "function") callback();        callback = null;    };    script.onreadystatechange = function() {        if (script.readyState == 4 || script.readyState == "complete") {            if (typeof callback == "function") callback();            callback = null;        }    };    document.getElementsByTagName('head')[0].appendChild(script);}
</script>

Artikel Terkait

Next Article
« Prev Post
Previous Article
Next Post »
Penulisan markup di komentar
  • Untuk menulis huruf bold gunakan <strong></strong> atau <b></b>.
  • Untuk menulis huruf italic gunakan <em></em> atau <i></i>.
  • Untuk menulis huruf underline gunakan <u></u>.
  • Untuk menulis huruf strikethrought gunakan <strike></strike>.
  • Untuk menulis kode HTML gunakan <code></code> atau <pre></pre> atau <pre><code></code></pre>, dan silakan parse kode pada kotak parser di bawah ini.

Disqus
Tambahkan komentar Anda