Menggabungkan Javascript Untuk Kecepatan Loading Blog

Menggabungkan Javascript Untuk Kecepatan Loading Blog

Bola Hero Gawai

Menggabungkan Javascript Untuk Kecepatan Loading Blog

Menggabungkan Javascript
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>

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 yang pernah saya sharing untuk related posts DTE 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. Sekarang silahkan coba reload blog Anda, apakah kecepatan loadingnya meningkat? Selamat mencoba... dan happy blogging...

Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

0 Comment

Add Comment

Komentar dengan link promo akan masuk spam.

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Kompi Ajaib? Keep us running by whitelisting Kompi Ajaib in your ad blocker.

This is how to whitelisting Kompi Ajaib in your ad blocker.

Thank you!

×
×
×