Menggabungkan JavaScript untuk Kecepatan Loading Blog

Combine JavaScript for Fast Loading Blog

Seperti sudah kita ketahui bahwa jika blog memiliki banyak javascript, maka bisa dipastikan bahwa loading blog akan berat. Tentunya hal ini akan berdampak kurang baik bagi perkembangan blog, karena Google sangat tidak menyukai website dengan loading yang berat.

Untuk itu saya selalu menekankan untuk menggunakan javascript yang benar-benar sangat diperlukan agar blog tetap memiliki sentuhan modern yang aktraktif namun memiliki kecepatan loading yang bagus sehingga pengunjug dan mesin pencari pun menyukainya.

Nah jika ternyata di dalam blog kita memiliki beberapa javascript, maka untuk mengakali loading blog agar tidak terlalu berat, kita bisa mengakalinya dengan menggabungkannya menjadi satu file yang kemudian dimuat secara defer/ditunda, termasuk javascript untuk sosial media seperti fb, g+, ataupun twitter.

Namun sesuai pengalaman saya, tidak semua javascript dapat digabungkan. Tapi mungkin pada template yang berbeda dengan javascript yang berbeda, semuanya bisa digabungkan menjadi satu file. Jadi dalam hal ini kita harus mencobanya menggabungkan javascript satu per satu.

Misalkan di blog ada dua buah (atau lebih) javascript seperti di bawah ini.

<script type='text/javascript'>
//<![CDATA[
$(function(){$(".playvideo2").click(function(e){$(".videoyoutubeContainer2").show();$(".playvideo2").hide();$(".videoyoutube2").css({top:"15%",position:"fixed"});$(".videoplayer")[0].src+="&amp;autoplay=1";e.preventDefault()});$(".close-video2").click(function(){$(".videoyoutubeContainer2").hide();$(".playvideo2").show();$(".videoyoutube2").css({top:"-1000px",position:"absolute"});$(".videoplayer")[0].contentWindow.postMessage('{"event":"command","func":"'+"stopVideo"+'","args":""}',"*")})})
//]]>
</script>

<script type='text/javascript'>
//<![CDATA[
var jump=function(e){if(e){var t=jQuery(this).attr("href").replace("/","")}else{var t=location.hash}jQuery("html,body").animate({scrollTop:jQuery(t).offset().top-80},500,function(){})};jQuery(document).ready(function(e){e(document).on("click","a[href*=#]",jump);if(location.hash){setTimeout(function(){e("html, body").scrollTop(0).show();jump()},0)}else{e("html, body").show()}})
//]]>
</script>

Maka silahkan coba gabungkan menjadi satu seperti di bawah ini.

<script type='text/javascript'>
//<![CDATA[
$(function(){$(".playvideo2").click(function(e){$(".videoyoutubeContainer2").show();$(".playvideo2").hide();$(".videoyoutube2").css({top:"15%",position:"fixed"});$(".videoplayer")[0].src+="&amp;autoplay=1";e.preventDefault()});$(".close-video2").click(function(){$(".videoyoutubeContainer2").hide();$(".playvideo2").show();$(".videoyoutube2").css({top:"-1000px",position:"absolute"});$(".videoplayer")[0].contentWindow.postMessage('{"event":"command","func":"'+"stopVideo"+'","args":""}',"*")})});
var jump=function(e){if(e){var t=jQuery(this).attr("href").replace("/","")}else{var t=location.hash}jQuery("html,body").animate({scrollTop:jQuery(t).offset().top-80},500,function(){})};jQuery(document).ready(function(e){e(document).on("click","a[href*=#]",jump);if(location.hash){setTimeout(function(){e("html, body").scrollTop(0).show();jump()},0)}else{e("html, body").show()}})
//]]>
</script>

Cara meringankan / menggabungkan JavaScript agar loading lebih cepat, jangan lupa pisahkan setiap kelompok javascriptnya dengan tanda ; (titik koma). Setelah itu silahkan save template dan coba reload blognya untuk memastikan semua element berjalan seperti biasanya. Jika kode-kode javascriptnya sudah dihosting sebelumnya, silahkan buka filenya dan gabungkan kodenya dengan kode javascript yang lain.

Jika tidak ada yang error, maka lanjutkan untuk menggabungkan yang lainnya dengan menambahkan javascriptnya ke gabungan javascript yang tadi. Coba lagi blognya untuk memastikan semua dapat berjalan. Begitu seterusnya sampai semua tergabung. Jika ada javascript yang tidak bisa digabung, maka pisahkan.

Setelah semuanya tergabung, silahkan salin ke notepad. Hanya bagian yang berada di antara kode //<![CDATA[ dan //]]> yang disalin. Kemudian save as (misalnya) main.js dengan save as type: All Files (*.*)

Setelah itu silahkan hosting file main.js yang Anda buat tadi. Saya sarankan untuk menghostingnya di Google Code dengan TortoiseSVN, karena dari yang sudah saya coba, content yang dihosting di Google Code lebih cepat tampilnya di blog daripada yang dihosting di Google Drive.

Kemudian gunakan script defer seperti di bawah ini dan simpan di atas kode </body> dan silahkan hapus gabungan javascript yang Anda buat tadi di atas.

<script type='text/javascript'> //<![CDATA[ function downloadJSAtOnload(){var e=document.createElement("script");e.src="http://user.googlecode.com/svn/trunk/js/main.js";document.body.appendChild(e)}if(window.addEventListener)window.addEventListener("load",downloadJSAtOnload,false);else if(window.attachEvent)window.attachEvent("onload",downloadJSAtOnload);else window.onload=downloadJSAtOnload; //]]> </script>

Yang saya marking di atas adalah contoh file js yang dihosting di Google Code. Silahkan ganti dengan url hosting file Anda.

Sekian terima kasih

Sumur : http://www.kompiajaib.com/2014/12/menggabungkan-javascript-untuk.html