Friday, September 30, 2011

Trik Untuk Mempercepat Loading Blog


Trik Cara Mempercepat Loading Blog  - Salah satu tips jitu yang bisa kitaterapkan untuk mempercepat loading blogadalah dengan cara compress kode CSS danjavascript yang ada pada template. Biasanya pengunjung akan langsungmengeluarkan jurus GPL (Gak Pake Lama)apabila menemukan blog yang loadingnya berat alias lelet dan mereka akanlangsung menutup halaman blog yang tadinya mau dibuka. Nah supaya blog kitajuga jangan sampai kena jurus GPL tadi, tidak ada salahnya kita antisipasidengan cara meningkatkan speed blogkita melalui beberapa cara seperti mengkompresiCSS dan javascript atau kompresi pada image/gambar.

Cara MengkompresiKode CSS dan JavaScript pada Template :

Untuk melakukan kompresi CSS dan javascript, sobatdapat menggunakan tools CSS Compressoryang bisa dicari di Google atau kompresi secara online melalui OnlineYUI Compressor. Saya sarankan sobat menggunakan situs online ini karenalebih gampang dan cepat. Tinggal copy CSS atau javascript yang mau dikompresidari template, kemudian pilih CS jika ingin melakukan compress CSS dan pilih JSjika yang ingin dikompresi adalah javascript. Kemudian kode CSS atau javascript yang sudah dikompresi kita copy dan  paste-kan kembali pada tempatnya semula dalam template. Berdasarkan pengalaman saya,kesulitan yang sering dialami blogger adalah bagaimana membedakan mana yang CSS dan manayang javascript.


·        Ciri kode CSS pada template yaitu yang beradadiantara kode <b:skin><![CDATA[/*  sampai dengan kode ]]></b:skin>.Contoh yang kode CSS itu yang seperti ini nih..

.post-body {
font-family:'Calibri', Segoe UI,'Myriad Pro', Myriad, 'Trebuchet MS',Helvetica, sans-serif;
font-size:15px;
line-height:1.4em;
margin:0 0 0.75em;
}
.post-footer {
border-bottom:2px dotted #dddddd;
color:#999999;
font-style:normal;
letter-spacing:0;
margin:0.3em 0;
padding:2px;
text-transform:none;
}

·        Ciri kode JavaScript pada template yaitu yangberada diantara kode (diapit oleh 2 kode)  <scripttype='text/javascript'> dengan kode </script>. Atau bisa juga yang diantarakode <script type='text/javascript'>//<![CDATA[  dengan kode //]]> </script>. Contohjavascript itu yang seperti ini mas bro..

<scripttype='text/javascript'>
//<![CDATA[
functionremoveHtmlTag(b,a){if(b.indexOf("<")!=-1){vard=b.split("<");for(var c=0;c<d.length;c++){if(d[c].indexOf(">")!=-1){d[c]=d[c].substring(d[c].indexOf(">")+1,d[c].length)}}b=d.join("")}a=(a<b.length-1)?a:b.length-2;while(b.charAt(a-1)!=""&&b.indexOf(" ",a)!=-1){a++}b=b.substring(0,a-1);returnb+" [...]"}function createSummaryAndThumb(d){varf=document.getElementById(d);var a="";varb=f.getElementsByTagName("img");vare=summary_noimg;if(b.length>=1){a='<spanstyle="float:left; padding:0px 10px 5px0px;"><imgsrc="'+b[0].src+'"width="'+img_thumb_width+'px"height="'+img_thumb_height+'px"/></span>';e=summary_img}varc=a+"<div>"+removeHtmlTag(f.innerHTML,e)+"</div>";f.innerHTML=c};
//]]>
</script>

Cara MengkompresiImage atau Gambar :

Untuk kompresi image atau gambar, biasanya saya jugamelakukannya secara online di Free Image Optimizer.Kalo mau pake tools lain, sobat bisa cari tools seperti JPEG Compressor di Google. Kompresiimage di layanan Free Image Optimizer ini mampu mengurangi ukuran (size)gambar dalam kilobyte hingga 50% lebih tanpa mengurangi kualitas dari gambar tersebut.Contoh hasil kompresinya seperti gambar dibawah ini.

Sebelum >> 26 Kb
Sesudah >> 4 Kb


Well, capek juga nulis artikel puanjang banget nih !Sekarang coba sobat terapkan trik untuk mempercepat loading blog yang sudahsaya jelaskan tadi. Untuk mengetahui berapa kecepatan loading blog anda sebelummengkompresi CSS, javascript dan image, cobalah pantau blog sobat melalui link http://gtmetrix.com ini. Saya seringmemeriksakan “kondisi kesehatan” blog saya melalui gtmetrix ini karena banyak parameter yang bisa kita pantau. Dansesudah mengkompresi, cobalah cek kembali berapa waktu loading blog sobat. Jika speednya menjadi lebih cepat,berarti anda telah berhasil meningkatkan speed blog anda. Good luck buddy…!

No comments:

Post a Comment