Pangkas Load Time Dengan CSS

/ July 26, 2011 / 79 Comments / Komunitas Blogger, Komunitas CSS, Komunitas CSS Sprites, Komunitas Design, Komunitas Programmer, Komunitas Source Code, Komunitas Web

Meminimalkan load time akses sebuah website bisa dilakukan dengan penerapan teknik css, yang dikenal dengan nama css sprite. Css sprite adalah sebuah metode pengurangan permintaan akses gambar dari sebuah website dengan mengumpulkan beberapa gambar menjadi satu kesatuan gambar, sehingga user hanya perlu mengakses gambar sekali waktu saja.

Untuk menggabungkan beberapa image menjadi satu kesatuan image cukup mudah, anda bisa menggunakan Aplikasi Design dan bisa juga menggunakan tools online CSS Sprites Generator. 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.komunitaskami.com/WordPress/wp-...es/gatzet.png" alt="gatzet info" style="margin-left:20px;float:left;border:none;" width="338" height="110"/>

kemudian saya ubah menjadi

< img src="http://www.komunitaskami.com/WordPress/wp-...mages/gif.gif" alt="gatzet info" width="1" height="1" style="border:none;" />

Disini gambar yang diload saya ganti menjadi gambar kosong berukuran 1×1 pixel untuk tidak menyalahi aturan HTML. Sedangkan gambar aslinya disertakan dalam fungsi

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.

Sumber

Tags: , , ,