kulo-Tech Headline Animator

Rabu, 15 September 2010

Cara Kompres CSS Percepat Loading Blog

CSS Ada beberapa hal yang mempengaruhi loading suatu blog, selain pemakaian kode HTML dan Javascript yang berlebihan yang tentunya akan membuat loading blog jadi lambat, pengaturan atau pemakaian kode css yang salah juga berpengaruh terhadap loading blog.


Jika sobat banyak menggunakan kode HTML atau javascript dan diletakkan di sidebar sebelah kiri, itu akan membuat loading blog terasa sangat berat, kenapa ?
karena browser selalu membaca blog berurutan dari kiri atas sampai kiri bawah, kemudian akan berlanjut ke bagian kanan atas sampai kanan bawah, dan bagian footer atau bawah blog tentunya yang akan kebagian terbaca paling akhir.
Jadi saya sarankan gunakanlah template dengan kolom postingan yang terletak di sebelah kiri, atau jika sobat menggunakan sidebar di sebelah kiri, usahakan jangan terlalu banyak memakai kode HTML atau Javascript di sebelah kiri karena akan membuat loading blog jadi sangat berat.

Berlanjut pada topik utama kita, kompress kode css ini bisa kita lakukan secara manual maupun dengan menggunakan tools kompress css yang sekarang sudah banyak tersedia di internet. Saya akan berikan contoh kasusnya, perhatikan kode css berikut ini :

a:link {
color:#006699;  text-decoration:none;
}
a:visited {
color:#006699;  text-decoration:none;
}
a:hover {
color:#006699;  text-decoration:underline;
}
#main .post-body a:link {
color:#006699;  text-decoration:underline;
}
#main .post-body a:visited {
color:#006699;  text-decoration:underline;
}
#main .post-body a:hover {
color:#006699;  text-decoration:none;
}
kode css diatas adalah kode standard yang biasa sobat jumpai di HTML template, jika saya kompress secara manual maka hasilnya akan seperti dibawah ini :

a:link,a:visited,#main .post-body a:hover {
color:#006699;
text-decoration:none
}
a:hover,#main .post-body a:link,#main .post-body a:visited {
color:#006699;
text-decoration:underline
}
apa yang membedakan kedua bagian diatas ? jika sobat cermat melihat seluruh kode css yang paling atas (sebelum saya kompress) bahwa semua bagian dalam kurung {....} yang membedakan hanya dua bagian yaitu pada penulisan text-decoration:none dan text-decoration:underline. Pemakaian spasi juga sangat berpengaruh dalam penulisan css, jika saya rapatkan maka hasilnya menjadi seperti berikut ini :

a:link,a:visited,#main .post-body a:hover{color:#006699;text-decoration:none}
a:hover,#main .post-body a:link,#main .post-body a:visited{color:#006699;text-decoration:underline}


Untuk mengkompress kode css pada template, sobat tidak perlu susah payah mengkompress-nya secara manual, karena sekarang sudah banyak tools gratisan yang menyediakan fasilitas kompress css, salah satu yang biasa saya gunakan adalah  situs http://www.csscompressor.com

  1. Untuk mengkompress css-nya silahkan kunjungi situs tersebut.
  2. Kemudian pada halaman depan, ada pilihan jenis kompress dari yang low, standard, high sampai highest, kemudian masukkan kode css milik sobat kedalam kotak kosong yang tersedia lalu klik compress.
    css 1
  3. Maka akan terlihat hasil kompress dibawahnya, seperti pada gambar berikut
    css 2
  4. Kemudian klik Select All dan copy semua kode yang sudah di kompress tadi. 
by: miscah.blog
    Met berkompres rai..hehe...Open-mouthed

    0 comments:

    Posting Komentar

    Related Posts with Thumbnails

    Subscribe Via Email

    Enter your email address:

    Delivered by FeedBurner

    About Me

    kulo-Tech
    kulo-Tech Blog menyajikan berbagai informasi terkini dan menyediakan fitur-fitur yg tersedia. Berbagai tutorial telah tersedia disini agar menambah wawasan kita. Blog pribadi kini menjadi blog community dan sebagai layanan media promo bisnis yg telah kami sediakan. Terimakasih pada teman-teman yg telah mendukung dan pihak-pihak yg telah berpartisipasi atas perkembangan kulo-Tech ini. Mohon kritik dan saran
    Lihat profil lengkapku