Kembali ke CSS. File CSS yakni seluruh isi aturan style CSS yang ada di dalam template HTML, XML, maupun yang lainnya. Seluruh aturan tersebut kemudian dirangkum menjadi satu sebagai sebuah file yang dibaca oleh browser. Nah, pada bab ini, ada banyak aturan tidak perlu yang bisa kita hapus biar tidak mengambil space alasannya semakin banyak space semakin besar ukuran file.
Lalu bagaimana cara mengurangi ukuran file CSSnya?
1. Lakukan Editing CSS Secara Manual.
Ada beberapa pola 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 yakni penataan CSS secara standar, dimaksudkan biar browser dapat membaca aturan dengan baik dan urut. Namun pada ketika ini, semua browser telah memiliki kecepatan dan kemampuan baca yang tinggi (anda sudah tidak pake IE 6 yang kuno itu lagi kan?), sehingga aturan ibarat di atas tidak menjadi hal wajib. Aturan di atas memiliki white space (sisa ruang) dan juga spasi. Kita dapat melaksanakan 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 pola 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 berguru itu menyenangkan? ^^ Untuk melaksanakan cara-cara lain dan kalau tertarik anda dapat mengunjungi W3 School.
2. Gunakan Layanan Situs-situs Penyedia Tool Kompres CSS Secara Online
Nah ini bab yang lebih mudah. Anda dapat menggunakan beberapa tool layanan kompresi CSS dan dalam sekejap anda pribadi mendapat hasilnya. Silahkan kunjungi:
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 arahan tersebut dan klik 'compress', 'optimize', dan lains ebagainya.
c. Tunggu beberapa ketika dan karenanya akan keluar lengkap dengan hasil ukuran file terakhir setelah kompresi dan perbandingannya. Perbedaan yang kecil sekalipun akan sangat kuat terhadap berkurangnya loadtime halaman.
d. Unduh backup template terlebih dahulu pada halaman edit HTML.
e. Hapus bab dimana anda mengkopi aturanCSS tadi dan masukkan hasil kompresi ke bab tersebut.
f. Preview dan kalau tidak ada duduk perkara lagi, save.
Clue:
Seluruh code CSS terletak di bab 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.
Semoga bermanfaat dan Good luck.
mencuri yakni pekerjaan pengecut! © buka-rahasia.blogspot.com