Percepat Loading Blog dengan Optimalisasi/Kompres CSS

Kadang kalanya loading blog kalian itu lama. Itu terpengaruh karena beban yang ada di blog kamu itu terlalu besar seperti Javascript. ingin membuat loading anda menjadi lebih cepat. lihatlah petunjuk di bawah ini sob........... !

1. Lakukan Editing CSS Secara Manual.

Ada beberapa contoh aturan berikut ini:

Misalnya aturan pada header-wrapper,

#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 di atas adalah penataan CSS secara standar, dimaksudkan agar browser dapat membaca aturan dengan baik dan urut. Namun pada saat ini, semua browser telah memiliki kecepatan dan kemampuan baca yang tinggi (anda sudah tidak pake IE 6 yang kuno itu lagi kan?), sehingga aturan seperti di atas tidak menjadi hal wajib. Aturan di atas memiliki white space (sisa ruang) dan juga spasi. Kita dapat melakukan perampingan pada ruang-ruang tersebut. Contoh:

#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;}

Pada contoh styling berikut:

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

Style margin di atas dapat kita rampingkan dengan CSS short-hand dan mengurangi spacenya:

{Margin:15px 10px;}

Karena nilai margin atas dan bawah sama serta nilai kanan dan kiri sama, kita dapat merampingkan dengan cara di atas, dimana 15px mewakili ukuran atas-bawah dan 10px mewakili kanan-kiri. Jika semua nilai margin sama, misalnya 15px, kita tinggal tuliskan: {margin:10px}. Perhatikan bahwa semua aturan nilai dimulai dari atas dan berjalan searah jarum jam: atas, kanan, bawah, dan kiri.

Ehm, sudah mulai pusingkah? Tidak kan? Bukankah belajar itu menyenangkan? ^^ Untuk melakukan cara-cara lain dan jika tertarik anda dapat mengunjungi W3 School.

2. Gunakan Layanan Situs-situs Penyedia Tool Kompres CSS Secara Online

Nah ini bagian yang lebih mudah. Anda dapat menggunakan beberapa tool layanan kompresi CSS dan dalam sekejap anda langsung mendapat hasilnya. Silahkan kunjungi:

-CSS Drive Gallery

-CSS Compressor

-Online CSS Optimiser/Optimizer
-Minify CSS

-CSSTidy Online

Atau anda dapat mencari situs lainnya melalui googling dengan keyword "css compression tool".

Langkah-langkahnya:

a. Copy semua aturan CSS dari template HTML/XML.

b. Setelah masuk ke situs layanan kompresi CSS yang anda pilih, paste semua kode tersebut dan klik 'compress', 'optimize', dan lains ebagainya.

c. Tunggu beberapa saat dan hasilnya akan keluar lengkap dengan hasil ukuran file terakhir setelah kompresi dan perbandingannya. Perbedaan yang kecil sekalipun akan sangat berpengaruh terhadap berkurangnya loadtime halaman.

d. Download backup template terlebih dahulu pada halaman edit HTML.

e. Hapus bagian dimana anda mengkopi aturanCSS tadi dan masukkan hasil kompresi ke bagian tersebut.

f. Preview dan jika tidak ada masalah lagi, save.

Clue: 

Seluruh code CSS terletak di bagian head. Lebih tepatnya, semua code CSS pengatur tampilan terletak di antara <b:skin> dan ]]></b:skin>.

Pilih jenis/opsi kompresi 'standard'  atau sejenisnya pada tool kompresi CSS yang anda gunakan.

,,
jika ingin lebih mengerti silahkan kunjungi blog ini http://buka-rahasia.blogspot.com/2011/03/percepat-loading-blog-dengan.html