Kompress CSS anda dengan CSS Compressor

Menanggapi request salah satu pembaca blog LENTERA SAHABAT yaitu agar dibuatkan artikel tentang Cara Mengkompress kode CSS, maka postingan kali ini mencoba membahas tentang bagaimana mengkompres kode CSS.

Salah satu faktor agar blog atau website mudah atau ringan untuk di load adalah dengan mengoptimalkan file CSS. Salah satu cara agar file CSS anda bisa kecil adalah dengan cara mengkompres file tersebut baik secara manual ataupun secara otomatis dengan menggunakan tool CSS Compressor.

Sebenarnya apa sih yang di kompres pada file CSS? Ambil contoh dalam kode CSS ada kode seperti ini :



a {
color: #0d5ef3;
text-decoration:none;
}


a:visited {
color: #0d5ef3;
text-decoration:none;
}

a:hover {
color: #0d5ef3;
text-decoration:underline;
}

 
 

Dari contoh diatas terlihat bahwa ada dua buah properti CSS yang sama, yaitu untuk fungsi a dan fungsi a:visited. Untuk kasus seperti ini maka sebenarnya kita bisa lebih menyedehanakan yaitu dengan menggabungkannya dengan memberikan tanda koma ( , ), dan karena a:hover mempunyai kode warna yang sama maka kode tersebut tidak perlu di tulis kembali. MIsal kode hasil penyederhanaan adalah seperti ini :

a, a:visited{

color: #0d5ef3;
text-decoration:none;

}

a:hover {
text-decoration:underline;
}

Syntax CSS yang pertama dengan yang kedua sedikit berbeda, namun mempunyai fungsi yang sama.

Ternyata gaya penulisan juga berpengaruh terhadap loading, pemakaian banyak spasi memungkinkan waktu load lebih lama. Maka jika anda menginginkan hasil terbaik, syntax CSS yang tadi harus di tulis seperti ini :

a, a:visited{color: #0d5ef3; text-decoration:none;}

a:hover { text-decoration:underline; }

Lebih ekstrim lagi seperti ini :

a, a:visited{color: #0d5ef3; text-decoration:none}a:hover { text-decoration:underline}

Untuk yang terakhir ini akan memnghasilkan loading tercepat, namun anda akan kesulitan ketika anda ingin melakukan editing terhadap CSS anda.

Contoh diatas adalah melakukan kompresi dengan cara manua. Cara ini hanya bisa dilakukan apabila anda sudah familiar dengan kode CSS. Cara yang praktis dan tanpa harus mempunyai basic pemrograman adalah dengan menggunakan Tool CSS compressor, tool seperti ini banyak sekali di internet dan dapat anda digunakan secara gratis.

Tool CSS compressor sangat banyak di internet, salah satunya adalah http://www.csscompressor.com. Namun, sebelum melakukan kompresi kang Rohman menyarankan kepada untuk membuat sebuah backup karena hasil kompresi oleh tool terkadang ada yang kurang sempurna.

Berikut cara-cara kompresi CSS dengan CSS Compressor :

  1. Silahkan kunjungi
    http://www.csscompressor.com">www.csscompressor.com
  2. Pilih mode kompresi yang anda inginkan, apakah itu Highest, Hight, Standart, atau Low.
  3. Copy lalu paste kode CSS yang anda miliki ke kolom CSS input, lalu klik tombol Compress.

    css-compressor

  4. Setelah ada hasil kompresi, klik tombol Select All, copy lalu paste pada template anda yang tadi di optimasi.

    CSS hasil kompresi

  5. Selesai.

Selain menggunakan tool dari csscompressor, anda juga bisa menggunakan tool css compressor dari ;


http://www.cssdrive.com/index.php/main/csscompressor/">www.cssdrive.com/index.php/main/csscompressor
http://mabblog.com/cssoptimizer/compress.html">mabblog.com/cssoptimizer/compress.htm
http://cssoptimiser.com">http://cssoptimiser.com
http://iceyboard.no-ip.org/projects/css_compressor">iceyboard.no-ip.org/projects/css_compressor


Dan tentunya masih terdapat ratusan tool yang lainnya.

Selamat mencoba !



22 komentar:

  1. 1 kata untuk sobat
    CADAS

    wah boleh nih kang tipsnya ^_^

    BalasHapus
  2. numpang beljara n maaf,meskipun lebaran dah lewat,,,tp hati ini selalu terbuka untuk maaf,,,begitu jg saya mungacpkan beribu-ribu maaf kpd semua teman2 blogger,seandainya ja kata2 yg tertulis membuat hati temen2 gundah sekali lagi mohon maaf yg sebesar2nya.....
    btw mampir ya,,,tp jajannya dah habis,,,tak apa kannnnn....

    BalasHapus
  3. Wah kang dapat ilmu baru lagi, sebelumnya saya juga dah coba dengan csscompresor dan hasilnya wow lebih wus wus dari biasanya, salam hangat kang terimakasih banyak tip dan triknya sangat membantu perkembangan blog saya

    BalasHapus
  4. Wah, kalo dikompres secara automatic bisa-bisa saya ga ngerti gimana cara ngeditnya nih..bahaya...mending pake cara manual aja dengan belajar css dan punya kamusnya.

    BalasHapus
  5. makasi sobat infonya. css compressor memang mantapz..

    BalasHapus
  6. biasanya kalau pake css kompressor, ada efek sampingnya ga???

    BalasHapus
  7. yoi setuju sobat.....1 bytes aja kalau di internet pengaruh bgt.....

    Sukses selalu ah.

    Hatur nuhun

    BalasHapus
  8. Nambah komen
    Ini dia yang aku cari2 sobat...pokoke Mantep dah :D

    BalasHapus
  9. Pusing juga jadi blogger, ilmunya buuanyakk banget.
    Tapi saya tetap belajar dari sobat.

    BalasHapus
  10. Thank Sobat bwt link n situsny, sangat berguna.

    BalasHapus
  11. good info sobat
    makasih dah berbagi
    sukses aja deh wat LENTERA SAHABATnya

    BalasHapus
  12. banyak ilmu yang kita pelajari setiap hari
    makasih kang...

    BalasHapus
  13. Waw...
    Ternyata ada juga yah kompressan buat CSS...
    semula saya pikir nggak ada lho...
    Thx ya kang atas info'y.... :)

    BalasHapus
  14. Kayaknya sich perlu dicoba nich, tapi kira2 ada efeknya gak yach kang, takutnya karna dikompress jadi ada fiturnya yang hilang, kebetulan saya pake template dari O-Om, menurut O-Om udah ringan kok, saya juga gak terlalu pake yang aneh2 :D. Nanti bisa dicoba dulu kang, makasih infonya kang, sukses :)

    Regards,
    Lensaku

    BalasHapus
  15. Bro kog gag isa ya? ada tulisan kaya gini nih ....==> Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
    XML error message: The value following "version" in the XML declaration must be a quoted string.

    mohon penjelasannya ke blog saya yah..thanx b 4

    BalasHapus
  16. Info menarik nih....tapi masih bingung n was2 kalo gagal...

    Thanks infonya

    BalasHapus
  17. waduh gak ngerti yg seperti ini, utak atik kode...tapi bingung juga kalau blog berat dibuka.

    BalasHapus
  18. makasih banget tutorialnya.
    sangat bermanfaat.

    BalasHapus
  19. makasih sob, newbie akan coba di template newbie agar loadingnya ngak brpa berat.

    BalasHapus
  20. Oke bang untuk percepat koneksi blog...

    BalasHapus
  21. wah, caranya kurang lengkap dan jelas mas, tolong di perjelas ya ? cz saya masih newbie

    www.probolinggo.biz

    BalasHapus
  22. bos mau konsultasi ne, blogku loadingnya lama pada waktu klik /mau masuk ke halaman posting, sementara blog penyedia tempalatenya http://entertainmenttemplate.blogspot.com/ loadingnya bisa lebih cepat, padahal blognya lebih banyak flashnya dll, mengapa ya???? jika berkenan mohon diberikan masukan buat blogq, http://siap-bos.blogspot.com

    BalasHapus