Kompres Kode CSS dan Javascript

Sumber :  Compress Javascript dengan YUI Compressor by O-OM.

Mungkin kamu tahu & mengerti komponen-komponen apa saja yang menyebabkan suatu blog lambat loading (internal), antara lain :  Banyaknya assessoris blog (widget/gadget), menampilkan banyak image, tampilan full post di halaman utama (home), banyaknya script, dan lain-lain.  Atau kamu ingin mendefinisikan & menambahkan "dan lain-lain" dalam komentar.

Dalam trik blogger kali ini, kita akan mendiskusikan tentang bagaimana mengoptimalkan kode CSS & javascript agar sedikit banyaknya dapat lebih cepat loading.  Nah, layanan online yang dapat kita pergunakan untuk melaksanakan fungsi tersebut adalah Online YUI Compressor.  Cara menggunakan layanan ini juga tidak sulit, kita tinggal memasukan semua kode javascript yang ingin di-kompresi, ingat! tanpa memasukan tag <script type='text/javascript'> ... </script> atau <script type='text/javascript'> //<![CDATA[ ... //]]> </script> tapi hanya kode utamanya saja.

Adapun cara menggunakan Online YUI Compressor dapat direview seperti ulasan berikut :


Online YUI Compressor

  1. Masukkan kode javascript dalam kotak "Code".
  2. Pilih secara dropdown jenis file pada "File Type".
  3. Selanjutnya untuk opsi-opsi kosongkan.
  4. Klik tombol "Compress"
  5. Tunggu beberapa saat file dikompres dan hasilnya akan ditampilkan tepat di bawah tombol "Compress".
  6. Hasil Compress
  7. Copy kode tersebut & paste di antara tag <script type='text/javascript'> ... </script> atau <script type='text/javascript'> //<![CDATA[ ... //]]> </script> dalam blog kamu.

Contoh :

  • Javascript otomatis readmore.
<script type='text/javascript'>
var thumbnail_mode = "float" ;
summary_noimg = 450;
summary_img = 450;
img_thumb_height = 120;
img_thumb_width = 120;
</script>

<script type='text/javascript'>
//<![CDATA[
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(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><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>
Catatan :
Kode yang berwarna merah merupakan kode yang dimasukkan dalam kotak "Code" pada site Online YUI Compressor.

  • Hasilnya setelah dikompres & dimasukkan dalam full kode Javascript otomatis readmore.
<script type='text/javascript'>
var thumbnail_mode = "float" ;
summary_noimg = 450;
summary_img = 450;
img_thumb_height = 120;
img_thumb_width = 120;
</script>

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

Semoga bermanfaat...

34 komentar untuk “Kompres Kode CSS dan Javascript”

  1. wah tips menarik nih,,, biar para pengunjung tidak jenuh menunggu loading blog yang alam gan :D

    BalasHapus
  2. Tips nya bagus banget... terima kasih udah mau berbagi

    BalasHapus
  3. saya mah ga ngeri ginian, ngertinya copast aja, hehehe
    tapi sipp dah nambah ilmu bangg

    BalasHapus
  4. waduh ga mudeng nih aku .... harus banyak baca2 nih ...

    btw saya punya kontes kecil2an nih ....

    Hanya dengan menjadi top commentator di http://fireworkslovers.com anda berhak mendapatkan sebuah modem. Hehe, gimana? Tertarik? karena baru dimulai, jadi masih ada banyak waktu ko ... Read more..

    BalasHapus
  5. bagus nih tipsnya..
    bermanfaat..

    BalasHapus
  6. terima kasih atas tipnya bang,semoga bermanfaat.

    BalasHapus
  7. Ya yang begini ini nih tips dan trik yang saya lagi cari - cari..
    terimakasih

    BalasHapus
  8. wah ini dia neh yg saya cari2 mas rudy, tutorial untuk meengcompress js dan css blog, makasih dicoba dulu yah :)

    BalasHapus
  9. wah boleh juga neh tips nya :)
    nti coba di praktekin di blogspot pny saya :)

    BalasHapus
  10. wah kapan akan saya coba compres, saya tunggu coment dan follow baliknya jika berkenan

    BalasHapus
  11. Tapi bukannya kalo dikompres kemampuannya jadi berkurang ya? Lagipula jadi lebih susah kalo mau diedit manual karena bentuknya jadi berbeda

    BalasHapus
  12. @Reza Winandar kemampuan apa yang berkurang bro?

    BalasHapus
  13. @Reza Winandar : Ngga ada yang kurang kk. Cuma jika kesulitan mengedit script-nya ketika sudah dikompres, mungkin juga terjadi. Sebaiknya edit dulu sesuai kebutuhan, kemudian dikompres :-D

    BalasHapus
  14. Benar-benar terkompres ya mas,gini mas saya mau tanya gunanya kompres tuh apa?

    BalasHapus
  15. @Pasang Iklan Gratis Sebagai Awal Mulai Bisnis Online : meminimalkan waktu loading, kk. Mungkin untuk lebih jelas mengenai manfatnya, silakan kk kunjungi website Online YUI Compressor

    BalasHapus
  16. wah mantappp ini mah trik nya. saya cari cari ketemu nya tidak sengaja di sini ! makasih byk yah mas

    BalasHapus
  17. dahsyat banget nih softwarenya sob kode yg panjang itu jadi di compress bener2 tuh..ane amu coba juga nihh
    thanks infonya . moga berkah

    BalasHapus
  18. thank's banget ni gan tipnya....
    cz blog saya bakalan tambah cepat loadingnya...

    oy, klo scripnya widget bisa di compres g?
    thank's

    BalasHapus
  19. wah komentar di atas pada menjilat semua,,

    oiya mas yang punya blog,,
    saya lagi nyari cara nih buat kompress widget yang bentuknya css.. tapi ga dapet,,
    di judul tutorial ini katanya js sama css,,
    css nya mna ya mas..
    ttolong diajari saya yang belum bisa ini,he
    makasih

    mohon di konfirm koment saya,,perlu nih jawabannya

    BalasHapus
  20. @dy lc : Caranya ampir sama, kk. Misal kode CSS-nya seperti ini :
    body {
    background:$bgcolor url('http://i46.tinypic.com/2woaj4m.jpg') repeat-y center top;
    font:$bodyfont;
    color:$bodycolor;
    font-size:small;
    text-align:center;
    margin:0;
    }

    a:link, a:visited {
    color:$linkcolor;
    text-decoration:none;
    }

    Setelah di kompres akan jd seperti ini :
    body{background:$bgcolor url('http://i46.tinypic.com/2woaj4m.jpg') repeat-y center top;font:$bodyfont;color:$bodycolor;font-size:small;text-align:center;margin:0;}
    a:link, a:visited{color:$linkcolor;text-decoration:none;}

    BalasHapus
  21. Ok Gan Nice Idea... http://yahoo-informations-update.blogspot.com/

    BalasHapus
  22. a href='http://yahoo-informations-update.blogspot.com/'

    BalasHapus
  23. a href='http://yahoo-informations-update.blogspot.com/'

    BalasHapus
  24. Oke akan dicoba bos, kunjungi balik ya
    di

    http://jufry2u.blogspot.com/
    http://juprimalino.blogspot.com/

    BalasHapus
  25. makin banyak saja ilmu dari blog ini...
    makasih sahare nya ya..
    just a simple of blog for sharing

    BalasHapus
  26. ini dia yg saya cari2, sangat bermanfaat sekali. Thanks atas postingnya ya mas..

    BalasHapus