Meringankan Template Dengan CSS Compressor

Loading page lambat merupakan salah satu masalah yang membuat pengunjung blog merasa tidak nyaman mengunjungi blog kita. kenyamanan pengunjung saat membuka blog kita perlu diprioritaskan pula. banyak hal yang membuat/menjadi penyebab loading page blog kita lambat, diantaranya adalah penggunaan javascript, html dan image yang cukup memakan banyak bandwidth, hal itu justru akan membuat loading blog semakin lambat/berat. bahkan ada satu hal yang membuat pengunjung malas berkunjung, yaitu banyaknya popups yang muncul ketika blog kita dibuka. ketika saya blogwalking, banyak blog yang menggunakan sidebar sebelah kanan dan mengutamakan kolom posting sebelah kiri, kenapa? karena jika sobat banyak menggunakan kode HTML atau javascript dan diletakkan di sidebar sebelah kiri, itu akan membuat loading blog terasa berat, itu disebabkan karena browser selalu membaca blog yang selalu 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 yang akan terbaca paling akhir. dan untuk mengatasi permasalahan tersebut disarankan untuk menggunakan 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. untuk mengetahui lebih spesifik lagi apa saja yang membuat loading page blogmu lambat, bisa dibaca pada Kenapa Loading Page Blogmu Lambat?

dan selain hal diatas yang saya paparkan, yang utama adalah css yang ada dalam template kita, bagaimana cara kita agar css yang ada dalam blog kita se-ringan mungkin agar loading blog tidak lola alias loading lama.

perhatikan contoh css dibawah 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 compress 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 compress] 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 kompressi kode css pada template atau compress CSS template sobat tidak perlu susah payah mengcompress-nya secara manual lagi :D, karena sekarang sudah banyak tools gratisan yang menyediakan fasilitas Compress css, salah satu yang sering digunakan adalah situs http://www.csscompressor.com

Untuk mengcompress css-nya silahkan kunjungi situs http://www.csscompressor.com
Kemudian pada halaman depan, ada pilihan jenis compress kemudian masukkan kode css milik sobat kedalam kotak kosong yang tersedia lalu klik compress.