Friday, January 08, 2016

Cara Multi Defer Loading Javascript

multi defer loading javascript

Mengingat pagespeed blog sudah menjadi bagian dari salah satu optimasi SEO sebagai prioritas dalam menentukan posisi halaman di hasil pencarian selain konten yang berkualitas. Tujuan Google adalah untuk menyediakan pengguna dengan hasil yang paling relevan dan pengalaman pengguna yang luar biasa. Situs yang cepat meningkatkan kepuasan pengguna dan meningkatkan kualitas keseluruhan dari web.

Untuk cara optimasi pagespeed ini telah saya uraian pada beberapa artikel sebelumnya agar dapat membuat blog menjadi super cepat dan ringan. Baca Cara Membuat Loading Blog Menjadi Super Cepat

Pada umumnya faktor yang paling berpengaruh dalam masalah ini adalah pada penggunaan dan penempatan javascript yang kurang tepat dan efisien.

Cara Membuat Multi Defer Loading Javascript :


# Multi Defer loading with Combine Javascript


Menggabungkan beberapa script menjadi satu dan simpan di self hosting kemudian kita defer menggunakan javascript. Secara default untuk script defernya adalah seperti dibawah ini :

<script type="text/javascript">
 
 // Add a script element as a child of the body
 function downloadJSAtOnload() {
 var element = document.createElement("script");
 element.src = "HOSTING SCRIPT.js";
 document.body.appendChild(element);
 }
 
 // Check for browser support of event handling capability
 if (window.addEventListener)
 window.addEventListener("load", downloadJSAtOnload, false);
 else if (window.attachEvent)
 window.attachEvent("onload", downloadJSAtOnload);
 else window.onload = downloadJSAtOnload;
 
</script>

# Multi Defer Loading dengan menggabungkan beberapa source eksternal Javascript


Kita juga bisa membuat multi defer loading javascript blog dengan menggabungkan beberapa file ekternal script secara langsung, sebagai contohnya seperti dibawah 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);
  }
 })(['KODE SCRIPT 1.js','KODE SCRIPT 2.js']);
}

if (window.addEventListener)
        window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)
 window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
</script>

Atau bisa juga menggunakan kode seperti dibawah ini:

<script type="text/javascript">
function loadScript(src) {
     var element = document.createElement("script");
     element.src = src;
     document.body.appendChild(element);
}


// Add a script element as a child of the body
function downloadJSAtOnload() {
    loadScript("KODE SCRIPT 1.js");
    loadScript("KODE SCRIPT 2.js");
    loadScript("KODE SCRIPT 3.js");
}

 // Check for browser support of event handling capability
 if (window.addEventListener)
     window.addEventListener("load", downloadJSAtOnload, false);
 else if (window.attachEvent)
     window.attachEvent("onload", downloadJSAtOnload);
 else window.onload = downloadJSAtOnload;
</script>

Silakan pilih salah satu kode diatas untuk mengoptimalkan pemanggilan kode script yang membutuhkan penundaan pemuatan agar blog menjadi lebih cepat dan ringan. Baca juga Defer Loading CSS dengan Javascript