Tampilan Vs Kecepatan Dalam Web Desain

Ditulis oleh Joddie Palgunadi, pada tanggal 20 Nov 2009, di kategori Tips dan Tutorial.

Mungkin dari judul artikel tersebut sudah terlihat apa yang akan dibahas. Yup, artikel ini membahas mengenai tampilan yang sangat mempengaruhi kecepatan loading sebuah website. Memang, kedua hal ini bisa sangat bertentangan. Di satu sisi kita ingin memiliki tampilan web yang ‘wah’ dengan berbagai gambar, aksesoris, dan fitur. Tetapi hal ini ternyata sangat mempengaruhi kecepatan loading website. Kenyataan juga membuktikan bahwa website yang terlalu berat membuat pengaksesnya menjadi ogah membukanya.

Untungnya, sekarang ada beberapa situs analyzer yang bisa digunakan untuk mengukur berat homepage suatu website. Salah satunya ialah Website Optimization (http://www.websiteoptimization.com/services/analyze/). Situs ini menyediakan fasilitas untuk mengukur berapa ukuran homepage sebuah website, nantinya akan muncul hasil yang kira-kira seperti gambar ini:

speed Pada gambar di samping terlihat ukuran homepage blog ini, yaitu sekitar 750 kb. Beratkah itu? tergantung koneksi internet yang dipakai oleh user sebenarnya. Tetapi sebagai patokan awal, website dikatakan ‘ringan’ jika berukuran dibawah 500kb, ‘sedang’ jika pada kisaran 500kb-1000kb, dan ‘berat’ jika berukuran di atas 1 Mb.

Tapi aturan ini pun gak bisa dijadikan patokan, terutama jika website tersebut pembacanya orang eropa/amerika. Di Inggris misalnya, memang kecepatan koneksi di sana rata-rata juga 3G broadband up to 256Kbps, tetapi kecepatan realnya sangat lumayan, yaitu sekitar 100an Kbps. Sangat berbeda dengan IND****M* yang saya pakai di rumah, yang katanya 3,5G up to 256Kbps, tapi kecepatan realnya tidak sampai 15Kbps.. malah kadang 5Kbps aja tidak sampai.. jiaaaah.

Ada beberapa tips untuk mempercepat loading website, antara lain:

Usahakan setiap gambar akan yang digunakan berukuran kecil, yaitu dibawah 20Kb dengan resolusi 72dpi. Untuk pengguna Photoshop, gunakan fasilitas “Save for web & devices” yang bisa diakses melalui menu file -> Save for web & devices; atau melalui shortcut Ctrl+Alt+Shift+S.
Jika gambar yang digunakan memiliki banyak warna (seperti foto), gunakan format JPG; tetapi jika gambar tersebut memiliki sedikit warna (seperti clipart atau logo), gunakan format GIF dan sesuaikan pula pallete warnanya sesuai kebutuhan, misal 16 color atau 32 color (bisa diatur juga di fasilitas “Save for web & devices” seperti nomor 1).
Usahakan teks tidak terlalu panjang, yaitu tidak lebih dari 5000 karakter. Jika memang terpaksa menulis lebih dari itu, pisahkan artikel tersebut dalam beberapa halaman.
Gunakan warna-warna terang, warna terang dipercaya memiliki waktu loading lebih cepat dari pada warna-warna tua.
Sedapat mungkin hindari penggunaan file-file multimedia seperti musik atau video pada homepage.
Gunakan sesedikit mungkin widget, kurangi widget-widget yang tidak perlu.
Sedapat mungkin hindari penggunaan ‘linked object’. Linked object maksudnya adalah obyek-obyek (biasanya gambar atau iklan) yang berasal di luar web tetapi ikut ditampilkan.
Jika menggunakan CSS, usahakan file-file CSS tersebut berukuran total tidak lebih dari 20kb.

Semoga berguna..

Nb: www.websiteoptimization.com tidak efektif jika digunakan untuk web dengan redirect domain, seperti .co.cc dan .co.nr .

——–

award-10

Sebagai tambahan, ada award mau dipajang, yaitu award persahabatan yang diberikan oleh ‘Cah nDeso’ empunya “Blog Muria” thanks yah, dan sebagai tanda persahabatan pula, award ini saya bagikan lagi pada sembilan sahabat yang paling banyak meninggalkan jejak di blog ini:

– Ilyasafsoh
– Yolis
– New bie
– achoey
– belajar blog
– elistadyon
– elmoudy
– Gelza
– Genial