3 Tools untuk mengukur kecapatan Website
1. 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 :
Content
Cookies
CSS
Javascript
Image
- 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
Jika memungkinkan,
kombinasikan file CSS kedalam satu file dan file javascript kedalam
1 file.
Usahakan menggunakan
CSS
sprite sebagai backround mengingat ukuran lebih kecil.
- 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 H
TML5
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
Error ini muncul karena
halaman yang diakses tidak ditemukan, hilang, terhapus atau karena
sebab lain. Kurangi eror 404 dengan cara mengecek bahwa setiap link
dan setiap aksi di browser mendapatkan respon. Cara termudah adalah
gunakan
Link
Checker untuk mengecek Dead link.
Bagian Kedua dari artikel
ini akan membahas optimasi di sisi Cookies, CSS, Javascript, Image
dan Server. (Coming soon!).
Optimasi Performa Website dengan Aturan YSlow :
Part II
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.
pilih <link>
ketimbang @import.
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
Letakan script javascript
dibagian bawah dokumen.
Buatlah javascript di file
terpisah.
Minifikasi atau compres
javascript.
Perkecil akses terhadap DOM
sesedikit mungkin.
Buang script duplicate,
misal anda menginclude dua file jQuery tanpa sadar.
- Perbaiki dan perkecil Event handler, terutama
jika aplikasi anda adalah aplikasi web 2.0. dan ajax.
Image
Optimasi Image, misalkan dengan
mengurangi ukuran atau kualitas warna, atau mengubah format file.
Gunakan CSS sprite untuk
background, jangan gunakan gambar ukuran besar untuk background
website anda.
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.
Kelebihan YSlow :
- Bisa mengetahui ukuran
file setiap elemen/komponen yang menjadi penyusun halaman
website/blog. Dari hasil data tersebut, kita bisa tahu elemen mana
saja yang berpotensi memperberat ‘loading-page’ (pemuatan
halaman). Dari situ pula kita bisa mempertimbangkan kembali
penggunaan elemen-elemen tertentu. Setidaknya berusaha memangkas
ukurannya agar tidak terlalu besar.
- Bisa tahu berapa jumlah
‘HTTP request’ dari halaman yang kita tes. Termasuk berapa jumlah
file total yang menyusunnya. Dari hasil rekomendasi YSlow, kita bisa
tahu elemen/komponen mana saja yang masih perlu dioptimalkan agar
performa blog kita bisa lebih baik.
Kekurangan YSlow :
2.
Alexa
Tools
ini merupakan sebuah web informasi yang memberikan ranking
bagi sebuah web, tampaknya Alexa bukan karena itu saja sangat
dikenal dan diperhitungkan para web surfer tidak hanya diluar
seperti di Amerika namun disini juga menjadi semacam tolak ukur
untuk menentukan traffic dari sebuah website. Lalu apakah yang
dimaksud dengan Alexa Ranks? Alexa Ranks adalah ranking yang
diberikan oleh Alexa web dimana ranking tersebut berasal dari total
jumlah pengunjung Unique Alexa Toolbar. Hmmm.. jadi Alexa itu
semacam toolbar ya? Kalau boleh saya bilang sih bisa jadi semacam
itu, karena kalau mau ngecek popularitas sebuah web ke webnya
langsung kan agak ribet jadi Alexa membuat semacam toolbar yang
memudahkan untuk pengecekan sehingga kita bisa mengetahuinya secara
langsung. Toolbar tersebut menunjukkan popularitas dari website yang
bersangkutan. Untuk saat ini tampaknya Yahoo! masih
menjadi website dengan maximum traffic berdasarkan data dari Alexa,
setelah itu baru diikuti olehGoogle. Banyak
orang mengatakan jika popularitas Alexa atau istilahnya Alexa trends
sudah menurun dan kita tidak usah terlalu memikirkan ranking dari
Alexa! Menurut saya keberadaan Alexa masih sangat penting dalam
pencapaian sebuah Page Rank (PR) yang tinggi karena menunjukkan
kualitas dan popularitas dari website yang kita miliki.
Kelebihan
dari tools Alexa adalah :
1.
Alexa ini membantu dengan memberikan informasi tentang kualitas dan
popularitas dari sebuah website
2.
Berguna bagi website yang anda memiliki untuk diterima dalam program
make money online
3.
Membantu anda dalam mengetahui posisi jika terdapat kompetisi dan
anda bisa mengetahui volume traffic dari website yang anda miliki
Kekurangannya
adalah :
1.
Perhitungan algoritma Alexa yang baru dan pastinya ribet, karena
sistem ranking yang diberikan oleh Alexa semakin akurat karena Alexa
juga memberikan ranking berdasarkan sumber lain juga
2.
Mungkin saling cross check dengan Google, Yahoo!, MSN dan website
berpengaruh lainnya, dan sudah banyak penurunan ranking yang dialami
oleh para webmaster (terutama pemilik blog)
Widget
Alexanya bisa didapatkan disini Alexa
Widget dan anda tinggal ketik URL dari website yang anda
miliki setelah itu bisa dipasang kode yang diberikan pada website
anda. Semoga informasi yang saya berikan bisa bermanfaat dan terima
kasih sudah menyimak. Keep Blogging!!
3. Mengukur Performa Web
dengan Apache Benchmark
BANYAK
tool yang bisa digunakan untuk mengukur performance dari web server,
salah satunya dengan menggunakan web stress tool untuk windows. Namun
bisa juga menggunakan APache Benchmark (AB) dari Apache HTTP Server
salah satu web server yang banyak digunakan di internet.
Apache
Benchmark ini adalah tool untuk mengukur performance apache, dengan
ab kita dapat melihat kapabilitas apache untuk melayani request dari
client. Namun pertanyaan adalah kita sering menemukan tentang apache
benchmark ini adalah bagaimana cara menginstall dan dimana
men-download apache benchmark ini.
AB ini telah terinstall
secara otomatis ketika menginstall Apache HTTP Server, jika apache
sudah terinstall maka tool benchmarking ini juga sudah otomatis ada.
Lokasi tool ab ini biasanya di-direktori. Tool apache benchmark ini
bisa digunakan tidak hanya untuk Apache, tapi untuk web server lain
juga seperti Lighthttpd, Nginx atau Miscrosoft IIS.
Cara
menggunakan AB adalah sebagai berikut :
# ab -c 1000 -n
1000 'http://202.xxx.xxx.xxx/mongotest/comment/get_data/20/10'
-
Parameter c adalah jumlah request concurrent (berbarengan) yang
dibuat, dengan contoh diatas berarti jumlah request yang dibuat
adalah 1000 request dalam satu waktu.
- Parameter n adalah
jumlah koneksi yang dibuat ke server tujuan, dengan contoh diatas
berarti koneksi yang dibuat adalah 1000 koneksi. Ab ini mengkonsumsi
resource server, mulai dari memori (RAM), bandwidth dan processor.
Masukkan jumlah koneksi dan conccurent request yang sesuai, agar web
server tidak sampai kehabisan resource dan kemudian hang.
-
Parameter terakhir adalah URL, halaman yang akan diproses oleh web
server di-benchmark.
