Kompress CSS Percepat Loading Blog Time
Lhoh emang ada hubungannya CSS dengan waktu loading blog? :o Begini, semakin besar ukuran file, tentu saja bahasa perintahnya semakin banyak iya kan?, dengan demikian 'waktu baca' yang dibutuhkan oleh browser semakin panjang. Sobat dapat menggunakan website/blog speed test tool di blog ini untuk mengetahui kecepatan loading blog sobat, klik disini : Blog Speed Test >> Modif(y) Your Blog!!
Jika loading page blog sobat sangat lama, efeknya adalah ketidaknyamanan pengunjung. Belum lagi apabila muncul ketidaksabaran dan kemudian diwujudkan dalam aksi "Tutup aja aaaaah, males gw, lo-la bangeeetzz!" , waaah bikin males dan ngantuk banget deh pastinya! :nngantuk2 Kabar buruknya, Google saat ini telah melakukan penalti bagi website/blog yang memiliki waktu load yang terlalu lama. Alhasil, peringkat dalam indeks pencarian bisa turun, dengan kata lain SEO menjadi lemah.
Nah, salah satu usaha yang bisa sobat lakukan adalah dengan mengkompres gambar PNG dengan PngGauntlet, seperti di postingan saya sebelumnya, klik disini : Kompress Gambar Untuk Percepat Load Blogmu!!. Hasilnya cukup lumayan untuk mengurangi besar gambar tanpa mengurangi kualitasnya. Juga dilakukan pula beberapa langkah lain, salah satunya: melakukan perampingan CSS. Mudah-mudahan saat ini loadtime sudah berkurang meskipun belum maksimal (mudah-mudahan ga kelamaan ya)
Sebelum membahas lebih jauh, apa sobat tau yang dimaksud CSS? File CSS adalah seluruh isi aturan style CSS yang ada di dalam template HTML, XML, atau lainnya. Semua aturan tersebut kemudian dirangkum menjadi satu sebagai sebuah file yang dibaca oleh browser. Nah, ada banyak aturan tidak perlu yang bisa kita hapus agar tidak mengambil space karena semakin banyak space semakin besar ukuran file.
Langsung saja berikut cara mengurangi ukuran file CSS nya :
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? :lol 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:
Atau sobat dapat mencari situs lainnya melalui googling dengan keyword "css compression tool".
Nah, berikut langkah-langkah nya :
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.
NB :
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 sobat pakai.
Good luck sob and happy blogging! :senyum
