Lompat ke konten Lompat ke sidebar Lompat ke footer

Cara Mempercepat Loading Blog


Cara Mempercepat Loading Blog  - Salah satu tips jitu yang bisa kita terapkan untuk mempercepat loading blog adalah dengan cara compress kode CSS dan javascript yang ada pada template. Biasanya pengunjung akan langsung mengeluarkan jurus GPL (Gak Pake Lama) apabila menemukan blog yang loadingnya berat alias lelet dan mereka akan langsung menutup halaman blog yang tadinya mau dibuka. Nah supaya blog kita juga jangan sampai kena jurus GPL tadi, tidak ada salahnya kita antisipasi dengan cara meningkatkan speed blog kita melalui beberapa cara seperti mengkompresi CSS dan javascript atau kompresi pada image/gambar untuk mempercepat loading blog anda.


Untuk melakukan kompresi CSS dan javascript, sobat dapat menggunakan tools CSS Compressor yang bisa dicari di Google atau kompresi secara online melalui Online YUI Compressor. Saya sarankan sobat menggunakan situs online ini karena lebih gampang dan cepat. Tinggal copy CSS atau javascript yang mau dikompresi dari template, kemudian pilih CS jika ingin melakukan compress CSS dan pilih JS jika 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 mana yang javascript.


·         Ciri kode CSS pada template yaitu yang berada diantara 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 yang berada diantara kode (diapit oleh 2 kode)  <script type='text/javascript'> dengan kode </script>. Atau bisa juga yang diantara kode <script type='text/javascript'> //<![CDATA[  dengan kode //]]> </script>. Contoh javascript itu yang seperti ini mas bro..

<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(b,a){if(b.indexOf("<")!=-1){var d=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);return b+" [...]"}function createSummaryAndThumb(d){var f=document.getElementById(d);var a="";var b=f.getElementsByTagName("img");var e=summary_noimg;if(b.length>=1){a='<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+b[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';e=summary_img}var c=a+"<div>"+removeHtmlTag(f.innerHTML,e)+"</div>";f.innerHTML=c};
//]]>
</script>

Cara Mengkompresi Image atau Gambar :

Untuk kompresi image atau gambar, biasanya saya juga melakukannya secara online di Free Image Optimizer. Kalo mau pake tools lain, sobat bisa cari tools seperti JPEG Compressor di Google. Kompresi image 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 cara mempercepat loading blog yang sudah saya jelaskan tadi. Untuk mengetahui berapa kecepatan loading blog anda sebelum mengkompresi CSS, javascript dan image, cobalah pantau blog sobat melalui link http://gtmetrix.com ini. Saya sering memeriksakan “kondisi kesehatan” blog saya melalui gtmetrix ini karena banyak parameter yang bisa kita pantau. Dan sesudah 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…!

30 komentar untuk "Cara Mempercepat Loading Blog"

  1. Terima kasih mas rayhan..tutorialnya sangat saya perlukan untuk diterapkan di blog saya yang blogspot.
    pertanyaan saya, bagaimana caranya jika kita ingin menerapkannya di blog wordpress dengan hosting sendiri?
    makasih

    BalasHapus
  2. thanks mas..tips yang sangat bermanfaat nih :D

    BalasHapus
  3. @Vira
    Wow I'm surprised with ur blog ! Good job Vira suka blog kamu dan sharingnya.

    @dentaq
    Kompresi di blog WP plus minusnya sama aja mas bro. Dalam template WP kan juga ada CSS dan javascriptnya toh..?!

    @dani nurhadi
    Sama2 sobat.. :p

    BalasHapus
  4. kalo codenya dicompress templatenya ada yang berubah gitu ngga?

    BalasHapus
  5. Terima kasih atas informasinya, sekarang blog saya lebih ringan dari biasanya.
    karena semua artikel saya menggunakan gambar animasi sehingga loading jadi lambat, syukurlah ada tips mantap ini,sekali lagi terimakasih

    BalasHapus
  6. Artikel yang sangat bermanfaat, Terima kasih.

    BalasHapus
  7. mantap gan... walaupun agak ribet buat aku pemula

    salam

    http://gubukpantun.blogspot.com/

    BalasHapus
  8. saya coba terapkan dlu gan........

    BalasHapus
  9. Mantap sekali infonya gan,,,
    Makasih banyak,,,
    N salam knal...

    BalasHapus
  10. nice info gan, patutu dicoba

    BalasHapus
  11. mempercepat loading blog..keren banget sob..bermanfaat sekali buat seo..loading cepat search engine senang :)punyaku lambat banget :(

    BalasHapus
  12. wah terimakasih sob.. sangat membantu sekali buat tugas anne

    BalasHapus
  13. Makasih mas, akhirnya ketemu jga tools buat kompres css dan javascript..

    BalasHapus
  14. makasih banyak sob, ahirnya ane bisa. nih sob sekalian mintak saran blog ane ya pliss... http://kataterbaru.blogspot.com/

    BalasHapus
  15. purwa-sedana.blogspot.com ..


    gmna cara kerjanya ?

    BalasHapus
  16. follow this blog

    http://riezcomp.blogspot.com

    BalasHapus
  17. wow... mantap gan... masih bisa diatur... nice tipsnya...

    BalasHapus
  18. infonya sngat brmanfaat... thanks ya

    oia,, mw nanya ne cara bwt change favicon thu gimana ya.. sperti yg diujung atas thu..

    BalasHapus
  19. Terima kasih Mas atas ilmunya. Sangat bermanfaat!

    BalasHapus
  20. mantap gan tipsnya
    tollong follback blog saya

    BalasHapus
  21. Info yang menarik biar kucoba sekarang,.,.,., terimakasih

    BalasHapus
  22. Keren bang...lanjutkan

    BalasHapus
  23. alow lam kenal , sangat bagus infonya dan bermanfaat sekali ..

    di tunggu kunjungan anda di sini


    salam sukses...

    BalasHapus
  24. informasi yang menarik sob..terimakasih

    BalasHapus
  25. artikelnya bagus dan bermanfaat sekali..

    izin menerapkan ya..thanks sharenya

    BalasHapus