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 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, compress kode css
ini bisa kita lakukan secara manual maupun dengan menggunakan tools
compress 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 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 mengcompress kode css pada template, sobat tidak perlu susah payah mengcompress-nya secara manual lagi
, 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 tersebut.
- Kemudian pada halaman depan, ada
pilihan jenis compress kemudian masukkan kode css milik sobat kedalam
kotak kosong yang tersedia lalu klik compress.
- Maka akan terlihat hasil compress dibawahnya, seperti pada gambar berikut
- Kemudian klik Select All dan copy semua kode yang sudah di compress tadi.
Ada banyak tools lainnya yang bisa sobat pakai , sobat bisa cari di search engine..oke sob, silahkan di compress cssnya" mudah2an sedikit membantu
Related Posts :