Connect with Facebook
Mempersingkat Loading Time dengan CSS Sprites
Setelah berhasil melakukan "Operasi Plastik" kecil-kecilan di blog saya, saya pingin sharing pengalaman ke rekan-rekan.
Tehnik ini biasa disebut CSS Sprites. Penjelasan selengkapnya bisa tanya ke Paman Google. Tapi yang jelas, CSS Sprites ini berhasil mereduksi loading time Blog saya dari 10 detik menjadi 6 detik (mengukurnya pakai Add-On Firebug di Firefox).
Yang saya lakukan adalah. Menggabungkan semua gambar yang selalu di loading oleh themes blog menjadi satu gambar besar.
Caranya adalah buat sebuah file baru (menggunakan GIMP atau Photoshop) dengan ukuran yang dibutuhkan. Untuk background situs saya, lebar maksimum yang saya perlukan adalah 930 pixel dan tinggi kurang lebih 700 pixel. Kemudian set background layer menjadi transparent 90%.
Berikutnya tambahkan (add) semua gambar yang dibutuhkan oleh template blog ke dalam file ini. Akan lebih mudah jika dibuat layer baru setiap kali add gambar untuk mengatur posisinya nanti. Atur sedemikian rupa (dengan menggeser layer) sehingga bisa meminimalisir ruang kosong diantara gambar (semakin padat posisinya, akan semakin effisien hasilnya akhirnya). Tapi CSS sprites ini tidak memungkinkan fungsi rotate (setidaknya saya belum menemukan referensi tentang itu) jadi gambar harus ditempatkan secara horizontal sebagaimana tampilan yang biasa muncul.
Jika dirasa sudah optimal penempatannya, gabungkan semua layer menjadi satu (flatten layer). Gambar bisa dicrop juga seandainya masih ada ruang sisa di bagian samping atau di bawah. Kemudian ubah image mode menjadi index color 256 dan simpan sebagai file .png
Buat juga sebuah file gambar baru berukuran 1pixel x 1 pixel dan simpan sebagai gif.gif File ini nantinya bermanfaat sebagai pseudo image agar tidak menyalahi aturan baku html.
Nah setelah mempunyai satu master image dan file "gambar palsu" gif.gif, sekarang masuk ke bagian yang mengasikkan, yakni modifikasi file CSS nya. Pada prinsipnya CSS Sprites ini memanfaatkan satu gambar untuk berbagai macam fungsi background. Gambar besar itu hanya digeser-geser agar memunculkan bagian yang tepat di tempat yang diinginkan. Proser geser-menggeser ini berlangsung di sisi browser client sehingga tidak ada lagi transfer file gambar, begitu gambar masternya sudah di download oleh client. Inilah yang mempercepat waktu loading yang dibutuhkan situs kita.
Sebagai contoh untuk background Header Blog saya, awalnya saya menggunakan
#header{background:#EDEBD6 url(images/header-bg.png) no-repeat scroll 100% 0pt;height:143px;width:930px;padding:0;}
kemudian saya ubah menjadi:
#header{background:transparent url(images/imggatzet.png) top left; background-position: 0px 0px; height: 133px; width: 930px; }
Bagian yang saya tebalkan itu adalah fungsi untuk menggeser gambar ke posisi yang diinginkan. background-position: 0px 0px menunjukkan posisi sudut kiri atas dari bagian gambar yang dimunculkan. Dan kemudian agar gambar lainnya tidak ikutan muncul di header, ukuran kotaknya harus dibatasi dengan parameter height: 133px; width: 930px; dengan demikian bagian gambar yang lainnya akan tersembunyi.
Contoh lainnya adalah untuk background footer. Sebelumnya saya menggunakan :
#footer{color:#FFFFFF;background:#EDEBD6 url(images/nfooter-bg.png) no-repeat scroll 100% 0pt;height:90px;clear:both;padding:25px;}
kemudian saya ubah menjadi
#footer{background:transparent url(images/imggatzet.png) top left; background-position: 0 -240px;height:90px;clear:both;padding:25px;}
Pada parameter ini ada angka -240px, karena posisi gambar untuk footer yang saya butuhkan berada di 240pixel dari sisi atas master image (untuk lebih jelasnya bisa mengacu ke contoh master image yang saya sertakan), dan perintah background position: 0px -240px ini bisa diartikan geser gambar 240 pixel ke bawah.
Contoh ketiga adalah untuk logo blog. Sebelumnya saya menggunakan image link biasa untuk memunculkan logo.
< img src="http://www.gatzet.info/WordPress/wp-...es/gatzet.png" alt="gatzet info" style="margin-left:20px;float:left;border:none;" width="338" height="110"/>
kemudian saya ubah menjadi
<div id="_titlepage"> < img src="http://www.gatzet.info/WordPress/wp-...mages/gif.gif" alt="gatzet info" width="1" height="1" style="border:none;" /></div>
Disini gambar yang diload saya ganti menjadi gambar kosong berukuran 1x1 pixel untuk tidak menyalahi aturan HTML. Sedangkan gambar aslinya disertakan dalam fungsi <div id="titlepage"> yang saya tambahkan ke dalam CSS.
#titlepage{background:transparent url(images/imggatzet.png) top left; background-position: -210px -118px; height: 110px; width: 320px; margin:0 0 0 20px; float:left; border:none; }
Lagi-lagi di sini masih menggunakan gambar master yang sama, dan perhatikan juga nilai background-position yang berarti menggeser gambar 210 pixel ke kiri dan 118 pixel ke bawah.
Prinsip CSS Sprites ini bisa digunakan di semua bagian template situs kita yang membutuhkan gambar. Misalkan icon-icon untuk social network (digg, furl, delicious.. dsb, yang biasanya di load satu per satu) bisa digabungkan menjadi satu gambar saja.
Menurut saya, saat menggunakan CSS Sprites ini, hal yang paling melelahkan adalah menentukan posisi yang tepat untuk memunculkan gambar. Memunculkan alat bantu ruler di Photoshop atau GIMP yang saya gunakan memang sangat membantu, setidaknya untuk pedoman awal penentuan posisi gambar. Namun tetap saja mesti dilakukan fine adjustment di semua bagian saat CSS Sprites sudah berada di server. Sehingga akan lebih baik jika untuk proses uji cobanya dilakukan di server lokal anda dulu, baru setelah semua sempurna bisa di upload ke server utama.
CSS Sprites ini kompatibel untuk semua web browser populer mulai dari IE6, Firefox, sampai Opera versi terbaru (For linux dan Windows, saya belum coba untuk Mac.... gak punya Mac je..)
Selamat mencoba, dan semoga gak bingung dengan penjelasan saya ;D
Reply With Quote
Originally Posted by Joomblo!
[dasar pemalas] ;D
