Mempercepat Loading Blog dengan Kompressi CSS

Senin, 02 Juli 2012

Seperti yang kita tahu sobat, loading blog seringkali memiliki pengaruh yang signifikan bagi visitor alias pengunjung kita untuk berlama- lama di blog kita, selain memang informasi yang mereka butuhkan. Loading blog yang lama adalah salah satu penyebab mengapa pengunjung tidak betah dan buru- buru ingin meninggalkan blog kita.

Ada cukup banyak cara yang bisa dilakukan untuk meringankan loading blog atau mempercepat loading blog. Salah satu yang teman- teman blogger sering lakukan adalah dengan cara melakukan kompresi terhadap kode- kode CSS ( Cascading Style Sheets ) dalam template. Ribet?? Ga’ juga sobat karena tutorial tentang compress CSS ini cukup banyak bertebaran di Google dan bisa dilakukan dengan mudah kalau memang mau belajar.

Mengapa Kompress CSS dapat Meringkan Loading Blog??

CSS, meringankan loading blog, kompress CSS

Ini perlu dijelaskan juga untuk teman- teman yang masih bingung pengaruh kompresi CSS terhadap loading blog. Ukuran file CSS dalam sebuah template menentukan berapa banyak kode yang harus dibaca sebuah browser untuk dapat me- load sebuah halaman. Semakin panjang/ besar kode CSS, maka sebuah browser memerlukan waktu yang lebih lama untuk membaca dan me- load halaman website. Kompressi CSS ini dapat dilakukan seiring dengan perkembangan kemampuan browser dalam membaca kode- kode halaman website sehingga dengan melakukan kompressi CSS ini kita dapat membantu meringankan kerja browser dalam membaca load sebuah halaman website tertentu.

Bagaimana Cara Meng- compress Kode CSS dalam Template?

1. Melakukan Edit/ Kompress CSS secara Manual

Melakukan compress CSS secara manual dapat dilakukan dengan cara menghilangkan spasi atau meringkas kode CSS. Misalnya untuk kode warna #FFFFF dapat kita ringkas menjadi #FFF, kode warna #00000 dapat kita ringkas menjadi #000.

Contoh CSS sebelum di compress I :

#header-wrapper {

background: url(http://www.freeimagehosting.net/uploads/e439563253.jpg) no-repeat #000;
height: 150px;
margin-top: padding: 0px 0px 0px 0px;
text-align: center;
border: 1px solid #000;
}

Setelah dikompress maka kode CSS I dapat berubah menjadi :

#header-wrapper{background:url(http://www.freeimagehosting.net/uploads/e439563253.jpg) no-repeat #000;height:150px;margin-top:padding:0px 0px 0px 0px;text-align:center;border:1px solid #000;}

Contoh Kode CSS II Sebelum Kompress :

{Margin-top: 15px;
Margin-right: 10px;
Margin-bottom: 15px;
Margin-left: 15px; }

Setelah dikompress maka kode CSS II dapat berubah menjadi :

{Margin:15px 10px;}

Dalam Kode CSS II tersebut bisa diringkas karena antara margin top-bottom ( atas-bawah ) dan right-left ( kiri-kanan ) memiliki besar margin yang sama besar, sehingga secara berurutan dapat diwakili dengan susunan besaran margin top/bottom dan besaran margin right/left.

2. Melakukan Edit/ Kompress CSS secara OTomatis dengan CSS Tool Compression

Selain dengan cara manual, kompresi CSS dapat dilakukan secara mudah dengan bantuan CSS Tools Compression yang disediakan oleh beberapa website ternama, seperti sbb. :

· CSS Drive Gallery

· Minify CSS

· CSS Compressor

· CSSTidy Online

· Online CSS Optimiser/Optimizer

Dengab bantuan CSS Tools Comptession, maka sobat tinggal meng- copy kode CSS, kemudian melakukan upload ke website tersebut dan pilih Compress/ Optimize, dsb ( tergantung website tersebut di atas ). Jika bingung menentukan apakah kode yang diambil termasuk kode CSS atau bukan, maka untuk antisipasi error template silakan lakukan back up template terlebih dahulu untuk menghindari hal- hal yang tidak diinginkan. Kode CSS ini biasanya terletak diantara kode <b:skin>.

Setelah selesai meng- compress CSS silakan sobat bandingkan kecepatan loading blog sobat sebelum dan sesudah melakukan kompressi CSS ini. Untuk melakukan pengecekan loading blog, silakan sobat baca kembali postingan Cara Cek/ Mengetahui Kecepatan Loading Blog.

Sumber : W3 School