Menggabungkan Javascript Untuk Kecepatan Loading Blog

Seperti sudah kita ketahui bahwa kalau blog mempunyai banyak javascript, maka sanggup dipastikan bahwa loading blog akan berat. Tentunya hal ini akan berdampak kurang baik bagi perkembangan blog, alasannya yaitu Google sangat tidak menyukai website dengan loading yang berat.

Untuk itu aku selalu menekankan untuk memakai javascript yang benar-benar sangat diharapkan supaya blog tetap mempunyai sentuhan modern yang aktraktif namun mempunyai kecepatan loading yang cantik sehingga pengunjug dan mesin pencari pun menyukainya.

Nah kalau ternyata di dalam blog kita mempunyai beberapa javascript, maka untuk mengakali loading blog supaya tidak terlalu berat, kita sanggup mengakalinya dengan menggabungkannya menjadi satu file yang kemudian dimuat secara defer/ditunda, termasuk javascript untuk sosial media ibarat fb, g+, ataupun twitter.

Namun sesuai pengalaman saya, tidak semua javascript sanggup digabungkan. Tapi mungkin pada template yang berbeda dengan javascript yang berbeda, semuanya sanggup 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 ibarat 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 ibarat 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>

Jangan lupa pisahkan setiap kelompok javascriptnya dengan tanda ; (titik koma). Setelah itu silahkan save template dan coba reload blognya untuk memastikan semua element berjalan ibarat biasanya. Jika kode-kode javascriptnya sudah dihosting sebelumnya, silahkan buka filenya dan gabungkan kodenya dengan instruksi javascript yang lain.

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

Setelah semuanya tergabung, silahkan salin ke notepad. Hanya bab yang berada di antara instruksi //<![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, alasannya yaitu dari yang sudah aku coba, content yang dihosting di Google Code lebih cepat tampilnya di blog daripada yang dihosting di Google Drive.

Kemudian gunakan script defer yang pernah aku sharing untuk related posts DTE ibarat di bawah ini dan simpan di atas instruksi </body> dan silahkan hapus campuran 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 aku marking di atas yaitu pola file js yang dihosting di Google Code. Silahkan ganti dengan url hosting file Anda. Sekarang silahkan coba reload blog Anda, apakah kecepatan loadingnya meningkat? Selamat mencoba... dan happy blogging...

Sumber https://www.kompiajaib.com/

Share this post