cara mempercepat Loading Blog dengan Optimalisasi/Kompres CSS . Apa
hubungan CSS dengan load time (waktu muat) halaman blog? Yang paling
sederhana, ukuran file CSS menentukan berapa banyak bagian yang harus
dibaca oleh browser. Semakin besar ukuran file, tentu saja bahasa
perintahnya semakin banyak, dengan demikian 'waktu baca' yang dibutuhkan
oleh browser semakin panjang. Anda dapat menggunakan
website/blog speed test tool di blog ini untuk mengetahui kecepatan loading blog anda.
Setelah
ganti template beberapa waktu yang lalu, masalah loading blog yang
cenderung lebih lama daripada template yangsebelumnya muncul. Tentu saja
hal ini berefek tidak baik. Yang pertama efeknya adalah ketidaknyamanan
pengunjung. Terlebih lagi apabila muncul ketidaksabaran dan kemudian
diwujudkan dalam aksi "Tutup aja aaaaah, males gw, lo-la bangeeetzz!".
Yang kedua, Google saat ini telah melakukan penalti bagi website/blog
yang memiliki waktu load yang terlalu lama. Walhasil, peringkat dalam
indeks pencarian bisa turun, dengan kata lain SEO lemah.
Salah satu usaha yang saya lakukan adalah dengan
mengkompres gambar PNG dengan PngGauntlet.
Hasilnya lumayan untuk mengurangi besar gambar tanpa mengurangi
kualitasnya. Selain itu, 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).
Kembali
ke CSS. File CSS adalah 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 bagian ini, ada banyak aturan tidak perlu yang bisa
kita hapus agar tidak mengambil space karena semakin banyak space
semakin besar ukuran file.
Lalu bagaimana cara mengurangi ukuran file CSSnya?
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:
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.
Semoga bermanfaat dan sukses.
