Pada artikel kali ini, Blogger Tune-Up akan membahas bagaimana cara mengurangi waktu pemuatan (Loading) perpustakaan JavaScript dengan menggunakan fasilitas Auto-Loading (awal pembongkaran skenario dibelakang Blogger Tune-Up). Hal ini sangat jarang di perhatikan oleh para pemilik blog dan ini memang termasuk fasilitas terbaru dari Google AJAX API. Pada awalnya memang cukup rumit, tetapi dengan penuh kesabaran dan ketekunan Insya Allah hal ini akan menjadi mudah.
Bahkan Google sendiri dalam dokumen resminya mengatakan "Adalah mungkin untuk memuat secara otomatis daftar API atau perpustakaan Javascript ketika sedang memasukan loader script. Hal ini dilakukan dengan tujuan untuk mengurangi waktu pemuatan dalam beberapa kasus dengan menghilangkan satu permintaan Javascript pada saat pemuatan. Fitur lanjutan ini bisa menjadi sangat sulit untuk diterapkan, tergantung pada situasi yang tepat. Oleh karena itu, kami sarankan penggunaan auto-loading harus dipertimbangkan hanya dalam kasus-kasus tertentu ketika pengurangan latency sangat penting."
Tetapi perlu juga kita pertimbangkan lebih jauh penggunaan Auto-Load ini untuk membuat para pengunjung kita lebih menikmati blog atau website kita dengan proses pemuatan halaman yang lebih cepat, sehingga penting dan tidak pentingnya seperti saran Google menjadi hal yang tidak lagi perlu kita perdebatkan. Kecuali para pembaca Blogger Tune-Up ingin memperdebatkannya.
Mari kita mulai...
Anggap kita menggunakan jQuery dan Google Map API, maka kode normalnya seperti dibawah ini:
<head>Atau kita juga bisa menuliskannya seperti dibawah ini:
<!-- jQuery 1.3.2 -->
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">
</script>
<!-- Google Map API V3 -->
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false">
</script>
</head>
<head>
<!-- Google's AJAX APIs -->
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("maps", "3", {other_params:"sensor=false"});
google.load("jquery", "1.3.2");
</script>
</head>
Cara diatas adalah cara terbaik dan teraman dalam pemanggilan perpustakaan JavaScript (salah satunya pernah dibahas dalam artikel "Solusi JavaScript untuk Pengguna Blogger"). Tetapi disini kita membicarakan bagaimana cara mengurangi waktu (mempercepat) pemuatan perpustakaan JavaScript tersebut. Ini artinya segala sesuatu harus dimuat hanya dengan satu kali pemanggilan. Artinya cukup satu kali pemuatan untuk semua perpustakaan JavaScript yang kita perlukan.
Menggunakan Fasilitas Auto-Loading
Awalnya kita harus menuliskan script konfigurasi kecil agar perpustakaan Google mengenalinya dengan apa yang kita butuhkan. Hal ini sesuai dengan kebutuhan kita yang bisa saja menjadi agak rumit. Untungnya Google memberikan fasilitas Autoloader Wizard, tetapi terbatas hanya untuk beberapa perpustakaan utama yang didukung oleh Google, dan tidak satupun menerima dari luar, sebagai contoh jQuery. Hal ini membuat kita harus menuliskan sendiri konfigruasi script yang dibutuhkan. Walaupun demikian ini justru membuat kita lebih mudah untuk memahami bagaimana hal ini bekerja jika kita mau belajar menuliskan sendiri konfigurasi script-nya.
Mari kita lanjutkan...
Seperti contoh yang telah kita ambil diatas, maka untuk menggunakan fasilitas Autoloading, kita harus menuliskan konfigurasi script-nya seperti dibawah ini:
{
"modules" : [
{
"name" : "jquery",
"version" : "1.3.2"
},
{
"name" : "maps",
"version" : "3",
other_params:"sensor=false"
}
]
}
Mudah-mudahan hal diatas cukup jelas. Jika diperhatikan script diatas, maka kita membutuhkan 2 module, yang pertama jQuery Versi 1.3.2 dan yang kedua Google Map API Versi 3.0 (catatan: parameter sensor wajib kita tambahkan walaupun "false").
Sekarang kita akan memadatkannya sehingga menjadi seperti dibawah ini:{"modules":[{"name":"jquery","version":"1.3.2"},
{"name":"maps","version":"3",other_params:"sensor=false"}]}
Jika diperhatikan script diatas terpisah terdiri dari dua baris, yang harus kita pertimbangkan adalah menjadikannya script tersebut satu baris, mejadi seperti dibawah ini:
{"modules":[{"name":"jquery","version":"1.3.2"},{"name":"maps","version":"3",other_params:"sensor=false"}]}
Mudah-mudahan sampai disini masih bisa dipahami dengan baik. Sekarang kita akan meng-encode URL tersebut menjadi seperti dibawah ini:
%7B%22modules%22%3A%5B%7B%22name%22%3A%22jquery%22%2C%22version%22%3A%221.3.2%22%7D%2C%7B%22name%22%3A%22maps%22%2C%22version%22%3A%223%22%2Cother_params%3A%22sensor%3Dfalse%22%7D%5D%7D
Proses encode URL dilakukan agar script dibaca biasa layaknya kode HTML biasa. Kita bisa menggunakan berbagai service encode URL dari pihak lainnya, misal link ini.
Selanjutnya kita menggabungkan URL yang panjang hasil encode dengan loader script, sehingga script menjadi seperti dibawah ini:
<script type="text/javascript" src="http://www.google.com/jsapi?autoload=%7B%22modules%22%3A%5B%7B%22name%22%3A%22jquery%22%2C%22version%22%3A%221.3.2%22%7D%2C%7B%22name%22%3A%22maps%22%2C%22version%22%3A%223%22%2Cother_params%3A%22sensor%3Dfalse%22%7D%5D%7D">
Akhirnya selesai juga...Sekarang blog/website kita hanya memerlukan satu kali pemuatan walaupun terdiri dari jQuery dan Google Map API, jelas hal ini lebih cepat dari pada biasanya. Dan kita pun bisa menambahkan berbagai perpustakaan lain sebanyak yang kita perlukan hanya dengan satu kali pemuatan, dan itu pun akan lebih cepat lagi karena script terintegrasi sebagai script HTML. Bukankah hal ini lebih baik?
Terjadi kesalahan?
Untuk menjebak setiap kesalahan, kita bisa melihat respon Google, hal ini akan diberitahukan dengan "Error: Invalid autoload". Kita juga bisa menggunakan Firefox's Error Console, atau bahkan cara termudah adalah dengan membuka halaman kita, jika menampilkan var error = new Error("Invalid autoload."); ini berarti terjadi kesalahan dengan konfigurasi script yang kita tuliskan/masukan.
Sumber inspirasi:
Selamat mencoba dan semoga berhasil... Happy Blogging :)
