6
Sebelumnya saya share cara mengetahui kecepatan loading blog , sekarang saya share cara mempercepatnya .sebenarnya bisa saya share cara mempercepatnya tetapi karena banyaknya hal yang harus dilakukan maka akan saya bagi menjadi beberapa posting.


Note : Sebelum kalian melakukan step-step yang saya ajarkan , silahkan backup template anda

Cara memperingan Javascript

Sebenarnya javascript dapat diperingan dengan menghilangkan spasi kosong yang tidak berguna karena browser zaman sekarang dapat membaca javascript tanpa spasi , berbeda dengan dulu, jadi misalnya ada Javascript seperti berikut
<script type='text/javascript'>

/*<![CDATA[*/
// JavaScript Document

//Automatic read more
var thumbnail_mode = "yes";; //yes -with thumbnail, no -no thumbnail
summary_noimg = 530; //summary length when no image
summary_img = 440; //summary length when with image
img_thumb_height = 220;
img_thumb_width = 220;

function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}

function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(thumbnail_mode == "yes") {
if(img.length>=1) {
imgtag = '<span style="position: relative; float:left; margin: 5px 15px 10px 0;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px" /></span>';
summ = summary_img;
}
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
/*]]>*/</script>
Ini adalah javascript untuk auto readmore, dapat diminify menjadi seperti berikut
<script type='text/javascript'>
/*<![CDATA[*/
function removeHtmlTag(e,t){if(e.indexOf("<")!=-1){var n=e.split("<");for(var r=0;r<n.length;r++){if(n[r].indexOf(">")!=-1){n[r]=n[r].substring(n[r].indexOf(">")+1,n[r].length)}}e=n.join("")}t=t<e.length-1?t:e.length-2;while(e.charAt(t-1)!=" "&&e.indexOf(" ",t)!=-1)t++;e=e.substring(0,t-1);return e+"..."}function createSummaryAndThumb(e){var t=document.getElementById(e);var n="";var r=t.getElementsByTagName("img");var i=summary_noimg;if(thumbnail_mode=="yes"){if(r.length>=1){n='<span style="position: relative; float:left; margin: 5px 15px 10px 0;"><img src="'+r[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px" /></span>';i=summary_img}}var s=n+"<div>"+removeHtmlTag(t.innerHTML,i)+"</div>";t.innerHTML=s}var thumbnail_mode="yes";summary_noimg=530;summary_img=440;img_thumb_height=220;img_thumb_width=220
/*]]>*/</script>

Ukurannya pun berkurang sekitar 1/4 , hebat kan ?

Website untuk Mengcompress / meminify Javascript

Berikut adalah website yang dapat digunakan untuk memperingan Javascript

Cara menggabung Javascript

Pertama-tama silahkan cari semua Javascript di template blog anda
Gabung dan taruh di notepad hingga menjadi seperti ini
<script type='text/javascript'>
Kumpulan Javascript
</script>
<script type='text/javascript'>
Kumpulan lagi
</script>
Hapus semua  <script type='text/javascript'> kecuali yang paling atas dan </script> kecuali yang paling bawah, sehingga akan menjadi seperti berikut
<script type='text/javascript'>
Hasil gabungan kumpulan javascript
</script>
Lalu minify kan javascript sehingga ukurannya lebih kecil

Mengapa digabung ? 

Setiap server mengambil sesuatu di internet , jika yang diambil banyak maka tidak bisa diambil semuanya, harus satu-satu , mulai dari yang pertama dan terakhir . Jika digabung maka server tidak perlu mengambil sesuatu secara beberapa kali yang tentu saja itu membutuhkan waktu. Maka Image Sprit , Javascript dan CSS compress selalu dibutuhkan. Untuk image sprite karena agak sulit , saya sharenya agak lama.

Posting Komentar Blogger

  1. Saya coba yang kompres javascript http://javascriptcompressor.com/ tapi setelah saya terapkan hasil kompresnya kok malah jadi error ya?

    BalasHapus
    Balasan
    1. jangan masukkan //CDATA
      CDATA di blogger berguna untuk seperti menghentikan koreksi javascript yang tidak valid. tinggal ambil kode sebelum CDATA dan penutupnya, lalau compress dan masukkan yang hasil compress mengganti kode javascript diantara CDATA dan penutupnya ( penutupnya berbentuk ]]> )

      Hapus
  2. Ini nih yang ane cari-cari heeee =)

    -www.febrikasetiyawan.com-

    BalasHapus
  3. ane coba dulu gan
    http://si-kudil.blogspot.com/

    BalasHapus
  4. makasih banget gan. jadi lebih makin enteng blog saya :)

    kunjung kunjung ya :)
    rifkyalgifari.blogspot.com

    BalasHapus
  5. ane COba ah :D

    http://aulia-bloger7.blogspot.com/

    BalasHapus

 
Top