Ini adalah bagian kedua dari artikel tentang optimasi website dengan aturan Yahoo Slow. Bagian pertama dari artikel ini bisa anda baca di sini. Di artikel ini akan dibahas tentang optimasi performa website dari sisi cookies, CSS, javascript dan Image.

Cookies

di sisi cookies ada dua hal yang perlu diperhatikan, dua hal tersebut adalah ukuran cokies dan Cookies free domain. Cookies sendiri adalah data kecil yang tersimpan di browser user yang tujuannya untuk mengidentifikasi user tersebut. Biasanya cookies dipakai untuk mendeteksi apakah user sudah login atau belum,. Jika website tersebut adalah website commerce, dipakai untuk mengecek  barang apa saja yang sudah dipesan.

perkecil Ukuran Cookies

Sebenarnya ukuran cookies sudah cukup kecil, namun cookies selalu disertakan ketika user merequest sesuatu ke server,  maka semakin besar ukuran cookies maka makin lama proses yang dibutuhkan.

Gunakan Cookies Free domain

Ketika kita login kesebuah website, dan kita merequest halaman lain, maka otomatis, cookies akan disertakan di setiap request. Namun kadang, cookies tidak perlu disertakan untuk mengambil data data yang sifatnya statis, diantaranya adalah gambar.  Agar data statis  lebih cepat diakses, letakan data statis tadi di subdomain atau di server lain. Jadi ketika data statis tadi diambil, request yang meminta tadi tidak mengirimkan cookies ke server. Efeknya akses lebih cepat.

CSS

Aspek lain yang bisa kita lakukan untuk mempercepat website adalah dari segi CSS, 4 hal berikut ini bisa mempercepat loading website

Letakan CSS di head

Letakan file CSS dibagian header dokumen palinga atas, sebelum javascript.

Hindari CSS expression

CSS expression adalah teknik menset property halaman web secara dinamis, misal mengubah warna background tiap dua jam sekali.

contoh

background-color: expression( (new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" );

Mengapa hal ini membuat loading halaman lama, karena CSS expresion selalu di proses saat user meresize dokumen, saat user merefresh dokumen bahkan saat user menscroll dokumen. Expresi ini juga akan terus di cek efeknya.

Jika anda desainer web, pasti tahu tag diatas, untuk meng ‘include’ css yang ada diluar bisa dengan cara <link> atau  @import. Gunakan <link> karena ini lebih cepat.

Hindari filter CSS (alphaImageLoader).

ini hanya terjadi di IE, alphaImageloader  berhubungan dengan file gambar. ketika dipakai dia akan memblokir script lain sampai proses ini selesai, selain itu, filter CSS juga memboroskan memori.

javascript

  1.  Letakan script javascript dibagian bawah dokumen.
  2.  Buatlah javascript di file terpisah.
  3.  Minifikasi atau compres javascript.
  4.  Perkecil akses terhadap DOM sesedikit mungkin.
  5.  Buang script duplicate, misal anda menginclude dua file jQuery tanpa sadar.
  6. Perbaiki dan perkecil  Event handler, terutama jika aplikasi anda adalah aplikasi web 2.0.  dan ajax.

Image

  1. Optimasi Image, misalkan dengan mengurangi ukuran atau kualitas warna, atau mengubah format file.
  2. Gunakan CSS sprite untuk background, jangan gunakan gambar ukuran besar untuk background website anda.
  3. Jangan menskala image, misalkan anda punya file photo.jpg dengan ukuran 800×600 ukurannya 500kb,  jika anda ingin menampilkan photo.jpg dengan ukuran 100×100 alangkah baiknya file photo.jpg di resize terlebih dahulu baru diakses web, tentunya ukurannya akan jauh lebih kecil  Contoh buruk menscala bisa dilihat dibawah ini. Jangan terbiasa menampilkan gambar dengan cara  ini.

<img width=”100″ height=”100″ src=”photo.jpg” alt=”cool photo” />

Buatlah favicon berukuran kecil dan bisa dicache, dengan cara ini, maka favicon hanya diakses sekali walaupun user membuka banyak halaman diwebsite kita.

Ok, sampai sini dulu, pembahasan terakhir tentang optimasi website akan saya bahas besok!

Penulis: Candra Adi Putra

CandraLab Studio adalah Software house di Yogyakarta, Indonesia yang fokus ke aplikasi Mobile (Android) dan Web . Hubungi saya di candraadiputra(at) gmail.com

Tagged on:         

Tinggalin komentar dong!