Kompress 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.

Ada banyak tools lainnya yang bisa sobat coba, sobat bisa cari di search engine..oke sob, selamat mengkompress ria, semoga dengan di kompress-nya kode css blog sobat akan menjadi lebih enteng..Open-mouthed

Berlangganan artikel terbaru via Email
Artikel Lainnya :

21 comments

6 November 2009 13.05

setelah saya coba memang ada perbedaan kecepatan sewaktu loading. tks share ilmunya nich

6 November 2009 13.08

memang mas, kalo terlalu banyak fariasi blog emang berat, waktu pake template yg pertama (sebelum pindah rumah) blog saya terlalu banyak widget, kemudian HTML juga terlalu banyak modifikasi, ternyata load berat banget. akhirnya saya cari template yg ringan seringan2nya..alhamdulillah sudah bagusan dari yg pertama. makasih sharenya.

6 November 2009 16.50

@rumah blogger, sabirinnet : iya sama2, terima kasih juga sdh berkunjung ke blog ini..

7 November 2009 17.44

kalao halaman add page elements jadi lurus kenapa yak BOS...hiks :(

7 November 2009 17.55

@Beben : iya sejak google update pagerank, elemen halaman bebrapa template jd lurus tdk sesuai tampilan aslinya, saya jg tdk tau kenapa bs seperti itu,tp kadang2 template ini normal kembali kok elemen halamannya, sepertinya template br yg memakai variable pada kode css yg tidak kena dampak ben..

7 November 2009 20.30

waah sory nich, kemarin adik saya yg ganti, saya kira keterangan bagian bawahnya emang dari mas, tenyata linknya diganti sama adik saya, maaf mas yaa.. ini udah saya ganti dgn link mas.

saya pribadi sangat terima kasih udah diberi alternatif.

7 November 2009 21.42

@sabirinnet : iya sama2 mas saya juga terima kasih sudah pake template saya..

7 November 2009 22.32

wah.. ada juga toh toolnya. Siplah. Makasih banyak ya Mas atas info sharingnya. Dicoba dulu ah ^_^

11 November 2009 16.27

boleh nie toolsnya..dicoba dlu y gan..:D

18 November 2009 16.13

Mantabs...

19 November 2009 21.46

langsung ke tkp untuk mencoba tapi thx info ya mampir ya gan....Share Information IT

4 Januari 2010 22.43

kalo udah dikompres...trus sewaktu waktu ada penambahan...apa langsung di masukkan aja/edit save...??

5 Januari 2010 00.09

@ Goceng : langsung masukkan aja ceng, trus bs kompress lg lewat csscompressor.com

8 Januari 2010 16.39

saya sangat terkesan dengan blog ini karena di kelola dengan profesional dan semangat pembaharuan yg tinggi, bravoo.. nice bloghttp://ppcmuslim.comhttp://eramuslimstore.com

8 Maret 2010 15.50

Terima kasih yah mas informasinya sangat bermanfaat buat saya

22 Maret 2010 15.43

mas setelah di select all, di copy ke mana yah mas, maklum masih awam

16 Oktober 2010 20.31

wah...tambah ilmu baru nih buat aku! very helpful .. thx!

6 Juni 2011 06.12

Menarik untuk di coba.

17 Agustus 2011 20.17

mantab gan untung kolom postingan ku terletak di sebelah kiri,.. oh iya sob jangan lupa kunjungi balik salam kenal,...

30 Mei 2012 23.45

sudah ane praktekkan n hasilnya lumayan cepat gan...kalo tidak percaya silahkan dicek...

o iya sob...kalau berkenan, ayo tukeran link ma ane sob...

2 Juni 2012 12.13

ini gan yg ane cri thanks yagh.....

Poskan Komentar

Reader Community

Recent Comments