Memiliki blog yang loading-nya lama tentu menyebalkan, tetapi sebaliknya alangkah senangnya jika blog yang kita miliki selalu gesit dan cepat.
Sebenarnya banyak hal yang memengaruhi cepat lambatnya loading 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.
Yang paling berpengaruh yaitu penggunaan kode HTML atau javascript yang diletakkan di sidebar sebelah kiri, itu akan membuat loading blog terasa sangat berat
Hal ini dilatarbelakangi, 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. Oleh sebab itu, jika sidebar blog kita terlalu berlebihan, maka hasilnya blog kita menjadi lemot . . .
Nah, salah satu cara selain mengurangi penggunaan HTML atau Javascript pada sidebar, cara yang tepat dan jitu lainnya yaitu denagn mengompress CSS blog kita. Kompress kode CSS ini bisa kita lakukan secara manual maupun dengan menggunakan tools kompress css yang sekarang sudah banyak tersedia di internet.
Yuk, perhatikan kode css berikut ini, ini contohnya :
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 Sobat kompress secara manual maka hasilnya akan seperti di bawah 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 berwarna merah atau yang pertama (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 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, seperti contoh di atas, karena sekarang sudah banyak tools gratisan yang menyediakan fasilitas kompress css, salah satu yang biasa saya gunakan adalah situs
Untuk mengkompress CSS-nya silahkan kunjungi situs tersebut.
- Nanti pada halaman depan, akan ada pilihan jenis kompress dari yang low, standard, high sampai highest, masukkan saja kode CSS milik sobat kedalam kotak kosong yang tersedia lalu klik compress. (Jika Sobat baru pertamakalinya, saya sarankan pilih yang standar saja )
- Setelah memilih jenis kompressannya, maka akan muncul hasil kompressannya,
- Kemudian klik Select All dan copy semua kode yang sudah di kompress tadi. Pastekan code CSS yang telah dikompres ke blog Sobat, semoga bermanfaat (Sebenarnya masih banyak lagi tolls buat compress CSS, silahkan cari sendiri di Boss "Google" )
Artikel ini berjudul Mempercepat Loading Blog dengan Compress CSS, dengan url http://moo-no.blogspot.com/2011/09/mempercepat-loading-blog-dengan.html
Klik di sini untuk melihat daftar isi blog ini.
Masukan alamat email anda untuk berlangganan..
 |
{ 0 Komentar... Baca Semua / Tulis Komentar ! }
Post a Comment