Cara defer multiple external file js

Posted on April 25, 2017 9:29 PM by Unknown
Wordpress JS Blogger Blogging Programming JS

Teknik Defer loading multiple external javascript untuk mengurangi loading website secara dramatis.

Nah kali ini saya akan share bagaimana cara mengurangi loading website meskipun mempunyai banyak eksternal javascript.

Langkah:
1. Backup dulu template anda bila memakai CMS Blogger, Yang lainnya backup file asli yang akan di terapkan teknik defer ini.

2. Cut semua eksternal javascript (kecuali pemanggil jquery misal: https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js bila theme atau template anda menggunakan framework yang menggantungkan jquery, misal blogger template EVO MAGZ buatan Mas Sugeng.). Lalu paste di notepad. Lalu buat kode berikut ini :

<script type="text/javascript">
function downloadJSAtOnload() {
 (function(scripts) {
   var i = 0,
    l = scripts.length;
  for (; i<l; ++i ){
   var element = document.createElement("script");
   element.src = scripts[i];
   document.body.appendChild(element);
  }
 })(['http://yourjavascript.com/16724112645/root93.js','https://source.l3n4r0x.cf/js/highlight/highlight.pack.js']);
}
if (window.addEventListener)
        window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)
 window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
</script>

Deskripsi:

Ubah URL eksternal javascript dengan URL eksternal yang kalian punya. Untuk menambah source eksternalnya hanya dikasih koma (,) dan tanda petik (') untuk meload beberapa eksternal javascript/js file (tidak ada batasan).

Kemudian taruh script diatas yang sudah kalian edit di atas </body>.

Fungsi script diatas adalah mengeksekusi javascript pada saat web telah di load 100%.

NOTE: Namun kode diatas tidak bisa untuk meload jquery framework dari ajax.googleapis.com bila theme atau template anda menggunakan framework atau desain yang sangat memerlukan jquery disaat perenderan website. Bisa-bisa nanti malah theme atau template anda tidak sempurna dengan kata lain rusak dibeberapa bagian yang membutuhkan jquery di saat perenderan awal website.

Nah selesai.

Apakah artikel ini membantu anda ??.. Jangan lupa share yah...
Search