Optimasi Performa Website dengan Aturan YSlow : Part I

Salah satu fitur yang paling jarang di perhatikan oleh Web developer  adalah kecepatan loading website.  Efek dari hal ini , kadang sebuah website tampil cantik tapi butuh loading yang sangat lama (lebih dari 10 detik) . Sebuah website juga kadang penuh dengan kontent dan iklan namun loading halaman tidak selesai selasai.  Untuk mengatasi hal diatas kita perlu tool untuk mengetes dan mengukur performa website yang kita buat. YSlow adalah tool yang dibuat oleh Enginer di Yahoo untuk mengukur performa website dan memberikan  saran untuk  mengoptimalkan kecepatan aksesnya.

Namun dalam pembahasan kali ini, saya tidak akan menjelaskan cara memakai YSlow, namun yang akan dibahas adalah aturan dari YSlow untuk menganalisa performa website dan “Best Practise” yang langsung bisa kita pakai. Ada 23 Aturan yang akan kita bahas untuk meningkatkan performa web. Aturan ini terbagi menjadi 6 beberapa aspek. Aspek yang perlu diperhatikan adalah :

1. Content
2. Cookies
3. CSS
4. Javascript
5. Image
6. Server

Content

Untuk aspek kontent ada 6 aturan yang bisa kita praktikan saat membangun website, berikut ini adalah aturannya beserta penjelasannya

Buatlah request HTTP sesedikit mungkin

Jika anda mempunyai halaman index.html dimana anda memakai 2 CSS, 2 file javascript dan  5 gambar dihalaman tersebut plus 1 gambar background, maka Browser akan melakukan permintaan sebanyak 11 permintaan keserver. Semakin banyak komponen yang di “include” maka semakin banyak request keserver. Efek dari banyaknya request akan membuat loading halaman semakin lama

Tips

1.  Jika memungkinkan, kombinasikan file CSS kedalam satu file dan file javascript kedalam 1 file.
2. Usahakan menggunakan CSS sprite sebagai backround mengingat ukuran lebih kecil.
3.  Usahakan dalam satu halaman, tampilkan content seperlunya.

Kurangi Permintaan lookup DNS

Tip sederhana untuk mengurangi permintaan lookup DNS, jangan menyebar file anda diberbagai tempat. YSlow merekomendasikan maximal 4 Domain yang berbeda dalam satu halaman. Usahakan file yang ada di website anda diletakan dalam satu server. Kadang, demi hemat space, kita mengambil gambar dari domain lain, atau meletakan file di server lain kemudian di embeded di Website. Hal ini akan memperbanyak permintaan lookup DNS yang efeknya memperlambat loading website.

Hindari Redirect URL

Singkatnya, jangan membiasakan meredirect sebuah halaman ke halaman lain.

Buat Hasil permintaan AJAX bisa di cache

Walaupun teknik AJAX  sudah mengurangi loading website, namun membuat hasil permintaan bisa di cache di lokal akan meningkatkan loading website dengan drastis. Anda bisa memanfaatkan teknologi HTML5 untuk menyimpan data kecil di browser .

Kurangi jumlah DOM di website anda.

Mudahnya, usahakan sesedikit mungkin menggunakan <div id=foo> </div> dan buang setiap element kosong. Semakin kompleks website anda, waktu yang dibutuhkan browser untuk merender juga semakin lama, bukan hanya itu, mengakses komponen halaman dengan AJAX atau jQuery juga makin lambat karena banyaknya DOM.

Hindari Error 404