Cara Mempercepat Loading Website, Asyncronous JavaScript, YepnopeJS HeadJS, Chain JS

Semakin bagus sebuah design membutuhkan banyak resource CSS dan JavaScript plugin yang perlu dimuat. Tapi konsekuensinya pageload jadi berat. Seperti kebanyakan Theme Premium yang beraaaaaaaaaaat hehe.
Selain design, sudah saatnya kita perhatikan juga pageload, semakin cepat halaman dibuka akan semakin banyaklah pengunjung, page yang ringan juga bagus buat SEO.
Solusinya, muatlah CSS dan atau JavaScript seperlunya saja, atau sesuaikan dengan kondisi.

Misalnya, kita nggak perlu memuat atau meload JavaScript untuk slider, jika di halaman tersebut tidak ada slider/carousel, atau kita nggak perlu load Touch API jika device client tidak touchscreen (misalnya untuk PC desktop). Begitu juga kita nggak perlu memuat jQuery Mousewheel jika client menggunakan mobile phone. Selain itu kita juga bisa membuat kondisi berdasarkan ukuran layar / viewport.
Jika hal itu dilakukan dengan benar, maka halaman akan merequest file-file yang diperlukan saja, sesuai dengan kondisi yang kita tentukan.

Selain itu kiga juga bisa merequest file JavaScript dan CSS secara diam-diam dibelakang layar setelah halaman selesai diload (asynchronous). Hal ini akan mencegah sebuah halaman yang macet (stuck) dan gagal menampilkan sebagian halaman karena menunggu suatu file yang ternyata terlalu berat di load, misalnya file di luar domain kita yang bisa jadi kecepatan aksesnya berbeda.
Solusi:

1. Menggunakan Pure JavaScript

Script ini saya temukan dari diskusi di StackOverflow (http://stackoverflow.com/questions/3973441/conditionally-load-javascript-external-and-internal-and-keep-execution-order).
Buatlah fungsi berikut ini:

// Load the script designated by `src`, poll for the appearance
// of the symbol `name` on the `window` object. When it shows
// up, call `callback`. Timeout if the timeout is reached.
function loadAndWait(src, name, timeout, callback) {
    var stop, script;

    // Do nothing if the symbol is already defined
    if (window[name]) {
        setTimeout(function() {
            callback("preexisting");
        }, 10);
    }
    else {
        // Load the script
        script = document.createElement('script');
        script.type = "text/javascript";
        script.src = src;
        document.body.appendChild(script);

        // Remember when we should stop
        stop = new Date().getTime() + timeout;

        // Start polling, long-ish initial interval
        setTimeout(poll, 150);
    }

    function poll() {
         if (window[name]) {
             // Got it
             callback("loaded");
         }
         else if (new Date().getTime() > stop) {
             // Time out
             callback("timeout");
         }
         else {
             // Keep waiting, shorter interval if desired
             setTimeout(poll, 75);
         }
    }
}

Dan ketika kita akan meload jQuery secara asyncronous, gunakan fungsi loadAndWait tadi

loadAndWait(
    "http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js",
    "jQuery",
    10000, // ten seconds or whatever
    function(result) {
        //fungsi jQuery Anda ketik di sini
    }
 );

Jika Anda merasa script tersebut terlalu ribet, masih ada alternatif lain yaitu dengan mengunakan library terentu, seperti di bawah ini.

2. Menggunakan Head.js

Head JS adalah JavaScript library yang dapat digunakan untuk meload JavaScript secara dinamis. Cara menggunakannya cukup mudah. Misalnya kita akan membuat carousel menggunakan library CarouFredSel, dimana membutuhkan jQuery. Kita akan meloadnya seperti berikut

head.js("/js/jquery.js", "/js/caroufredsel.js",function() {

   //panggil fungsi plugin jQuery di sini
   jQuery(document).ready(function($) {
   $('#mydiv').carouFredSel({
   });
  });

})

HeadJs berukuran sangat kecil sekitar 4KB dan dapat didownload di situs resminya http://head.js.com

3. Menggunakan Yepnope.JS

Nah, Yepnope ini favorit saya, karena fiturnya cukup lengkap dan mudah digunakan. Yepnope mendukung callback dan kondisional. YepnopeJS dapat didownload di http://yepnopejs.com
Contoh cara meload jQuery secara asyncronous menggunakan Yepnope

yepnope([{
  // mencoba mendownload jQuery dari Google CDN
  load: 'http:/¬/ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js',
  complete: function () {
    if (!window.jQuery) { //Cek, jikta Google CDN gagal, maka kita load jQuery di lokal.
      yepnope('local/jquery.min.js');
    }
  }
}, {
  load: 'jquery.plugin.js', //load plugin tertentu
  complete: function () {
    jQuery(function () {     //panggil fungsi plugin di sini
      jQuery('div').plugin();
    });
  }
}]);

Object Yepnope selengkapnya seperti ini

yepnope([{
  test : /* kondisional test, boolean true atau false    */,
  yep  : /* array, jika test bernilai true, maka yep akan diload  */,
  nope : /* array, jika test bernilai false, maka nope akan diload */,
  both : /* array, akan selalu diload, meskipun test bernilau true atau false*/,
  load : /* array, akan selalu diload*/,
  callback : /* function ( testResult, key ) | object { key : fn }            */,
  complete : /* function                                                      */
}, ... ]);

Contoh lainnya: Saya akan meload script dan CSS tertentu hanya ketika viewport lebih besar dari 320 piksel.

yepnope([{
	test: 320 < document.documentElement.clientWidth //test jika viewport lebih dari 320pixel
  , yep: [ "js/jquery.js","js/bootstrap.js","css/largescreen.css" ]
  , complete:function () {
	jQuery(document).ready(function($) {
		//kode plugin jquery di sini.
	})
	}
}

Selain yang saya sebutkan di atas, sebenarnya masih banyak lagi library JavaScript yang dapat digunakan untuk meload file JavaScript/CSS secara dinamis, diantaranya

• Lazyload https://github.com/rgrove/lazyload/
• ChainJS https://github.com/chriso/chain.js
• LoadJS https://github.com/chriso/load.js
• RequireJS http://requirejs.org
• Conditionizr http://conditionizr.com/
• AMDJS https://github.com/amdjs/amdjs-api/wiki/AMD
• Modernizr http://modernizr.com